/* Finale Theme Overrides für Elementor
 * Lädt sehr spät (Priority 99) nach allen generierten post-*.css Dateien
 * Hier nur wirklich letzte, globale oder seitenweite Korrekturen eintragen.
 * Faustregel: Wenn etwas mit Variablen lösbar ist -> dort nutzen, nicht hier.
 */

:root {
    /* Reserviert für spätere globale finale Variablen (bewusst nicht leer) */
    /* --example-final-var: 1; */
}

/* =======================
   MOBILE: Weißraum-Fix
   
   URSACHE (vollständige Kaskade):
   1. Sticky-Footer-Layout:
      body           → min-height: 100vh; display: flex; flex-direction: column
      #page.site     → min-height: 100vh; flex: 1 0 auto
      #content       → flex: 1 0 auto  → Höhe = volle Viewport-Restfläche
   
   2. Elementor Flexbox-Container:
      .e-con         → display: flex; --min-height: (ggf. inline 100vh)
      .e-con-inner   → display: flex; align-items: stretch (CSS-Default!)
      .elementor-widget → flex-child, streckt sich via align-items: stretch
                         + flex-grow via --container-widget-flex-grow
      .elementor-widget-container → height: 100% (Elementor Core-CSS)
   
   Auf Mobile (flex-direction: column):
   - align-items: stretch → horizontale Streckung (harmlos)
   - ABER: flex-grow + height:100% → vertikale Streckung → LEERRAUM
   - Außerdem: --min-height auf .e-con per Inline-Style
   
   FIX-STRATEGIE:
   A. ROOT: #content darf NICHT wachsen
   B. CONTAINER: Elementor min-height + height-Properties neutralisieren
   C. WIDGETS: flex-grow 0 + align-self flex-start + height auto
   ======================= */
@media (max-width: 767px) {

    /* ══════════════════════════════════════
       A. ROOT-FIX: Sticky-Footer-Kaskade
       ══════════════════════════════════════ */

    html {
        height: auto !important;
    }

    /* Kern-Fix: #content nimmt NUR Inhaltshöhe ein */
    #content.site-content {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Sticky Footer via margin-top:auto statt flex-grow */
    .site-footer {
        margin-top: auto !important;
    }

    /* Zwischen-Ebenen: Kaskade unterbrechen */
    .elementor-page .entry-content > .elementor,
    .elementor-page .entry-content,
    .elementor-page article,
    .elementor-page .site-main,
    .elementor-page .content-area,
    .elementor-page .container,
    .elementor-page main,
    .elementor-full-width-container {
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    /* ══════════════════════════════════════
       B. CONTAINER-FIX: Elementor .e-con
       ══════════════════════════════════════ */

    /* B1. Height + min-height auf auto */
    .e-con,
    .e-con-inner,
    .e-con.e-child,
    .e-con.e-parent,
    .elementor-section .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap {
        height: auto !important;
        min-height: 0 !important;
    }

    /* B2. Elementor CSS Custom Properties neutralisieren
       (werden oft inline per style="" auf .e-con gesetzt) */
    .e-con,
    .e-con-inner {
        --min-height: 0px !important;
        --height: auto !important;
        --container-min-height: 0px !important;
        --container-widget-flex-grow: 0 !important;
        --container-widget-height: auto !important;
        min-height: 0 !important;
    }

    /* B3. Kind-Container: flex-wrap: nowrap ist der KERN-FIX.
       URSACHE: Elementor setzt --flex-wrap-mobile: wrap in post-*.css.
       Bei flex-direction: column + flex-wrap: wrap + definiter Höhe
       (durch Stretch vom Eltern-Container) wird die Container-Höhe
       als Spaltenhöhe genutzt → Widgets strecken sich auf volle Höhe.
       Fix: nowrap auf .e-child → keine Spaltenlogik → Widgets nutzen
       nur ihre Inhaltshöhe. */
    .e-con.e-child {
        flex-grow: 0 !important;
        flex-basis: auto !important;
        flex-shrink: 1 !important;
        --flex-wrap: nowrap !important;
        --flex-wrap-mobile: nowrap !important;
        flex-wrap: nowrap !important;
    }

    /* B4. Eltern-Container: flex-wrap: nowrap auf Mobile.
       URSACHE: Dieselbe Problematik wie B3 trifft auch Eltern-Container.
       flex-direction: column + flex-wrap: wrap → Multi-Column-Layout,
       Kinder bekommen 0px Breite weil keine explizite Spaltenbreite gesetzt ist.
       Fix: nowrap erzwingen + Content nach oben packen. */
    .e-con.e-parent {
        justify-content: flex-start !important;
        align-content: flex-start !important;
        --flex-wrap: nowrap !important;
        --flex-wrap-mobile: nowrap !important;
        flex-wrap: nowrap !important;
    }

    /* B5. Row-Container auf Mobile: Vertikal stapeln.
       URSACHE: Elementor-Container mit --flex-direction: row bleiben
       auf Mobile nebeneinander → Kinder werden zu schmal für lesbaren Text.
       Fix: Alle Flex-Container (Parent + Child) auf column umschalten.
       Elementor setzt flex-direction via CSS-Variable --flex-direction,
       daher muss sowohl die Property als auch die Variable überschrieben werden.
       Auf 390px Viewport ist JEDES Row-Layout mit 2+ Spalten zu eng. */
    .e-con.e-child,
    .e-con.e-parent {
        --flex-direction: column !important;
        flex-direction: column !important;
    }

    /* B6. Grid-Container (Icon-Box-Kacheln): 2 Spalten auf Mobile.
       URSACHE: Elementor setzt --e-con-grid-template-columns auf repeat(1, 1fr)
       für Mobile → jede Kachel nimmt die volle Breite ein.
       Fix: Grid-Container mit .e-grid auf 2 Spalten umstellen,
       damit Icon-Boxen nebeneinander angezeigt werden. */
    .e-con.e-grid {
        --e-con-grid-template-columns: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ══════════════════════════════════════
       C. WIDGET-FIX: der eigentliche Leerraum
       ══════════════════════════════════════ */

    /* C1. Widget-Element (.elementor-widget) ist ein Flex-Child
       von .e-con-inner. flex-grow (via --container-widget-flex-grow)
       lässt es auf der HAUPT-Achse wachsen → vertikaler Leerraum.
       Fix: flex-grow: 0 → Widget nimmt nur Inhaltshöhe ein.
       WICHTIG: align-self NICHT auf flex-start setzen!
       Bei flex-direction:column ist die Cross-Axis = horizontal,
       flex-start würde die Breite auf Inhaltsbreite schrumpfen. */
    .e-con > .e-con-inner > .elementor-widget,
    .e-con > .elementor-widget,
    .elementor-widget {
        height: auto !important;
        min-height: 0 !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        /* align-self: stretch → Default beibehalten für volle Breite */
    }

    /* C2. Widget-Container: Elementors Core-Regel
       `.e-con > .elementor-widget > .elementor-widget-container { height:100% }`
       komplett neutralisieren */
    .e-con > .e-con-inner > .elementor-widget > .elementor-widget-container,
    .e-con > .elementor-widget > .elementor-widget-container,
    .elementor-widget-container {
        height: auto !important;
        min-height: 0 !important;
    }

    /* C3. Widget-Wrap (Legacy Sections): ebenfalls nicht strecken */
    .elementor-widget-wrap {
        height: auto !important;
        min-height: 0 !important;
        flex-grow: 0 !important;
    }
}

/* Beispiel (auskommentiert):
.page-id-18 .dorsten-icon-box { }
*/