/*
Theme Name: Leroux Child
Theme URI: https://leroux.qodeinteractive.com
Description: A child theme of Leroux
Author: Elated Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: leroux
Template: leroux
*/

#qodef-page-header {
    background-color: rgba(61, 79, 81, 0.85) !important;
}

.qodef-vertical-sliding-area,
.qodef-header--vertical-sliding #qodef-page-header.qodef-background--blur .qodef-vertical-sliding-area,
.qodef-header--vertical-sliding #qodef-page-header.qodef-background--blur .qodef-vertical-sliding-area .qodef-header-vertical-sliding-navigation {
    background-color: rgba(61, 79, 81, 0.5) !important;
}

/* Bild im Bild-Widget gegenrotieren (Container bleibt -180°, damit Position stimmt) */
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--static .qodef-widget-holder .widget_media_image img {
    transform: rotate(180deg);
}

#qodef-page-header .qodef-header-logo-link {
    transform: none !important;
}

/* Erste Submenu-Ebene (z.B. STRATEGIE, STEUERN, VERTRAUEN): keine Einrückung */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation .qodef-drop-down-second-inner > ul.sub-menu > li > a {
    padding-left: 0 !important;
}

/* Grünes "+" vor Übermenüpunkten (Desktop) */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation .qodef-drop-down-second-inner > ul.sub-menu > li > a::before {
    content: "+ ";
    color: #89BA17;
    font-weight: 700;
    margin-right: 6px;
}

/* Grünes "+" vor Übermenüpunkten (Mobile) */
.qodef-mobile-header-navigation .qodef-drop-down-second-inner > ul > li > a::before {
    content: "+ ";
    color: #89BA17;
    font-weight: 700;
    margin-right: 6px;
}

/* Mobile-Menü: Theme-Akzentgrün (#81D742) für aktive/aktuelle/hover-Menüpunkte
   auf HFMO-Grün #89BA17. Der Unterstrich nutzt currentColor → folgt der color. */
.qodef-mobile-header-navigation .current-menu-item > a,
.qodef-mobile-header-navigation .current-menu-item > a .qodef-menu-item-text,
.qodef-mobile-header-navigation .current-menu-ancestor > a,
.qodef-mobile-header-navigation .current-menu-ancestor > a .qodef-menu-item-text,
.qodef-mobile-header-navigation .current_page_item > a,
.qodef-mobile-header-navigation .current_page_item > a .qodef-menu-item-text,
.qodef-mobile-header-navigation li > a:hover,
.qodef-mobile-header-navigation li > a:hover .qodef-menu-item-text,
.qodef-mobile-header-navigation li.qodef--opened > a,
.qodef-mobile-header-navigation li.qodef--opened > a .qodef-menu-item-text {
    color: #89BA17 !important;
}

/* Zweite Submenu-Ebene (z.B. PROZESSBERATUNG): eingerückt */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation .qodef-drop-down-second-inner ul.sub-menu ul.sub-menu li > a {
    padding-left: 30px !important;
}

/* Gleiches Verhalten für Mobile-Menü */
.qodef-mobile-header-navigation .qodef-drop-down-second-inner > ul > li > a {
    padding-left: 0 !important;
}
.qodef-mobile-header-navigation .qodef-drop-down-second-inner ul ul li > a {
    padding-left: 30px !important;
}

/* Menü-Unterstriche im HFMO-Grün */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation > ul > li > a .qodef-menu-item-text,
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation > ul > li .qodef-drop-down-second-inner ul li > a .qodef-menu-item-text {
    background-image: linear-gradient(90deg, #89BA17 0%, #89BA17 100%) !important;
}

/* HFMO-Logo: responsive Größe abhängig von Viewport-Höhe + Sidebar-Breite */
#qodef-page-header .qodef-header-logo-link img.qodef-header-logo-image {
    width: clamp(55px, 8vh, 100px) !important;
    height: auto !important;
    max-height: 32vh !important;
    max-width: 80% !important;
}

/* Steuerberatung-Bild im unteren Widget: max. Höhe damit das Menü-Opener immer erreichbar bleibt */
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--static .qodef-widget-holder {
    max-height: 40vh !important;
    overflow: hidden;
}
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--static .qodef-widget-holder .widget_media_image,
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--static .qodef-widget-holder .widget_media_image img {
    max-height: 38vh !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
}

/* Padding der Sidebar in der Höhe reduzieren wenn wenig Platz */
@media (max-height: 700px) {
    .qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--static {
        padding: 18px 0 !important;
    }
}

/* ============================================================
   Sliding-Menü: an Inhalt anpassen + Kontakt-Block daneben
   ============================================================ */

/* Sliding-Bereich: voller Viewport — Widget bekommt eigene Position absolut */
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--dynamic,
.qodef-header--vertical-sliding #qodef-page-header.qodef-vertical-sliding-menu--opened .qodef--dynamic {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-right: 0 !important;
    position: fixed !important;
}
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sekundäre Menüpunkte (Impressum, Datenschutz) optisch abgesetzt */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation > ul > li.hfmo-menu-secondary {
    margin: 0 !important;
}
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation > ul > li.hfmo-menu-secondary > a {
    font-size: 14px !important;
    opacity: 0.65;
    font-weight: 400 !important;
}
/* Großer Abstand vor dem ERSTEN sekundären Item */
.qodef-header--vertical-sliding .qodef-header-vertical-sliding-navigation > ul > li.hfmo-menu-secondary:first-of-type {
    margin-top: 80px !important;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.18);
}

/* Kontakt-Info-Block: absolut, weit rechts in der vollen Viewport-Breite */
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--dynamic .qodef-widget-holder.qodef--two {
    position: absolute !important;
    top: 50% !important;
    right: 80px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 320px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 200;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Auch das innere Widget garantiert sichtbar */
.qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--dynamic .qodef-widget-holder.qodef--two > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hfmo-contact-info {
    color: #fff;
    font-size: 14px;
    line-height: 1.65;
    padding-left: 30px;
    border-left: 1px solid rgba(255,255,255,0.15);
}
.hfmo-contact-info h4 {
    color: #89BA17;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    text-transform: none;
    letter-spacing: 0;
}
.hfmo-contact-info p {
    margin: 0 0 18px;
    color: #fff;
}
.hfmo-contact-info a {
    color: #fff;
    text-decoration: none;
}
.hfmo-contact-info hr.hfmo-sep {
    border: 0;
    border-top: 1px solid #89BA17;
    width: 48px;
    margin: 0 0 18px;
}

/* Verfahrensdokumentation – CTA-Buttons gemeinsam rechtsbündig (Flexbox).
   Beide Buttons liegen in EINER Spalte; deren widget-wrap wird zur rechten Flex-Zeile. */
/* Innerer Container nicht auf 1140px begrenzen → volle Breite bis zur rechten Kante */
#kontakt .elementor-inner-section > .elementor-container {
    max-width: none !important;
    width: 100% !important;
}
#kontakt .elementor-inner-section .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: center;
    gap: 16px;
}
#kontakt .elementor-inner-section .elementor-widget-button {
    width: auto !important;
    margin: 0 !important;
}
#kontakt .elementor-inner-section .elementor-button { white-space: nowrap; }

/* Verfahrensdokumentation – Hero-Buttons gemeinsam LINKSbündig (an der Überschrift). */
#vd-hero-cta > .elementor-container {
    max-width: none !important;
    width: 100% !important;
}
#vd-hero-cta .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
    gap: 16px;
}
#vd-hero-cta .elementor-widget-button {
    width: auto !important;
    margin: 0 !important;
}
#vd-hero-cta .elementor-button { white-space: nowrap; }

/* CFO-Seite – Hero-Buttons gemeinsam linksbündig */
#cfo-hero-cta > .elementor-container { max-width: none !important; width: 100% !important; }
#cfo-hero-cta .elementor-widget-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
    gap: 16px;
}
#cfo-hero-cta .elementor-widget-button { width: auto !important; margin: 0 !important; }
#cfo-hero-cta .elementor-button { white-space: nowrap; }

/* CFO-Seite – Hero-Bildspalte: Bild + Verlauf (dunkel links → Bild rechts) per CSS.
   Bild-Datei: /wp-content/uploads/2026/06/cfo-hero.jpg  (zum Wechseln: Datei ersetzen). */
#cfo-hero-img,
#cfo-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.88) 14%, rgba(61,79,81,0.35) 40%, rgba(61,79,81,0) 62%),
        url('/wp-content/uploads/2026/06/cfo-hero.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #cfo-hero-img,
    #cfo-hero > .elementor-container > .elementor-column:last-child { min-height: 300px; }
}

/* CFO-Seite (11775) – 2. Abschnitt: Close-up (Ralf) in der rechten (leeren)
   Spalte b276553. Gleiche Technik wie #cfo-hero (Bild + Verlauf dunkel links →
   Bild rechts). Ziel = stabile Elementor-Klasse, damit es Elementor-Speichern
   übersteht. Abschnitt 1 bleibt unangetastet. */
body.page-id-11775 .elementor-element.elementor-element-b276553 {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.88) 14%, rgba(61,79,81,0.35) 40%, rgba(61,79,81,0) 62%),
        url('/wp-content/uploads/2026/07/Ralf.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    /* Mobile: gestapelt unter dem Text – Verlauf raus (verdeckt sonst das Bild),
       Bild voll sichtbar, Abstand zum Button darüber. */
    body.page-id-11775 .elementor-element.elementor-element-b276553 {
        background-image: url('/wp-content/uploads/2026/07/Ralf.png') !important;
        background-size: cover !important;
        background-position: center top !important;
        min-height: 60vh !important;
        margin-top: 28px !important;
    }
}

/* Verfahrensdokumentation (11760) – 1. Abschnitt: Close-up (Stefanie) in der
   rechten (leeren) Spalte 7cf3e1fa. Section-bg ist WEISS → heller Verlauf
   (weiß links → Bild rechts), wie #rewe-hero. Ziel = stabile Elementor-Klasse. */
body.page-id-11760 .elementor-element.elementor-element-7cf3e1fa {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%),
        url('/wp-content/uploads/2026/07/Stefanie.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    /* Mobile: gestapelt unter dem Text – Verlauf raus, Bild voll sichtbar, Abstand. */
    body.page-id-11760 .elementor-element.elementor-element-7cf3e1fa {
        background-image: url('/wp-content/uploads/2026/07/Stefanie.png') !important;
        background-size: cover !important;
        background-position: center top !important;
        min-height: 60vh !important;
        margin-top: 28px !important;
    }
}

/* Nachfolge (11743) – Hero-Close-up (Elementor-Spalten-Hintergrund 2e0e1e6).
   Mobile war size:initial/280px -> „nur zu erahnen". Auf cover/volle Höhe + Abstand. */
@media (max-width: 1024px) {
    /* Bild liegt (via Elementor) auf dem inneren > .elementor-widget-wrap, NICHT
       auf der Spalte selbst – sonst zwei Bild-Ebenen. Auf der Spalte nur Höhe/Abstand,
       das Bild (Huanita, cover, alle Breakpoints seit Daten-Fix) auf den wrap positionieren. */
    body.page-id-11743 .elementor-element.elementor-element-2e0e1e6 {
        min-height: 60vh !important;
        margin-top: 28px !important;
    }
    body.page-id-11743 .elementor-element.elementor-element-2e0e1e6 > .elementor-widget-wrap {
        background-position: center top !important;
    }
}

/* Standorte (11623) – Section 1 rechte Spalte bc6ca97d: die 2 Karten-Widgets
   werden im 100vh-Panel (panel align-items:stretch) auf volle Höhe gestreckt →
   Karte 1 füllt alles, Karte 2 fällt unten raus. Auf Desktop feste Kartenhöhe
   erzwingen (schlägt die Flex-Streckung, unabhängig von der Flex-Achse).
   Tablet/Handy (≤1024) läuft ohnehin korrekt (vertikaler Stapel). */
body.page-id-11623 .elementor-element.elementor-element-bc6ca97d > .elementor-element-populated {
    /* Karten haben feste Höhe (400px) -> kein Stretch-Risiko. Als Gruppe vertikal
       zentrieren, damit sie mit der mittig ausgerichteten Headline links fluchten. */
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (min-width: 1025px) {
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d .elementor-widget.elementor-widget-html,
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d .elementor-widget.elementor-widget-html > .elementor-widget-container {
        flex: 0 0 auto !important;
        align-self: flex-start !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        overflow: hidden !important;
    }
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d .elementor-widget-html > .elementor-widget-container > div {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
    }
    /* Foto-Zelle (1. Kind der Karte) fest 400px + Positionierungs-Kontext,
       damit das absolut positionierte Bild die Zelle füllt (nicht die 956px-Spalte). */
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d .elementor-widget-html > .elementor-widget-container > div > div:first-child {
        position: relative !important;
        height: 400px !important;
        min-height: 400px !important;
        overflow: hidden !important;
    }
    /* Bild zwingend die Foto-Zelle füllen (überschreibt Theme-img-Regeln). */
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d .elementor-widget-html img {
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Prozessberatung – Hero-Bildspalte: Bild + Verlauf (dunkel links → Bild rechts).
   Bild-Datei: /wp-content/uploads/2026/06/Blick.png (zum Wechseln: Datei ersetzen). */
#proz-hero-img,
#proz-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.9) 14%, rgba(61,79,81,0.4) 42%, rgba(61,79,81,0) 66%),
        url('/wp-content/uploads/2026/06/Blick.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #proz-hero-img,
    #proz-hero > .elementor-container > .elementor-column:last-child { min-height: 300px; }
}

/* Prozessberatung – Button-Gruppen linksbündig (Hero + CTA) */
#proz-hero-cta > .elementor-container,
#proz-cta > .elementor-container { max-width: none !important; width: 100% !important; }
#proz-hero-cta .elementor-widget-wrap,
#proz-cta .elementor-widget-wrap {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    justify-content: flex-start !important; align-items: center; gap: 16px;
}
#proz-hero-cta .elementor-widget-button,
#proz-cta .elementor-widget-button { width: auto !important; margin: 0 !important; }
#proz-hero-cta .elementor-button,
#proz-cta .elementor-button { white-space: nowrap; }

/* Neugründung – Hero-Bildspalte: Bild + Verlauf (WEISS links → Bild rechts, heller Hero).
   Bild-Datei: /wp-content/uploads/2026/06/neugruendung-1.png (zum Wechseln: Datei ersetzen). */
#gruend-hero-img,
#gruend-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.72) 16%, rgba(255,255,255,0) 55%),
        url('/wp-content/uploads/2026/06/neugruendung-1.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #gruend-hero-img,
    #gruend-hero > .elementor-container > .elementor-column:last-child { min-height: 300px; }
}

/* Neugründung – Button-Gruppen linksbündig (Hero + CTA) */
#gruend-hero-cta > .elementor-container,
#gruend-cta > .elementor-container { max-width: none !important; width: 100% !important; }
#gruend-hero-cta .elementor-widget-wrap,
#gruend-cta .elementor-widget-wrap {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    justify-content: flex-start !important; align-items: center; gap: 16px;
}
#gruend-hero-cta .elementor-widget-button,
#gruend-cta .elementor-widget-button { width: auto !important; margin: 0 !important; }
#gruend-hero-cta .elementor-button,
#gruend-cta .elementor-button { white-space: nowrap; }

/* Gestaltungsberatung – Hero-Portrait + Verlauf (dunkel links → Bild rechts).
   Bild-Datei: …Beton-00299-1365x2048.jpg */
#gest-hero-img,
#gest-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.9) 14%, rgba(61,79,81,0.4) 42%, rgba(61,79,81,0) 66%),
        url('/wp-content/uploads/2026/06/HF_Portrait_Einzel_1131_251126_HF_Portrait_Beton-00299-1365x2048.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #gest-hero-img,
    #gest-hero > .elementor-container > .elementor-column:last-child { min-height: 320px; }
}
#gest-hero-cta > .elementor-container,
#gest-cta > .elementor-container { max-width: none !important; width: 100% !important; }
#gest-hero-cta .elementor-widget-wrap,
#gest-cta .elementor-widget-wrap {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    justify-content: flex-start !important; align-items: center; gap: 16px;
}
#gest-hero-cta .elementor-widget-button,
#gest-cta .elementor-widget-button { width: auto !important; margin: 0 !important; }
#gest-hero-cta .elementor-button,
#gest-cta .elementor-button { white-space: nowrap; }

/* Privat-Übersicht – Hero-Bildspalte: Verlauf weiß → Bild */
#priv-hero-img,
#priv-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/privat.png') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) { #priv-hero-img, #priv-hero > .elementor-container > .elementor-column:last-child { min-height: 300px; } }

/* Horizontal-Accordion-Beschreibung: Theme-Aufzählungspunkte (•) entfernen — nur das grüne + bleibt */
.qodef-m-description ul,
.qodef-m-description ul li { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }
.qodef-m-description ul li { padding-left: 26px !important; }
.qodef-m-description ul li::before,
.qodef-m-description ul li::marker { content: none !important; display: none !important; }

/* Standard-Elementor-Accordion: Inhalt – Theme-Aufzählungspunkte entfernen, Link-Hover */
.elementor-accordion .elementor-tab-content ul,
.elementor-accordion .elementor-tab-content ul li { list-style: none !important; margin-left: 0 !important; }
.elementor-accordion .elementor-tab-content ul li::before,
.elementor-accordion .elementor-tab-content ul li::marker { content: none !important; display: none !important; }
.elementor-accordion .elementor-tab-content a:hover { color: #89BA17 !important; }

/* Leroux Horizontal Accordion: eingeklappte Reiter schmal halten (mehr Platz fürs aktive Feld) */
/* Reiter (Tab) auf feste 70px: Breite UND Versatz müssen zusammenpassen,
   sonst sitzt der Header 258px rechts vom Item und ragt aus dem Holder. */
.qodef-horizontal-accordion-showcase .qodef-m-header {
    width: 140px !important;
    right: -140px !important;
    box-sizing: border-box !important;
}
/* Reiter-Titel zentriert in den 140px-Streifen */
.qodef-horizontal-accordion-showcase .qodef-m-header .qodef-m-title { right: 57px !important; }

/* Unternehmen-Übersicht: alles linksbündig statt zentriert */
body.page-id-11885 .elementor[data-elementor-type="wp-page"] > .elementor-top-section {
    justify-content: flex-start !important;
}
body.page-id-11885 .elementor[data-elementor-type="wp-page"] > .elementor-top-section > .elementor-container {
    max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
body.page-id-11885 .qodef-horizontal-accordion-showcase { margin-left: 0 !important; margin-right: 0 !important; }

/* Accordion-Abschnitt oben verankern + Abstand über der Überschrift
   (sonst zentriert das Panel den hohen Inhalt und schneidet ihn oben ab). */
body.page-id-11885 .elementor-top-section:has(.qodef-horizontal-accordion-showcase) {
    align-items: flex-start !important;
    padding-top: 110px !important;
}
/* Accordion etwas kleiner, damit alles aufs Panel passt; Bild skaliert mit. */
body.page-id-11885 .qodef-horizontal-accordion-showcase {
    height: calc(100vh - 320px) !important;
    min-height: 380px !important;
}
body.page-id-11885 .qodef-horizontal-accordion-showcase .qodef-m-content-right .qodef-m-image img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Horizontal-Accordion: Reiter-Hintergrund auf HFMO-Grün (#89BA17) statt Theme-Grün (#81D742) */
.qodef-horizontal-accordion-showcase .qodef-m-header,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-header {
    background-color: #89BA17 !important;
}

/* Horizontal-Accordion: große Reiter-Nummern komplett entfernen (aktiv & inaktiv),
   damit die Reiter-Texte einheitlich bündig sitzen */
.qodef-horizontal-accordion-showcase .qodef-m-title::before,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-title::before {
    content: none !important;
    display: none !important;
}
.qodef-horizontal-accordion-showcase .qodef-m-title,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-title {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Horizontal-Accordion: Inhalts-Titel + Aufzählungstext in HFMO-Dunkelgrau (#3D4F51).
   Das grüne "+" (Inline-Farbe auf den span) bleibt unberührt. */
.qodef-horizontal-accordion-showcase .qodef-m-content .qodef-m-title,
.qodef-horizontal-accordion-showcase .qodef-m-content .qodef-m-description,
.qodef-horizontal-accordion-showcase .qodef-m-content .qodef-m-description li,
.qodef-horizontal-accordion-showcase .qodef-m-content .qodef-m-description p,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-content .qodef-m-title,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-content .qodef-m-description,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-content .qodef-m-description li,
.elementor-widget-leroux_core_horizontal_accordion_showcase .qodef-m-content .qodef-m-description p {
    color: #3D4F51 !important;
}

/* ════ Generisch: alle HFMO-Button-Gruppen (Inner-Section-IDs auf -hero-cta / -cta) links gruppieren ════ */
[id$="-hero-cta"] > .elementor-container,
[id$="-cta"] > .elementor-container { max-width: none !important; width: 100% !important; }
[id$="-hero-cta"] .elementor-widget-wrap,
[id$="-cta"] .elementor-widget-wrap {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    justify-content: flex-start !important; align-items: center; gap: 16px;
}
[id$="-hero-cta"] .elementor-widget-button,
[id$="-cta"] .elementor-widget-button { width: auto !important; margin: 0 !important; }
[id$="-hero-cta"] .elementor-button,
[id$="-cta"] .elementor-button { white-space: nowrap; }

/* ════ Service-Seiten – Hero-Bildspalten mit Verlauf (dunkel links → Bild rechts) ════ */
#nach-hero-img,
#nach-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/HF_Portrait_Einzel_1438_251126_HF_Portrait_Beton-00555-1365x2048.jpg') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#rewe-hero-img,
#rewe-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/schauen.png') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#lohn-hero-img,
#lohn-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/lohnbuchfuehrung-hero.jpg') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#sterk-hero-img,
#sterk-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/denken.png') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#bpruef-hero-img,
#bpruef-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/pruefung.png') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#contr-hero-img,
#contr-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.9) 14%, rgba(61,79,81,0.4) 42%, rgba(61,79,81,0) 66%), url('/wp-content/uploads/2026/06/controlling-hero.jpg') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#uplan-hero-img,
#uplan-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.92) 14%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0) 66%), url('/wp-content/uploads/2026/06/unternehmensplanung-hero.jpg') !important;
    background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
#stb-hero-img,
#stb-hero > .elementor-container > .elementor-column:last-child {
    background-image: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.9) 8%, rgba(255,255,255,0) 18%), url('/wp-content/uploads/2026/06/stb4-e1781851136309.png') !important;
    background-size: 92% auto !important; background-position: right center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) {
    #nach-hero-img, #nach-hero > .elementor-container > .elementor-column:last-child,
    #rewe-hero-img, #rewe-hero > .elementor-container > .elementor-column:last-child,
    #lohn-hero-img, #lohn-hero > .elementor-container > .elementor-column:last-child,
    #sterk-hero-img, #sterk-hero > .elementor-container > .elementor-column:last-child,
    #bpruef-hero-img, #bpruef-hero > .elementor-container > .elementor-column:last-child,
    #contr-hero-img, #contr-hero > .elementor-container > .elementor-column:last-child,
    #uplan-hero-img, #uplan-hero > .elementor-container > .elementor-column:last-child,
    #stb-hero-img, #stb-hero > .elementor-container > .elementor-column:last-child { min-height: 300px; }
}
.hfmo-contact-info a:hover { text-decoration: underline; }
.hfmo-contact-info .hfmo-hours-title {
    color: #89BA17;
    font-weight: 700;
    margin: 4px 0 8px;
}
.hfmo-contact-info dl.hfmo-hours {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 4px;
}
.hfmo-contact-info dl.hfmo-hours dt {
    font-weight: 700;
    color: #fff;
}
.hfmo-contact-info dl.hfmo-hours dd {
    margin: 0;
    color: rgba(255,255,255,0.85);
}

/* ── Single-Slide Showcase: normales Scroll-Verhalten ──────── */
.qodef-horizontal-showcase.qodef--single-slide,
.qodef-horizontal-showcase.qodef--single-slide .qodef-slides-holder {
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    touch-action: auto !important;
}
.qodef-horizontal-showcase.qodef--single-slide .scrollbar-track,
.qodef-horizontal-showcase.qodef--single-slide .scroll-content {
    height: auto !important;
    position: relative !important;
    transform: none !important;
}

/* ── Kontakt-Seite Mobile ───────────────────────────────────── */

/* Tablet + Handy: min-height runtersetzen, kein Overflow */
@media (max-width: 1024px) {
    body.page-id-11401 .elementor-section {
        min-height: unset !important;
        height: auto !important;
        align-items: flex-start !important;
    }
    body.page-id-11401 .elementor-section > .elementor-container {
        align-items: flex-start !important;
    }
    body.page-id-11401 .elementor-column {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Rechte Spalte: Trennlinie oben statt links */
    body.page-id-11401 .elementor-column:last-child {
        border-left: none !important;
        border-top: 1px solid #89BA17 !important;
        padding-top: 40px !important;
        margin-top: 16px !important;
    }
}

@media (max-width: 767px) {
    body.page-id-11401 .elementor-section {
        padding: 60px 0 40px !important;
    }
    /* Button zentrieren (Widget-ID c2f4a43) */
    .elementor-element-c2f4a43,
    .elementor-element-c2f4a43 .elementor-widget-container,
    .elementor-element-c2f4a43 .elementor-button-wrapper {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* Auf kleinen Screens den Kontaktblock unter das Menü stellen */
@media (max-width: 1024px) {
    .qodef-header--vertical-sliding .qodef-vertical-sliding-area.qodef--dynamic {
        flex-direction: column !important;
        min-width: 0;
        gap: 30px;
    }
    .hfmo-contact-info {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-left: 0;
        padding-top: 30px;
    }
}

/* ── Social-Media-Buttons im Menü-Kontaktblock ── */
.hfmo-contact-info .hfmo-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.hfmo-contact-info .hfmo-social a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.hfmo-contact-info .hfmo-social a:hover {
    background: #89BA17;
    border-color: #89BA17;
    color: #fff;
    transform: translateY(-2px);
}
.hfmo-contact-info .hfmo-social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Elementor-Editor: linkes Menü ausblenden für mehr Arbeitsbreite ── */
body.elementor-editor-active #qodef-page-header {
    display: none !important;
}

/* ── Kommentar-Bereich ("Leave a comment") auf Seiten global ausblenden.
   Erschien im Horizontal-/Mobile-Layout unten. Seiten brauchen keine Kommentare. */
#qodef-page-comments {
    display: none !important;
}

/* ── HFMO Custom Cursor: wird per PHP/wp_head als Inline-Style gesetzt ── */

/* ── Startseite_v2 (11640) – 1. Abschnitt: Verlauf über die ganze Höhe ──
   Bewusst per CSS (nicht in Elementor-Daten), damit es ein Speichern im
   Elementor-Editor übersteht. Verlauf liegt auf der SECTION (füllt das ganze
   Horizontal-Panel), Spalten transparent. Siehe hfmo-horizontal.php/fitPanel. */
body.page-id-11640 .elementor-element.elementor-element-9377cc53:not(.elementor-motion-effects-element-type-background),
body.page-id-11640 .elementor-element.elementor-element-9377cc53 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #C9C9C9 30%, #FFFFFF 65%) !important;
}
body.page-id-11640 .elementor-element.elementor-element-69086596:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
body.page-id-11640 .elementor-element.elementor-element-69086596 > .elementor-element-populated,
body.page-id-11640 .elementor-element.elementor-element-5d057c12 > .elementor-element-populated {
    background-color: transparent !important;
    background-image: none !important;
}

/* ── Startseite_v2 (11640) – 2. Abschnitt (092ba69) mit Bild-Slider ──
   Der qi-Image-Slider (swiper) bekommt im Horizontal-Panel keine begrenzte
   Breite und bläht Container/Spalten auf ~33 Mio px auf → Panel wirkt leer.
   Container/Spalten/Slider hart auf die Panel-Breite (100%) begrenzen. */
@media (min-width: 1025px) {
    body.page-id-11640 .elementor-element.elementor-element-092ba69 > .elementor-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-column,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-widget-wrap,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-widget {
        min-width: 0 !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .swiper,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .swiper-container,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .swiper-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .swiper-slide {
        width: 100% !important;
    }
    /* Slider über die volle Panel-Höhe (kein weißer Rand unten):
       Der qi-Slider setzt eine FESTE Höhe von 872px auf .qodef-qi-swiper-container
       (+ auf die Slide-Bilder). Genau diese Selektoren mit höherer Spezifität
       (body.page-id-11640 …) auf 100vh (= Panel-Höhe) überschreiben. */
    body.hfmo-horizontal:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .elementor-top-section.elementor-element-092ba69 {
        align-items: stretch !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-092ba69 > .elementor-container,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 > .elementor-container > .elementor-column,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-element-5eb3a9f > .elementor-element-populated,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-element-5eb3a9f .elementor-widget-wrap,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .elementor-element-5eb3a9f .elementor-widget-container {
        height: 100% !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-1a3f5b8 .qodef-qi-swiper-container,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .qodef-qi-swiper-container .swiper,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .qodef-qi-swiper-container .swiper-wrapper,
    body.page-id-11640 .elementor-element.elementor-element-092ba69 .qodef-qi-swiper-container .swiper-slide {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    body.page-id-11640 .elementor-element.elementor-element-1a3f5b8 .qodef-qi-swiper-container .swiper-slide img {
        width: 100% !important;
        height: 100vh !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}