/**
 * Background Fix for Klick-Game
 * Ensures background image is always visible, stretched, and fixed while scrolling
 * Version: 1.0
 * Priority: HIGH - Load this file last
 */

/* ============================================
   CRITICAL BACKGROUND FIX
   Background bleibt beim Scrollen sichtbar und ist gestretched
   ============================================ */

html {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background-color: #2a2a2a !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    /* Background Image - immer sichtbar */
    background-color: #2a2a2a !important;
    background-image: url('/images/body-bg.jpg') !important;
    
    /* Fixed = bleibt beim Scrollen */
    background-attachment: fixed !important;
    
    /* Zentriert */
    background-position: center center !important;
    
    /* Kein Wiederholen */
    background-repeat: no-repeat !important;
    
    /* Cover = Stretched auf gesamten Bildschirm */
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
}

/* Zusätzlicher Fix für iOS Safari */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        background-attachment: scroll !important;
        background-size: 100% 100% !important;
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #2a2a2a;
        background-image: url('/images/body-bg.jpg');
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }
}

/* Fallback für ältere Browser */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    body {
        background-size: 100% 100% !important;
    }
}