/* =====================================================
   ELEMENTOR OVERRIDES
   Hier werden nur Elementor-Defaults überschrieben,
   die nicht über das Elementor-Panel steuerbar sind.
   Alles andere gehört in components.css oder helper.css.
===================================================== */


/* =====================================================
   CONTAINER – Max-Width & Padding
===================================================== */

:root {
    --container-max-width:            1400px;
    --container-default-padding-top:  3rem;
    --container-default-padding-side: max(3rem, 5vw);
    --container-default-padding-bottom: 2rem;
}

/* Alle Top-Level-Container bekommen das Standard-Padding */
body .e-con.e-parent:not(.p-0) {
    padding:
        var(--container-default-padding-top)
        var(--container-default-padding-side)
        var(--container-default-padding-bottom)
        var(--container-default-padding-side);
}

/* Boxed Sections auf Container-Breite normalisieren */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--container-max-width);
}

/* Schmaleres Padding auf Mobile */
@media (max-width: 767px) {
    :root {
        --container-default-padding-side: max(1.5rem, 4vw);
    }
}


/* =====================================================
   TYPOGRAPHY – Heading Widget
===================================================== */

/* Elementors globale Textfarbe respektiert unsere Token */
body .elementor-widget-heading .elementor-heading-title {
    color: var(--text-main);
}

/* In dunklen Containern immer hell */
body .bg-dark .elementor-widget-heading .elementor-heading-title,
body .bg-darker .elementor-widget-heading .elementor-heading-title {
    color: var(--text-light);
}

/* In hellen Containern immer dunkel */
body .bg-light .elementor-widget-heading .elementor-heading-title {
    color: var(--text-dark);
}

/* Letzter Paragraph im Widget ohne Bottom-Margin */
.elementor-widget-container p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   BUTTONS – Elementor Button Widget
===================================================== */

/* Elementor soll unsere .btn-Klassen nicht überschreiben */
.elementor a.btn {
    text-decoration: none;
}

/* Elementor-Standard-Button normalisieren */
.elementor-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
}


/* =====================================================
   CONTAINER WIDTH HELPERS (für Elementor Custom Classes)
   Nutzbar als CSS-Klasse direkt im Elementor-Container.
   .mw-50  → 50% der Container-Breite
   .mw-80  → 80% der Container-Breite
===================================================== */

.elementor.elementor .e-con > .elementor-widget.e-mw-50 {
    max-width: min(100%, calc(var(--container-max-width) * 0.5));
    margin: 0 auto;
}

.c-container.mw-50,
.e-con.e-parent.mw-50 {
    max-width: min(
        100%,
        calc(
            var(--container-max-width) * 0.5
            + (var(--container-default-padding-side) * 2)
        )
    );
}

.c-container.mw-80,
.e-con.e-parent.mw-80 {
    max-width: min(
        100%,
        calc(
            var(--container-max-width) * 0.8
            + (var(--container-default-padding-side) * 2)
        )
    );
}


/* =====================================================
   FOOTER – Mobile Fix
===================================================== */

@media (max-width: 767px) {
    footer .footer-nav {
        padding-right: 0;
    }
}