/**
 * EVD Füchse Theme - Content Layout Styles
 * Stile für verschiedene Content-Layouts (Boxed / Full Width)
 */

/* ===== CONTENT LAYOUT CONTAINER ===== */

/* Standard Content Container für das EVD Füchse Theme */
.blog-content,
.content-wrapper .blog-section,
.content-wrapper article {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Full Width Content Layout */
.evd-content-layout-full_width .blog-content,
.evd-content-layout-full_width .content-wrapper .blog-section,
.evd-content-layout-full_width .content-wrapper article {
    max-width: 1400px;
    width: 100%;
}

/* Boxed Content Layout (explizit, um sicherzustellen) */
.evd-content-layout-boxed .blog-content,
.evd-content-layout-boxed .content-wrapper .blog-section,
.evd-content-layout-boxed .content-wrapper article {
    max-width: 1200px;
    width: 100%;
}

/* ===== RESPONSIVE ANPASSUNGEN ===== */

/* Tablet und Mobile - Container bleiben responsive */
@media (max-width: 1024px) {
    .blog-content,
    .content-wrapper .blog-section,
    .content-wrapper article,    .evd-content-layout-full_width .blog-content,
    .evd-content-layout-full_width .content-wrapper .blog-section,
    .evd-content-layout-full_width .content-wrapper article,
    .evd-content-layout-boxed .blog-content,
    .evd-content-layout-boxed .content-wrapper .blog-section,
    .evd-content-layout-boxed .content-wrapper article {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .blog-content,
    .content-wrapper .blog-section,
    .content-wrapper article,
    .evd-content-layout-full_width .blog-content,
    .evd-content-layout-full_width .content-wrapper .blog-section,
    .evd-content-layout-full_width .content-wrapper article,
    .evd-content-layout-boxed .blog-content,
    .evd-content-layout-boxed .content-wrapper .blog-section,
    .evd-content-layout-boxed .content-wrapper article {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ===== SPEZIELLE INHALTS-ELEMENTE ===== */

/* Stellen Sie sicher, dass Bilder innerhalb der Container nicht überlaufen */
.evd-content-layout-boxed .blog-content img,
.evd-content-layout-full_width .blog-content img {
    max-width: 100%;
    height: auto;
}

/* Tabellen responsive machen */
.evd-content-layout-boxed .blog-content table,
.evd-content-layout-full_width .blog-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .blog-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        border: 1px solid #ddd;
    }
}

/* ===== KOMPATIBILITÄT MIT EXISTIERENDEN THEMES ===== */

/* Stelle sicher, dass Elementor-Inhalte nicht beeinflusst werden */
.elementor-widget-container,
.elementor-section,
.elementor-container {
    /* Diese behalten ihre eigenen max-width Einstellungen aus elementor-custom.css */
    max-width: inherit;
}

/* WordPress Standard-Blöcke falls verwendet */
.evd-content-layout-boxed .wp-block-group,
.evd-content-layout-boxed .wp-block-cover,
.evd-content-layout-boxed .wp-block-columns {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.evd-content-layout-full_width .wp-block-group,
.evd-content-layout-full_width .wp-block-cover,
.evd-content-layout-full_width .wp-block-columns {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}