/*
 * Dorsten Full Width Container System
 *
 * Erstellt: Juni 2025
 * Zweck: Elementor Container System für Full Width Layouts
 * Kompatibilität: Elementor 3.x+, WordPress 6.x+
 */

/* ==========================================
   DORSTEN FULL WIDTH CONTAINER
   ========================================== */

.dorsten-full-width-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
}

/* Stellt sicher, dass Kind-Container richtig funktionieren */
.dorsten-full-width-container .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Für neue Elementor Container (e-con) */
.dorsten-full-width-container.e-con {
    --container-max-width: 100vw !important;
    --container-widget-width: 100% !important;
    --container-widget-flex-grow: 1 !important;
}

.dorsten-full-width-container .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================
   DORSTEN INNER CONTAINER - FULL WIDTH
   ========================================== */

.dorsten-inner-container-full {
    max-width: 1300px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}


/* ==========================================
   DORSTEN INNER CONTAINER - BOXED
   ========================================== */

.dorsten-inner-container-boxed {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}


/* ==========================================
   DORSTEN FULL WIDTH BREAK OUT
   ========================================== */

.dorsten-full-width-break-out {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}


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

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .dorsten-inner-container-full,
    .dorsten-inner-container-boxed {
        max-width: 95% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .dorsten-inner-container-full,
    .dorsten-inner-container-boxed {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ==========================================
   ZUSÄTZLICHE DORSTEN SPEZIFISCHE STYLES
   ========================================== */

/* Integration mit Dorsten Theme Farben */
.dorsten-full-width-container.dorsten-section-primary {
    background-color: var(--dorsten-primary-color, #0066cc);
}

.dorsten-full-width-container.dorsten-section-secondary {
    background-color: var(--dorsten-secondary-color, #f8f9fa);
}

/* Spezielle Klasse für Dorsten Hero Sections */
.dorsten-hero-full-width {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dorsten Container mit Schatten */
.dorsten-inner-container-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: white;
    padding: 30px !important;
}

@media (max-width: 767px) {
    .dorsten-inner-container-shadow {
        padding: 20px !important;
    }
}