/**
 * LAYOUT FIX - FINAL OVERRIDE
 * Diese Datei wird als LETZTE geladen und überschreibt ALLES
 * Sie enthält NUR die kritischen Layout-Regeln
 */

/* ============================================
   DESKTOP LAYOUT (min-width: 769px)
   ============================================ */

@media screen and (min-width: 769px) {
    
    /* SIDEBAR - Links fixed */
    body .sidebar-nav,
    body aside.sidebar-nav,
    body #sidebar-navigation {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }
    
    /* CONTENT - Rechts von Sidebar mit margin-left */
    body #content,
    body .site-content,
    body div#content,
    body div.site-content,
    body #page #content,
    body .site #content {
        margin-left: 280px !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* MAIN - Kein Zentrieren! */
    body main#primary,
    body .site-main,
    body main.site-main {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    
    /* CONTENT CONTAINER - LINKS ausrichten, NICHT zentrieren! */
    /* NUR für normale WP-Seiten, NICHT für Elementor */
    body .page-container:not(.elementor),
    body .blog-container:not(.elementor) {
        max-width: none !important;
        margin: 0 !important;
        padding: 3rem 2rem !important;
        background-color: #1a1a1a !important;
    }
    
    /* Elementor Full-Width Support */
    body .elementor,
    body .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }
    
    /* BLOG CONTAINERS */
    body .blog-archive,
    body .blog-single,
    body .error-404-page {
        max-width: none !important;
        margin: 0 !important;
        padding: 3rem 2rem !important;
    }
    
    /* FORCE LEFT ALIGNED - NUR WordPress, NICHT Elementor! */
    body:not(.elementor-page) .entry-header,
    body:not(.elementor-page) .entry-title,
    body:not(.elementor-page) .entry-content,
    body:not(.elementor-page) .page-content {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }
    
    /* Headers left aligned - NUR WordPress */
    body:not(.elementor-page) article h1,
    body:not(.elementor-page) article h2,
    body:not(.elementor-page) article h3,
    body:not(.elementor-page) article h4,
    body:not(.elementor-page) article h5,
    body:not(.elementor-page) article h6 {
        text-align: left !important;
    }
    
    
    /* FOOTER INFO - LINKS ausrichten */
    body .site-info {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    
    /* FOOTER - Rechts von Sidebar mit margin-left */
    body footer.site-footer,
    body #colophon,
    body .site-footer,
    body footer#colophon {
        margin-left: 280px !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Mobile Header ausblenden */
    body .mobile-header,
    body .mobile-nav-overlay {
        display: none !important;
    }
}

/* ============================================
   MOBILE LAYOUT (max-width: 768px)
   ============================================ */

@media screen and (max-width: 768px) {
    
    /* SIDEBAR ausblenden */
    body .sidebar-nav,
    body aside.sidebar-nav,
    body #sidebar-navigation {
        display: none !important;
    }
    
    /* CONTENT - Volle Breite - DEFAULT: MIT padding für Header */
    body #content,
    body .site-content,
    body div#content,
    body div.site-content,
    body main#primary {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 60px !important; /* Mobile Header Höhe */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ELEMENTOR Mobile - Bild startet bei 0, Header floatet darüber! */
    body.elementor-page #content,
    body.elementor-page .site-content,
    body.elementor-page #primary,
    body.elementor-page main#primary,
    body.elementor-page .site-main {
        padding-top: 0 !important; /* KEIN padding */
        padding-bottom: 0 !important;
        margin-top: 0 !important; /* KEIN margin - Bild startet bei 0! */
        margin-bottom: 0 !important;
    }
    
    /* Elementor Container - Alles auf 0 */
    body.elementor-page .elementor,
    body.elementor-page .elementor > div {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile Header auf Elementor-Seiten - ÜBER dem Content (fixed) */
    body.elementor-page .mobile-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 9999 !important;
        background-color: rgba(44, 44, 44, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* CONTENT CONTAINER - Mobile padding für normale WP-Seiten */
    body:not(.elementor-page) .page-container,
    body .blog-archive,
    body .blog-single,
    body .error-404-page,
    body .blog-container {
        margin: 0 !important;
        padding: 1rem 1.5rem !important;
    }
    
    /* FOOTER - Volle Breite */
    body footer.site-footer,
    body #colophon,
    body .site-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* FOOTER INFO - Mobile padding */
    body .site-info {
        padding: 2rem 1.5rem !important;
    }
    
    /* Mobile Header anzeigen */
    body .mobile-header {
        display: flex !important;
    }
}

/* ============================================
   ELEMENTOR FREEDOM - Volle Kontrolle auf ALLEN Geräten
   ============================================ */

/* Elementor-Seiten - Keine Theme-Beschränkungen */
body.elementor-page .elementor-widget-heading *,
body.elementor-page .elementor-widget-text-editor *,
body.elementor-page .elementor-widget *,
body.elementor-page .elementor-element * {
    /* Theme mischt sich NICHT ein - Elementor hat volle Kontrolle */
}

/* Mobile - Elementor auch hier frei */
@media (max-width: 768px) {
    /* Keine zusätzlichen Beschränkungen auf Mobile für Elementor */
    body.elementor-page .entry-header,
    body.elementor-page .entry-title,
    body.elementor-page .entry-content,
    body.elementor-page article h1,
    body.elementor-page article h2,
    body.elementor-page article h3 {
        text-align: inherit;
        margin: inherit;
        padding: inherit;
    }
}

/* ============================================
   ANTI-OVERLAP RULES
   ============================================ */

/* Verhindere dass Content unter Sidebar rutscht */
body #page,
body .site {
    position: relative !important;
    overflow-x: hidden !important;
}

/* Stelle sicher dass Sidebar immer oben ist */
@media screen and (min-width: 769px) {
    body .sidebar-nav {
        z-index: 1000 !important;
    }
    
    body #content,
    body .site-content {
        z-index: 1 !important;
    }
}