/**
 * Elementor Mobile Fixed Background - Element.How Methode
 * 
 * Basiert auf: https://element.how/elementor-background-fixed-mobile/
 * 
 * WICHTIG: Dieses CSS wird im Elementor Container > Advanced > Custom CSS eingefügt
 * 
 * SETUP SCHRITTE:
 * 1. Container öffnen in Elementor
 * 2. Style > Background: LEER lassen (nur aktiviert für Overlay)
 * 3. Style > Background Overlay: Bild hochladen
 *    - Attachment: NICHT auf Fixed setzen
 *    - Size: Cover
 *    - Position: Center Center
 * 4. Advanced > Custom CSS: Diesen Code einfügen
 * 5. Optional: HTML Element mit orientation-change Script hinzufügen
 * 
 * FUNKTIONIERT FÜR: Container (Elementor Flexbox)
 */

/* ========================================
   CONTAINER VERSION (Flexbox Container)
   ======================================== */

@supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%)) {
    selector {
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
        overflow: hidden;
    }
    
    selector::before {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        pointer-events: none;
    }
}


/* ========================================
   SECTION VERSION (Legacy Sections & Columns)
   ======================================== */
   
/**
 * Falls Sie noch alte Sections nutzen (nicht Container),
 * ersetzen Sie den obigen Code durch diesen:
 *
 * @supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0)) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0)) {
 *     selector {
 *         -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
 *         clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
 *         overflow: hidden;
 *     }
 *     
 *     selector .elementor-background-overlay {
 *         position: fixed;
 *         top: 0;
 *         left: 0;
 *         height: 100vh;
 *         pointer-events: none;
 *     }
 * }
 */


/* ========================================
   HINWEISE
   ======================================== */
   
/**
 * WARUM ::before STATT .elementor-background-overlay?
 * - Bei Containern gibt es kein .elementor-background-overlay Element
 * - Das ::before Pseudo-Element wird automatisch erstellt
 * - Es erbt das Background-Image vom Container
 * 
 * WARUM @supports?
 * - Progressives Enhancement
 * - Fallback für alte Browser
 * - Elementor zeigt rotes X, aber CSS funktioniert trotzdem
 * 
 * WARUM overflow:hidden?
 * - Behebt iOS Safari Bug mit mehreren Fixed Backgrounds
 * - Verhindert dass Background aus Container ausbricht
 * - Kritisch für korrekte Funktion auf iPad/iPhone
 * 
 * WARUM pointer-events:none?
 * - Verhindert dass Fixed Background Links blockiert
 * - Ermöglicht Klicks auf darüber liegende Elemente
 * - ESSENTIELL - ohne diesen Wert funktionieren Navigation/Buttons nicht
 * 
 * BEKANNTE EINSCHRÄNKUNGEN:
 * - Background Overlay wird für Fixed Image verwendet
 * - Falls Sie auch einen echten Overlay brauchen: Bild mit Overlay vorher kombinieren
 * - Oder: Background Color + Background Overlay Transparency nutzen (siehe Kommentare)
 * - Border Radius funktioniert möglicherweise nicht korrekt
 * - Bei Zoom auf iOS/Safari kann Viewport grau werden (Safari Bug, nicht behebbar)
 * 
 * TROUBLESHOOTING:
 * - Rotes X "Unknown @ rule: @supports" → Ignorieren, CSS funktioniert
 * - Bild wird nicht angezeigt → Prüfen ob im Background OVERLAY (nicht Background)
 * - Links funktionieren nicht → pointer-events:none; fehlt
 * - Background bricht aus → overflow:hidden; fehlt
 * - Nur auf Desktop sichtbar → Kein Media Query nötig, funktioniert auf allen Geräten
 */