/*
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-start !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) {
    /* Verlauf NICHT strippen (dunkler BG) – wie Controlling/Prozessberatung.
       Ralfs Gesicht sitzt rechts im Bild → right center zeigt mehr Gesicht
       (Bild rückt optisch nach links). Einheitliche Größe auto 80%. */
    body.page-id-11775 .elementor-element.elementor-element-b276553 {
        background-size: auto 80% !important;
        background-position: right center !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: 60vh !important;
    }
    /* Spalte auf die Texthöhe strecken (wie proz), damit auto 80% dieselbe Höhe ergibt
       (Container ist sonst align-items:center → Close-up bleibt kurz/mittig). */
    body.page-id-11775 .elementor[data-elementor-type="wp-page"] > .elementor-top-section:first-child > .elementor-container {
        align-items: stretch !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;
    }
}

/* Nachfolge (11743) – Abschnitt „Übergabe mit Plan" (5f238fa4): auf Tablet/Handy
   den weißen „Leistungen"-Kasten (Col2) UNTER Text + Button (Col1) stapeln
   (Reihenfolge: Text, Button, dann Kasten). */
@media (max-width: 1024px) {
    body.page-id-11743 .elementor-element-5f238fa4 > .elementor-container { flex-direction: column !important; }
    body.page-id-11743 .elementor-element-5f238fa4 > .elementor-container > .elementor-column { width: 100% !important; }
    /* Überschrift kleiner (war 80px = Desktop-Größe, wirkt auf Tablet zu groß) – nur die 2 Headlines in Col1 */
    body.page-id-11743 .elementor-element-5f238fa4 > .elementor-container > .elementor-column:first-child .elementor-heading-title { font-size: 48px !important; line-height: 1.06 !important; }
    /* Abstand Text/Button → Kasten verkleinern. Höhere Spezifität schlägt die
       generische 80px-Bottom-Regel für Nicht-erste-Abschnitte. */
    body.page-id-11743.hfmo-horizontal:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .elementor-top-section.elementor-element-5f238fa4 > .elementor-container > .elementor-column:first-child > .elementor-element-populated { padding-bottom: 14px !important; }
    body.page-id-11743 .elementor-element-5f238fa4 > .elementor-container > .elementor-column:last-child > .elementor-element-populated { padding-top: 6px !important; }
}
@media (max-width: 767px) {
    body.page-id-11743 .elementor-element-5f238fa4 > .elementor-container > .elementor-column:first-child .elementor-heading-title { font-size: 36px !important; }
}

/* Gestaltungsberatung (11825) – Close-up-Spalte (gest-hero-img) breiter:
   Text 75→60 %, Bild 25→40 %. Nur Tablet+Desktop (Handy stapelt ohnehin). */
@media (min-width: 768px) {
    body.page-id-11825 #gest-hero > .elementor-container > .elementor-column:first-child { width: 60% !important; }
    body.page-id-11825 #gest-hero-img { width: 40% !important; }
}

/* Verfahrensdokumentation (11760) – Abschnitt „Ihr Weg zur…" (5814fe7b): auf Handy
   gestapelt war der Abstand Text → Schritte-Liste ~160px (80px unten + 80px oben).
   Deutlich verkleinern. Nur Handy (auf Tablet nebeneinander, kein Gap). */
@media (max-width: 767px) {
    body.page-id-11760.hfmo-horizontal:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .elementor-top-section.elementor-element-5814fe7b > .elementor-container > .elementor-column:first-child > .elementor-element-populated { padding-bottom: 16px !important; }
    body.page-id-11760 .elementor-element-cd0d4b52 > .elementor-element-populated { padding-top: 8px !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;
    }
    /* Desktop: passgenau aufs Karten-Format zugeschnittene Fotos (ganzes Gebäude sichtbar).
       cover füllt die Zelle randlos, weil das Seitenverhältnis jetzt passt → kein Anschnitt,
       keine Ränder, kein Spalt zum Kasten. Mobile bleibt bei _hoch2 (Inline). */
    body.page-id-11623 .elementor-element-zell-card-01 div[style*="Zell_hoch2"] {
        background-image: url('/wp-content/uploads/2026/07/Zell_card.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
    }
    body.page-id-11623 .elementor-element-offenburg-card-01 div[style*="Offenburg_hoch2"] {
        background-image: url('/wp-content/uploads/2026/07/Offenburg_card.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
    }
    /* Foto-Zelle FEST 422×400 (statt mitwachsend) – so passt der Karten-Crop auf
       jeder Fensterbreite exakt (kein Anschnitt). Die Info-Spalte füllt den Rest. */
    body.page-id-11623 .elementor-element-zell-card-01 div:has(> div[style*="Zell_hoch2"]),
    body.page-id-11623 .elementor-element-offenburg-card-01 div:has(> div[style*="Offenburg_hoch2"]) {
        flex: 0 0 422px !important;
        width: 422px !important;
        max-width: 422px !important;
    }
}
/* Standorte (11623) – Karten. Der Karten-Div hängt DIREKT unter .elementor-widget-html
   (kein .elementor-widget-container). Struktur je Karte:
   > div (Karte, flex) > [div(Foto-Zelle) > div(Bild)+div(Verlauf)] + div(grün 4px) + div(Info 220px) */
/* Weißer Verlauf GENERELL weg (alle Größen) */
body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(1) > div:nth-child(2) {
    display: none !important;
}
@media (max-width: 1024px) {
    /* Section stapeln – Karten UNTER die Überschrift */
    body.page-id-11623 .elementor-element-8f49e603 > .elementor-container { flex-direction: column !important; }
    body.page-id-11623 .elementor-element-8f49e603 > .elementor-container > .elementor-column { width: 100% !important; }
    /* Karten-Spalte: align-items:center + linkes Inline-Padding raus → Karten volle Breite & weiter links */
    body.page-id-11623 .elementor-element.elementor-element-bc6ca97d > .elementor-element-populated {
        align-items: stretch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Karten-Widget + Karte zwingend volle Breite */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html {
        width: 100% !important; max-width: 100% !important; align-self: stretch !important;
    }
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
        padding-left: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    /* Abstand ZWISCHEN den beiden Karten (Zell ↔ Offenburg) kompakt halten */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html { margin-bottom: 22px !important; }
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html:last-child { margin-bottom: 0 !important; }
}
/* NUR Handy (≤767): Karte intern stapeln – Foto OBEN, Anschrift UNTEN, kein weißer Rest */
@media (max-width: 767px) {
    /* Karte: sauberer Stapel – KEINE Fix-Höhe (war 400px), kein weißer Hintergrund, kein Padding */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(1),
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(2),
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(3) {
        flex: 0 0 auto !important;         /* kein Wachsen/Schrumpfen → kein Leerraum */
        width: 100% !important; min-width: 0 !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Foto-Zelle: feste Höhe + obere Ecken rund */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(1) {
        height: 400px !important; min-height: 400px !important; max-height: 400px !important;
        border-radius: 10px 10px 0 0 !important; overflow: hidden !important;
    }
    /* grüner Trenner: horizontal, 4px */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(2) {
        height: 4px !important;
    }
    /* Info-Box: untere Ecken rund */
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(3) {
        border-radius: 0 0 10px 10px !important;
    }
}
/* Tablet (768–1024): Foto linke Ecken rund, Info rechte Ecken rund */
@media (min-width: 768px) and (max-width: 1024px) {
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(1) {
        border-radius: 10px 0 0 10px !important; overflow: hidden !important;
    }
    body.page-id-11623 .elementor-element-bc6ca97d .elementor-widget-html > div > div:nth-child(3) {
        border-radius: 0 10px 10px 0 !important;
    }
}
/* Standorte (11623) – ALLE Büro-Bilder auf Handy sauber stapeln – generisch (ohne feste
   IDs), damit es auch für zusätzlich eingefügte Bilder gilt:
   • Inner-Sections MIT Bildern: Spalten volle Breite, kein Seiten-Padding/-Margin → kein Rechts-Versatz
   • einheitlicher 20px-Abstand unter jedem Bild-Widget */
@media (max-width: 767px) {
    body.page-id-11623 .elementor-inner-section:has(.elementor-widget-image) > .elementor-container > .elementor-column {
        width: 100% !important; margin: 0 !important;
    }
    body.page-id-11623 .elementor-inner-section:has(.elementor-widget-image) > .elementor-container > .elementor-column > .elementor-element-populated {
        padding-left: 0 !important; padding-right: 0 !important;
    }
    body.page-id-11623 .elementor-widget-image { margin-bottom: 20px !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: Close-up Neugruendung.png (freigestellt, Person rechts),
   Verlauf weiß→transparent nach rechts (Übergang zur Headline-Spalte). */
#gruend-hero-img,
#gruend-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/07/Neugruendung.png') !important;
    background-size: cover !important;
    background-position: center right !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: 45vh;
        background-image: url('/wp-content/uploads/2026/07/Neugruendung.png') !important;
        background-position: top center !important;
    }
}

/* 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: gestaltungsberatung.png (freigestellt, Person rechts) */
#gest-hero-img,
#gest-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.8) 8%, rgba(61,79,81,0.3) 26%, rgba(61,79,81,0) 48%),
        url('/wp-content/uploads/2026/07/gestaltungsberatung.png') !important;
    background-size: cover !important;
    background-position: center right !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;
}
/* Lohnbuchführung (11837) – Close-up Lohn.png (freigestellt, Person rechts) */
#lohn-hero-img,
#lohn-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/07/Lohn.png') !important;
    background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) {
    /* Verlauf NICHT strippen: Lohn.png hat weißen Hintergrund – ohne den Verlauf
       steht das Bild als harter weißer Kasten in der weißen Section.
       Position/Größe kommen vom Desktop bzw. der gemeinsamen Tablet-Regel,
       damit der Ausschnitt auf allen Geräten gleich aussieht. */
    #lohn-hero-img,
    #lohn-hero > .elementor-container > .elementor-column:last-child {
        min-height: 45vh !important;
    }
}
#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;
}
/* Controlling (11840) – Close-up controlling.png (freigestellt, Person rechts), dunkle Section */
#contr-hero-img,
#contr-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.88) 12%, rgba(61,79,81,0.35) 38%, rgba(61,79,81,0) 60%),
        url('/wp-content/uploads/2026/07/controlling.png') !important;
    background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) {
    /* Verlauf NICHT strippen (sonst harte weiße Kante auf dunklem BG) – wie Prozessberatung.
       Größe/Position übernimmt die gemeinsame Tablet-Regel (auto 80%, right center). */
    #contr-hero-img,
    #contr-hero > .elementor-container > .elementor-column:last-child {
        min-height: 45vh;
    }
}
/* Unternehmensplanung (11841) – Close-up Planung.png (freigestellt, Person rechts), helle Section */
#uplan-hero-img,
#uplan-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/07/Planung.png') !important;
    background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) {
    #uplan-hero-img,
    #uplan-hero > .elementor-container > .elementor-column:last-child {
        min-height: 45vh;
        background-image: url('/wp-content/uploads/2026/07/Planung.png') !important;
        background-position: top center !important;
    }
}
/* Nachhaltigkeitsberatung (11834) – Close-up nachhaltigkeit.png (freigestellt, Person rechts),
   helle Section. Eigene IDs (nachh-hero/-img), um Kollision mit Nachfolge (#nach-hero) zu vermeiden. */
#nachh-hero-img,
#nachh-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/07/nachhaltigkeit.png') !important;
    background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; min-height: 100vh;
}
@media (max-width: 1024px) {
    #nachh-hero-img,
    #nachh-hero > .elementor-container > .elementor-column:last-child {
        min-height: 45vh;
        background-image: url('/wp-content/uploads/2026/07/nachhaltigkeit.png') !important;
        background-position: top center !important;
    }
}
/* Startseite_v2 – 2. Abschnitt (#stb-hero): Bild entfernt, Verlauf grau→weiß
   GENAU wie Abschnitt 1 (#C9C9C9 30% → #FFFFFF 65%) auf dem Abschnitt, Spalten transparent. */
#stb-hero:not(.elementor-motion-effects-element-type-background),
#stb-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #C9C9C9 30%, #FFFFFF 65%) !important;
    min-height: 100vh;
}
#stb-hero > .elementor-container > .elementor-column {
    background: transparent !important;
    background-image: none !important;
}
/* Startseite_v2 – 2. Abschnitt: HTML/CSS-Slider (col 4e77239) füllt die volle
   Panel-Höhe (kein Rand unten), Bilder groß. Tablet/Mobile eigene Höhen. */
#stb-hero > .elementor-container { min-height: 100vh; align-items: stretch !important; }
/* Slider füllt die Spalte über die VOLLE Höhe (kein Zentrieren/Deckeln → keine
   wechselnde Position). Bild klebt rechts unten (object-position: right bottom). */
#stb-hero .elementor-element-4e77239 > .elementor-element-populated,
#stb-hero .elementor-element-4e77239 > .elementor-column-wrap,
#stb-hero .elementor-element-4e77239 .elementor-widget-wrap,
#stb-hero .elementor-element-4e77239 .elementor-widget-html,
#stb-hero .elementor-element-4e77239 .elementor-widget-html > .elementor-widget-container,
#stb-hero .elementor-element-4e77239 .hfs {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}
@media (max-width: 1024px) {
    #stb-hero > .elementor-container { min-height: 0; }
    #stb-hero .elementor-element-4e77239 .hfs { height: 60vh !important; min-height: 0 !important; }
}
@media (max-width: 767px) {
    #stb-hero .elementor-element-4e77239 .hfs { height: 48vh !important; min-height: 0 !important; }
}
/* Steuer_Privat (11597) – Abschnitt 1: Close-up privat.png rechts,
   Verlauf weiß→transparent (Übergang zur Headline-Spalte). */
#stpv-hero-img {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/06/privat.png') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #stpv-hero-img {
        min-height: 45vh;
        background-image: url('/wp-content/uploads/2026/06/privat.png') !important;
        background-position: top center !important;
    }
}
/* Tablet: Close-up füllt die Spaltenhöhe, rechts oben (Person rechts im Bild,
   leerer linker Rand wird weggeschnitten). Höhere Spezifität schlägt Zeile ~923. */
@media (min-width: 768px) and (max-width: 1024px) {
    body.page-id-11597 #stpv-hero-img {
        background-size: auto 80% !important;
        background-position: right center !important;
    }
}
/* steuer-privat Hero-Textspalte (ca72d8a5): Desktop mehr Rand links, Handy mehr rechts.
   (Section ist full-bleed/padding:0, daher hier an der Spalte.) */
@media (min-width: 1025px) {
    body.page-id-11597 .elementor-element-ca72d8a5 > .elementor-element-populated { padding-left: 11vw !important; }
}
@media (max-width: 767px) {
    body.page-id-11597 .elementor-element-ca72d8a5 > .elementor-element-populated { padding-right: 22px !important; }
}
/* Erben_Privat (11609) – Abschnitt 1: Close-up Erben_Privat rechts,
   Verlauf weiß→transparent (heller Hero, wie steuer-privat). */
#erben-hero-img {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 58%),
        url('/wp-content/uploads/2026/06/Erben_Privat_hoch.png') !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    #erben-hero-img {
        min-height: 45vh;
        background-image: url('/wp-content/uploads/2026/06/Erben_Privat_hoch.png') !important;
        background-position: top center !important;
    }
}
/* Fördermittelberatung (11835) – Abschnitt 1: Close-up foerdermittel.png rechts.
   Section-bg ist DUNKEL (#3D4F51) → dunkler Verlauf links → Bild rechts. */
#foer-hero-img,
#foer-hero > .elementor-container > .elementor-column:last-child {
    background-image:
        linear-gradient(90deg, #3D4F51 0%, rgba(61,79,81,0.88) 12%, rgba(61,79,81,0.35) 38%, rgba(61,79,81,0) 60%),
        url('/wp-content/uploads/2026/07/foerdermittel.png') !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
@media (max-width: 1024px) {
    /* Verlauf NICHT strippen (harte Kante auf dunklem BG) – wie Prozessberatung.
       Größe/Position übernimmt die gemeinsame Tablet-Regel (auto 80%, right center). */
    #foer-hero-img,
    #foer-hero > .elementor-container > .elementor-column:last-child {
        min-height: 45vh;
    }
}
/* Startseite_v2 – Abschnitt 1 & 2: linken Text-Rand verkleinern (80→36px)
   und die Bilder etwas nach links ziehen (Personen nicht rechts abschneiden). */
.elementor-element-69086596 > .elementor-element-populated,
.elementor-element-69086596 > .elementor-widget-wrap,
.elementor-element-a74c279 > .elementor-element-populated,
.elementor-element-a74c279 > .elementor-widget-wrap {
    padding-left: 36px !important;
}
/* Abschnitt 1 Einzelbild (freigestellt) nach links schieben */
.elementor-element-46eca0a { transform: translateX(-9%); }
/* Abschnitt 2 Slider: Person sitzt im rechten Bildteil (links leer).
   cover + rechts unten → Person füllt die Spalte, klebt rechts (kein Rand rechts),
   leerer linker Bildbereich wird weggeschnitten. */
#stb-hero .elementor-element-4e77239 .hfs-slide {
    object-fit: cover !important;
    object-position: right bottom !important;
}
/* Tablet (768–1024px): Motiv weiter nach links rücken.
   Bei object-fit:cover gilt: HÖHERER Wert = Bild rutscht nach links (Motiv wandert
   nach links, es wird mehr vom rechten Bildbereich gezeigt). 100%/right = ganz links. */
@media (min-width: 768px) and (max-width: 1024px) {
    #stb-hero .elementor-element-4e77239 .hfs-slide { object-position: right bottom !important; }
    /* Slideshow-Block vertikal mittig in der (hohen) Spalte zentrieren */
    #stb-hero .elementor-element-4e77239 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 100% !important;
    }
    #stb-hero .elementor-element-4e77239 .elementor-widget-html,
    #stb-hero .elementor-element-4e77239 .elementor-widget-html > .elementor-widget-container {
        height: auto !important;
        flex: 0 0 auto !important;
    }
}
@media (max-width: 767px) {
    .elementor-element-69086596 > .elementor-element-populated,
    .elementor-element-69086596 > .elementor-widget-wrap,
    .elementor-element-a74c279 > .elementor-element-populated,
    .elementor-element-a74c279 > .elementor-widget-wrap { padding-left: 24px !important; }
    /* „DIGITAL +“-GIF (e-image v4) sitzt als img.e-image-base in Spalte 5d057c12.
       Mehr Weißraum oben/unten auf dem Handy: */
	.elementor-element-5d057c12 img.e-image-base {
		margin-top: 48px !important; margin-bottom: 48px !important;
		margin-left: -30px !important;
		width: calc(100% + 30px) !important;
		max-width: calc(100% + 30px) !important;
		background: #ffffff !important;
		padding: 34px 0 !important;
		box-sizing: content-box !important;
	}
}
@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 { min-height: 300px; }
}
/* Tablet (768–1024px): Close-up-Hero-Bilder über die VOLLE Höhe (statt fester Bandhöhe).
   Spalten strecken sich auf die Höhe der Textspalte; 60vh als Mindest-Absicherung. */
@media (min-width: 768px) and (max-width: 1024px) {
    #cfo-hero > .elementor-container, #nach-hero > .elementor-container, #nachh-hero > .elementor-container,
    #contr-hero > .elementor-container, #uplan-hero > .elementor-container, #foer-hero > .elementor-container,
    #gest-hero > .elementor-container, #gruend-hero > .elementor-container, #lohn-hero > .elementor-container,
    #priv-hero > .elementor-container, #proz-hero > .elementor-container, #rewe-hero > .elementor-container,
    #sterk-hero > .elementor-container, #bpruef-hero > .elementor-container, #erben-hero > .elementor-container {
        align-items: stretch !important;
    }
    #cfo-hero-img, #nach-hero-img, #nachh-hero-img, #contr-hero-img, #uplan-hero-img, #foer-hero-img,
    #gest-hero-img, #gruend-hero-img, #lohn-hero-img, #priv-hero-img, #proz-hero-img, #rewe-hero-img,
    #sterk-hero-img, #bpruef-hero-img, #stpv-hero-img, #erben-hero-img,
    #erben-hero > .elementor-container > .elementor-column:last-child,
    #cfo-hero > .elementor-container > .elementor-column:last-child,
    #nach-hero > .elementor-container > .elementor-column:last-child,
    #nachh-hero > .elementor-container > .elementor-column:last-child,
    #contr-hero > .elementor-container > .elementor-column:last-child,
    #uplan-hero > .elementor-container > .elementor-column:last-child,
    #foer-hero > .elementor-container > .elementor-column:last-child,
    #gest-hero > .elementor-container > .elementor-column:last-child,
    #gruend-hero > .elementor-container > .elementor-column:last-child,
    #lohn-hero > .elementor-container > .elementor-column:last-child,
    #priv-hero > .elementor-container > .elementor-column:last-child,
    #proz-hero > .elementor-container > .elementor-column:last-child,
    #rewe-hero > .elementor-container > .elementor-column:last-child,
    #sterk-hero > .elementor-container > .elementor-column:last-child,
    #bpruef-hero > .elementor-container > .elementor-column:last-child {
        min-height: 60vh !important;
        height: auto !important;
        align-self: stretch !important;
        background-size: auto 80% !important;            /* einheitliche Close-up-Größe auf Tablet (alle Seiten gleich) */
        background-position: right center !important;    /* Person rechts zeigen (right center = gültig; center right wird ignoriert) */
    }
}
/* ── Kein Umbruch MITTEN im Wort (alle Überschriften, alle Größen) ──
   Zu breite Überschriften werden per JS (fitHeadings) dynamisch verkleinert. */
.elementor-heading-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}
/* TopJob Abschnitt 2 (c57cfdc1): auf Tablet/Handy stapeln – linke Spalte oben, Liste darunter */
@media (max-width: 1024px) {
    .elementor-element-c57cfdc1 > .elementor-container { flex-direction: column !important; }
    .elementor-element-c57cfdc1 > .elementor-container > .elementor-column { width: 100% !important; }
    /* Kleinerer Abstand zwischen den gestapelten Spalten (überschreibt das 80px-Bottom der 40/10/80/10-Regel) */
    body.hfmo-horizontal:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .elementor-top-section.elementor-element-c57cfdc1:not(:first-child) > .elementor-container > .elementor-column:first-child > .elementor-element-populated {
        padding-bottom: 18px !important;
    }
}
/* TopJob (11682) – Close-up-Spalte (1. Abschnitt, letzte Spalte, Elementor-Hintergrundbild):
   fällt auf Tablet/Handy sonst zum dünnen Streifen zusammen (kein Inhalt/Höhe).
   Mindesthöhe + Cover + rechts → zeigt das Bild wie die anderen Close-ups.
   Per Position (nicht ID) getroffen, damit es auch auf Lima greift. */
@media (max-width: 1024px) {
    body.page-id-11682 .elementor[data-elementor-type="wp-page"] > .elementor-top-section:first-child > .elementor-container > .elementor-column:last-child {
        min-height: 45vh !important;
        background-size: cover !important;
        background-position: center right !important;
    }
}
/* Tablet: Hero-Headline (1. Abschnitt) kleiner, damit lange Wörter in die 50%-Spalte passen. */
@media (min-width: 768px) and (max-width: 1024px) {
    body.hfmo-horizontal:not(.elementor-editor-active) .elementor[data-elementor-type="wp-page"] > .elementor-top-section:first-child h1.elementor-heading-title {
        font-size: 44px !important;
        line-height: 1.05 !important;
    }
}
.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;
    }
}

/* ==========================================================================
   CFO für Unternehmen (11775)
   ========================================================================== */
/* Button-Paare nebeneinander statt untereinander (Abschnitt 1 + Abschnitt 3).
   .elementor-widget-wrap ist flex-wrap:wrap – Buttons auf width:auto stellen,
   dann teilen sie sich eine Zeile; 100%-breite Nachbarn (Spacer) brechen um. */
body.page-id-11775 .elementor-element-036b5b1,
body.page-id-11775 .elementor-element-0dfc726,
body.page-id-11775 .elementor-element-ab8c2a3f,
body.page-id-11775 .elementor-element-ddf2c7a0 {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}
body.page-id-11775 .elementor-element-036b5b1,
body.page-id-11775 .elementor-element-ab8c2a3f {
    margin-right: 16px !important;
}
/* Abschnitt 2: grüne + statt Aufzählungspunkten (Liste 8ce87edc) */
body.page-id-11775 .elementor-element-8ce87edc ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
body.page-id-11775 .elementor-element-8ce87edc ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    list-style: none !important;
}
body.page-id-11775 .elementor-element-8ce87edc ul li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: -0.05em;
    color: #89BA17;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1;
}
/* Mobile: Buttons wieder untereinander (Platz) */
@media (max-width: 767px) {
    body.page-id-11775 .elementor-element-036b5b1,
    body.page-id-11775 .elementor-element-0dfc726,
    body.page-id-11775 .elementor-element-ab8c2a3f,
    body.page-id-11775 .elementor-element-ddf2c7a0 {
        width: 100% !important;
        margin-right: 0 !important;
    }
}


/* SEO – In-Text-Links im Fließtext (text-editor) klar erkennbar: HFMO-Grün + Unterstreichung */
.elementor-widget-text-editor a {
    color: #89BA17 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .2s ease;
}
.elementor-widget-text-editor a:hover {
    color: #6f9612 !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE-/TABLET-MENÜ: dunkelgrau wie Desktop-Menü, weißes Logo,
   Standorte + Öffnungszeiten (per JS aus dem Desktop-Widget geklont).
   ════════════════════════════════════════════════════════════ */
/* Leiste + aufgeklapptes Menü dunkelgrau (#3D4F51 wie Desktop) */
#qodef-page-mobile-header,
#qodef-page-mobile-header-inner,
.qodef-mobile-header-navigation {
    background-color: #3D4F51 !important;
}
/* Menütext hell */
.qodef-mobile-header-navigation > ul li > a,
.qodef-mobile-header-navigation > ul li > a .qodef-menu-item-text {
    color: #ffffff;
}
/* Engerer Zeilenabstand zwischen den Menüeinträgen */
.qodef-mobile-header-navigation > ul > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.3 !important;
}
/* Untermenü-Pfeile hell */
.qodef-mobile-header-navigation .qodef-menu-item-arrow { color: #ffffff; fill: #ffffff; }
/* Hamburger-/Schließen-Linien hell (auf dunkler Leiste sichtbar) */
#qodef-page-mobile-header .qodef-mobile-header-opener .qodef-m-line {
    background-color: #ffffff !important;
}
/* Logo: weißes Querformat-Logo statt des kaum sichtbaren Hochformat-Splitters (war 23px hoch) */
#qodef-page-mobile-header .qodef-mobile-header-logo-link {
    height: 52px !important;
    width: 92px !important;
    background: url('/wp-content/uploads/lp/hfmo-logo-white.png') left center / contain no-repeat;
}
#qodef-page-mobile-header .qodef-mobile-header-logo-link img { display: none !important; }
/* Leiste etwas höher, damit das größere Logo Platz hat */
#qodef-page-mobile-header-inner { min-height: 70px; }

/* Standorte + Öffnungszeiten im Mobile-Menü (Klon von .hfmo-contact-info) */
.qodef-mobile-header-navigation .hfmo-mobile-contact {
    margin: 10px 0 0;
    padding: 22px 22px 14px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.qodef-mobile-header-navigation .hfmo-contact-info {
    padding-left: 0 !important;
    border-left: 0 !important;
    font-size: 14px;
}
.qodef-mobile-header-navigation .hfmo-hours-title {
    color: #89BA17; font-weight: 700; margin-top: 14px;
}
.qodef-mobile-header-navigation .hfmo-hours { margin: 6px 0 0; }
.qodef-mobile-header-navigation .hfmo-hours dt { font-weight: 700; color: #fff; margin-top: 6px; }
.qodef-mobile-header-navigation .hfmo-hours dd { margin: 0; color: rgba(255,255,255,0.85); }