/* ========================================================================== Order guards Cross-cutting rules that fix reversed content order baked into per-page Elementor CSS. Sibling to overflow-guards.css and spacing-guards.css (same "loads last, wins the cascade" placement) but for flex order rather than overflow or spacing. ========================================================================== */ /* ========================================================================== 1. FAQ heading rendering after its accordion on tablet/mobile An FAQ section is a container with a heading widget followed by an accordion widget. Found on 17 pages (7 EN feature pages, 6 DE feature pages, 3 EN industry pages) with the same baked-in mistake: the container's --flex-direction is "column" on desktop but "column-reverse" at <=1024px, so the accordion visually renders above its own heading on every tablet and phone width. Nothing relies on the reversed order - it does not happen on the two FAQ sections that do not have this override (homepage, working-time-calculator/Arbeitszeitrechner). :has() targets any such container generically (present-day and future FAQ sections alike) instead of patching 17 near-identical per-page rules. Scoped tightly to containers with an accordion so it cannot affect an unrelated, intentionally reversed image/text row elsewhere on the page. !important is deliberate: the per-page rule this corrects is itself inline CSS loaded earlier in , and its generated selector specificity varies page to page (2-4 chained classes) in ways that are not worth matching exactly - this guard's whole job is to always win. ========================================================================== */ @media (max-width: 1024px) { .e-parent:has(.elementor-widget-n-accordion) { --flex-direction: column !important; } }