/**
 * CockpitOS Max Bonn Theme - Widget Container System
 * 
 * Verantwortlichkeit: Full-Width Container + Boxed Content System
 * Für alle Widgets verwendbar
 * 
 * @package CockpitOS_MEC_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Container System (für alle Widgets)
   ======================================== */

/* ========================================
   Elementor Container Override
   ======================================== */

/* Elementor Container/Section: Volle Breite, kein Padding */
.elementor-widget:has(.cockpit-widget__wrapper),
.elementor-section:has(.cockpit-widget__wrapper),
.elementor-container:has(.cockpit-widget__wrapper) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Elementor Widget: Volle Breite, kein Padding */
.elementor-widget-cockpit-os-mec-light-hero,
.elementor-widget-cockpit-os-mec-light-intro,
.elementor-widget-cockpit-os-mec-light-content-grid,
.elementor-widget-cockpit-os-mec-light-shop-carousel,
.elementor-widget-cockpit-os-mec-light-contact,
.elementor-widget-cockpit-rental {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Wrapper = Full-Width Container (für Hintergrund) */
.cockpit-widget__wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0 !important; /* Kein Padding - Elementor Container hat bereits 0 */
    padding-right: 0 !important; /* Kein Padding - Elementor Container hat bereits 0 */
    padding-top: var(--spacing-8, 3rem); /* Standard vertical padding */
    padding-bottom: var(--spacing-8, 3rem); /* Standard vertical padding */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Boxed Container: Zentriert mit max-width (für Hintergrund) */
.cockpit-widget-container--boxed .cockpit-widget__wrapper {
    max-width: 1200px !important; /* Wird durch Control überschrieben */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Full-Width Container: Immer volle Breite (Standard) */
.cockpit-widget-container--fullwidth .cockpit-widget__wrapper {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   Widget-spezifische Ausnahmen
   ======================================== */

/* Hero Widget: Keine Standard-Paddings (sollte Full-Width ohne Padding sein) */
.cockpit-widget__wrapper:has(.cockpit-hero),
.elementor-widget-cockpit-os-mec-light-hero .cockpit-widget__wrapper,
.elementor-widget-cockpit-os-mec-light-hero .cockpit-widget__content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Hero Widget: Sicherstellen, dass Hero die volle Breite einnimmt */
.elementor-widget-cockpit-os-mec-light-hero {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.elementor-widget-cockpit-os-mec-light-hero .cockpit-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content = Boxed Content (für Inhalt) */
.cockpit-widget__content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4, 1.5rem); /* Standard horizontal padding */
    padding-right: var(--spacing-4, 1.5rem); /* Standard horizontal padding */
}

/* Boxed Content: Zentriert mit max-width */
.cockpit-widget-content--boxed .cockpit-widget__content {
    max-width: 1200px !important; /* Wird durch Control überschrieben */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--spacing-4, 1.5rem);
    padding-right: var(--spacing-4, 1.5rem);
}

/* Full-Width Content: Volle Breite ohne max-width */
.cockpit-widget-content--fullwidth .cockpit-widget__content {
    max-width: 100% !important;
    padding-left: var(--spacing-4, 1.5rem); /* Padding bleibt für Abstand zum Rand */
    padding-right: var(--spacing-4, 1.5rem); /* Padding bleibt für Abstand zum Rand */
}

/* ========================================
   Automatische Textfarbe (basierend auf Hintergrund)
   ======================================== */

/* Dunkler Hintergrund → Heller Text */
.cockpit-widget__wrapper--dark-bg,
.cockpit-widget__wrapper--dark-bg h1,
.cockpit-widget__wrapper--dark-bg h2,
.cockpit-widget__wrapper--dark-bg h3,
.cockpit-widget__wrapper--dark-bg h4,
.cockpit-widget__wrapper--dark-bg h5,
.cockpit-widget__wrapper--dark-bg h6,
.cockpit-widget__wrapper--dark-bg p,
.cockpit-widget__wrapper--dark-bg span:not([class*="btn"]),
.cockpit-widget__wrapper--dark-bg a:not(.btn):not([class*="btn"]),
.cockpit-widget__wrapper--dark-bg li,
.cockpit-widget__wrapper--dark-bg label,
.cockpit-widget__wrapper--dark-bg .cockpit-widget__title,
.cockpit-widget__wrapper--dark-bg .cockpit-widget__subtitle,
.cockpit-widget__wrapper--dark-bg .cockpit-widget__description {
    color: var(--color-white, #ffffff) !important;
}

/* Links auf dunklem Hintergrund */
.cockpit-widget__wrapper--dark-bg a:not(.btn):not([class*="btn"]) {
    color: var(--color-primary-light, #d1d7e0) !important;
}

.cockpit-widget__wrapper--dark-bg a:not(.btn):not([class*="btn"]):hover {
    color: var(--color-white, #ffffff) !important;
}

/* ========================================
   Buttons auf dunklem Hintergrund
   ======================================== */

/* Buttons auf dunklem Hintergrund: Invertierte Farben für bessere Sichtbarkeit */
.cockpit-widget__wrapper--dark-bg .btn-primary,
.cockpit-widget__wrapper--dark-bg .widget-button,
.cockpit-widget__wrapper--dark-bg .btn {
    background-color: var(--color-white, #ffffff) !important;
    color: var(--color-primary-dark, #343d4c) !important;
}

.cockpit-widget__wrapper--dark-bg .btn-primary:hover,
.cockpit-widget__wrapper--dark-bg .widget-button:hover,
.cockpit-widget__wrapper--dark-bg .btn:hover {
    background-color: var(--color-primary-light, #d1d7e0) !important;
    color: var(--color-primary-dark, #343d4c) !important;
}

.cockpit-widget__wrapper--dark-bg .btn-outline,
.cockpit-widget__wrapper--dark-bg .widget-button--outline {
    background-color: transparent !important;
    border: 2px solid var(--color-white, #ffffff) !important;
    color: var(--color-white, #ffffff) !important;
}

.cockpit-widget__wrapper--dark-bg .btn-outline:hover,
.cockpit-widget__wrapper--dark-bg .widget-button--outline:hover {
    background-color: var(--color-white, #ffffff) !important;
    color: var(--color-primary-dark, #343d4c) !important;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .cockpit-widget__wrapper {
        padding-top: var(--spacing-6, 2rem);
        padding-bottom: var(--spacing-6, 2rem);
    }
    
    /* Hero Widget: Keine Paddings auch auf Tablet */
    .cockpit-widget__wrapper:has(.cockpit-hero),
    .elementor-widget-cockpit-os-mec-light-hero .cockpit-widget__wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
    
    .cockpit-widget-content--boxed .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
    
    .cockpit-widget-content--fullwidth .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
}

@media (max-width: 768px) {
    .cockpit-widget__wrapper {
        padding-top: var(--spacing-6, 2rem);
        padding-bottom: var(--spacing-6, 2rem);
    }
    
    /* Hero Widget: Keine Paddings auch auf Mobile */
    .cockpit-widget__wrapper:has(.cockpit-hero),
    .elementor-widget-cockpit-os-mec-light-hero .cockpit-widget__wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
    
    .cockpit-widget-content--boxed .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
    
    .cockpit-widget-content--fullwidth .cockpit-widget__content {
        padding-left: var(--spacing-3, 1rem);
        padding-right: var(--spacing-3, 1rem);
    }
}

@media (max-width: 480px) {
    .cockpit-widget__wrapper {
        padding-top: var(--spacing-4, 1.5rem);
        padding-bottom: var(--spacing-4, 1.5rem);
    }
    
    /* Hero Widget: Keine Paddings auch auf Small Mobile */
    .cockpit-widget__wrapper:has(.cockpit-hero),
    .elementor-widget-cockpit-os-mec-light-hero .cockpit-widget__wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .cockpit-widget__content {
        padding-left: var(--spacing-2, 0.75rem);
        padding-right: var(--spacing-2, 0.75rem);
    }
    
    .cockpit-widget-content--boxed .cockpit-widget__content {
        padding-left: var(--spacing-2, 0.75rem);
        padding-right: var(--spacing-2, 0.75rem);
    }
    
    .cockpit-widget-content--fullwidth .cockpit-widget__content {
        padding-left: var(--spacing-2, 0.75rem);
        padding-right: var(--spacing-2, 0.75rem);
    }
}