/* =========================================================
   HEADER HOME & LIVING – MOBILE/TABLET UNTER 1080 PX

   GILT AUSSCHLIESSLICH FÜR:
   #funnel-home-living

   Desktop ab 1080 px bleibt unverändert.

   Reihenfolge:
   1. Hauptüberschrift
   2. Beschreibung
   3. Slider
   4. "Jetzt kostenloses Angebot erhalten"
   5. "Beantworten Sie 5 kurze Fragen"
   6. Funnel
   ========================================================= */

@media (max-width: 1079px) {

    /* =====================================================
       GRUNDLAYOUT
       ===================================================== */

    #funnel-home-living .hiro-w1024 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /*
     * NUR innerhalb des Home-&-Living-Headers
     * die beiden WPBakery-Spalten auflösen.
     */
    #funnel-home-living .hiro-w1024 > .wpb_column,
    #funnel-home-living .hiro-w1024 > .wpb_column > .vc_column-inner,
    #funnel-home-living .hiro-w1024 > .wpb_column > .vc_column-inner > .wpb_wrapper {
        display: contents !important;
    }


    /* Desktop-Leerabstände nur im Funnel-Header entfernen */
    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .vc_empty_space {
        display: none !important;
    }


    /* =====================================================
       1. HAUPTÜBERSCHRIFT
       ===================================================== */

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .wpb_text_column:has(.hiro-hero-title) {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    #funnel-home-living .hiro-w1024 .hiro-hero-title,
    #funnel-home-living .hiro-w1024 .hiro-hero-title * {
        text-align: left !important;
    }


    /* =====================================================
       2. BESCHREIBUNG
       ===================================================== */

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .header-text:not(.p2):not(:has(h3)) {
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .header-text:not(.p2):not(:has(h3)) p {
        text-align: left !important;
    }


    /* =====================================================
       3. SLIDER
       ===================================================== */

    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right {
        order: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 48vw !important;
        max-height: 440px !important;
        min-height: 260px !important;

        overflow: hidden !important;

        margin: 25px 0 30px !important;

        position: relative !important;
        left: 0 !important;
        right: auto !important;
    }


    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .wpb_wrapper,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_images_carousel,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_carousel-inner,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_carousel-slideline,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_carousel-slideline-inner,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_item,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_inner {
        height: 100% !important;
        min-height: 0 !important;
    }


    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_images_carousel,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_carousel-inner,
    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right .vc_inner {
        width: 100% !important;
        max-width: 100% !important;
    }


    #funnel-home-living .hiro-w1024 .hiro-loop-slider.slider-right img {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;

        object-fit: cover !important;
        object-position: center 70% !important;
    }


    /* =====================================================
       4. JETZT KOSTENLOSES ANGEBOT ERHALTEN
       ===================================================== */

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .header-text:has(h3) {
        order: 4 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .header-text:has(h3) h3 {
        text-align: left !important;
    }


    /* =====================================================
       5. BEANTWORTEN SIE 5 KURZE FRAGEN
       ===================================================== */

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .header-text.p2 {
        order: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    #funnel-home-living .hiro-w1024 .header-text.p2 p {
        text-align: left !important;
    }


    /* =====================================================
       6. FUNNEL
       ===================================================== */

    #funnel-home-living
    .hiro-w1024
    > .vc_col-sm-5
    > .vc_column-inner
    > .wpb_wrapper
    > .hiro-lp-funnel {
        order: 6 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    #funnel-home-living .hiro-w1024 .hiro-lp-funnel > .wpb_wrapper,
    #funnel-home-living .hiro-w1024 .hiro-lp-funnel .formholder,
    #funnel-home-living .hiro-w1024 .hiro-lp-funnel .treppenlift {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    #funnel-home-living .hiro-lp-funnel .formholder {
        margin: 0 auto !important;
    }

}

/* =========================================================
   MATERIAL / DESIGN KACHELN RESPONSIVE

   ab 1080px:     bestehendes Layout unverändert
   796–1079px:    3 Elemente pro Reihe
   400–795px:     2 Elemente pro Reihe
   unter 400px:   1 Element pro Reihe
   ========================================================= */
/* =========================================================
   MATERIAL-KACHELN RESPONSIVE
   ========================================================= */

/* Gemeinsame Basis unter 1080px */
@media (max-width: 1079px) {

    .vc_row.hiro-w1024:has(> .vc_col-sm-2) {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        align-items: start !important;
    }


    /* Jede Material-Kachel ist exakt EIN Grid-Element */
    .vc_row.hiro-w1024:has(> .vc_col-sm-2)
    > .wpb_column.vc_column_container.vc_col-sm-2 {

        display: block !important;

        float: none !important;
        clear: none !important;

        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* Header-Regel display:contents sicher zurücksetzen */
    .vc_row.hiro-w1024:has(> .vc_col-sm-2)
    > .wpb_column.vc_col-sm-2
    > .vc_column-inner {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .vc_row.hiro-w1024:has(> .vc_col-sm-2)
    > .wpb_column.vc_col-sm-2
    > .vc_column-inner
    > .wpb_wrapper {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* WPBakery Clearfix innerhalb dieser Zeile neutralisieren */
    .vc_row.hiro-w1024:has(> .vc_col-sm-2)::before,
    .vc_row.hiro-w1024:has(> .vc_col-sm-2)::after {

        display: none !important;
        content: none !important;
    }


    /* Überschriften zentriert */
    .vc_row.hiro-w1024:has(> .vc_col-sm-2) h5 {
        text-align: center !important;
    }


    /* Bilder mittig */
    .vc_row.hiro-w1024:has(> .vc_col-sm-2) .wpb_single_image,
    .vc_row.hiro-w1024:has(> .vc_col-sm-2) .vc_figure {
        text-align: left !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   796px – 1079px
   3 PRO REIHE
   ========================================================= */

@media (min-width: 796px) and (max-width: 1079px) {

    .vc_row.hiro-w1024:has(> .vc_col-sm-2) {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   400px – 795px
   2 PRO REIHE
   ========================================================= */

@media (min-width: 400px) and (max-width: 795px) {

    .vc_row.hiro-w1024:has(> .vc_col-sm-2) {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   UNTER 400px
   1 PRO REIHE
   ========================================================= */

@media (max-width: 399px) {

    .vc_row.hiro-w1024:has(> .vc_col-sm-2) {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}

/* =========================================================
   ROSA BERATER – TABLET 768–991 PX
   Bild innerhalb der rechten Spalte rechts ausrichten
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .rosa_berater_spalte .rosa_berater {
        text-align: right !important;
    }

    .rosa_berater_spalte .rosa_berater .vc_figure {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .rosa_berater_spalte .rosa_berater .vc_single_image-wrapper {
        display: block !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .rosa_berater_spalte .rosa_berater img {
        display: block !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}

/* =========================================================
   MOOD-SLIDER RESPONSIVE
   ========================================================= */

/* 500px bis 768px: 2 Bilder */
@media (min-width: 500px) and (max-width: 768px) {

    .mood-slider .vc_carousel-slideline-inner > .vc_item {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

}

/* unter 500px: 1 Bild */
@media (max-width: 499px) {

    .mood-slider .vc_carousel-slideline-inner > .vc_item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

}

/* =========================================================
   HIRO SPEZIALISTEN – RESPONSIVE

   500–768px:
   3 Bilder oben
   2 Bilder darunter mittig

   unter 500px:
   alle Bilder untereinander
   ========================================================= */


/* 500px bis 768px */
@media (min-width: 500px) and (max-width: 768px) {

    .hiro-spezialisten {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hiro-spezialisten > .wpb_column {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Erste Reihe: 3 gleich große Elemente */
    .hiro-spezialisten > .wpb_column:nth-child(1) {
        grid-column: 1 / span 2;
    }

    .hiro-spezialisten > .wpb_column:nth-child(2) {
        grid-column: 3 / span 2;
    }

    .hiro-spezialisten > .wpb_column:nth-child(3) {
        grid-column: 5 / span 2;
    }

    /* Zweite Reihe: 2 Elemente mittig */
    .hiro-spezialisten > .wpb_column:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .hiro-spezialisten > .wpb_column:nth-child(5) {
        grid-column: 4 / span 2;
    }

}


/* Unter 500px: alles untereinander */
@media (max-width: 499px) {

    .hiro-spezialisten {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hiro-spezialisten > .wpb_column {
        grid-column: 1 !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/* =========================================================
   BERATUNG & SERVICE
   ========================================================= */


/* ---------------------------------------------------------
   AB 500px
   Überschrift links / Herz ganz rechts
   --------------------------------------------------------- */

@media (min-width: 500px) {

    .vc_row.hiro-w1024.beratung-service {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            100px !important;

        column-gap: 30px !important;
        align-items: start !important;

        width: 100% !important;
        max-width: 1320px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =====================================================
       TEXTSPALTE
       ===================================================== */

    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child {

        display: block !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        float: none !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child
    > .vc_column-inner {

        display: block !important;

        width: 100% !important;
        max-width: none !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child
    > .vc_column-inner
    > .wpb_wrapper {

        display: block !important;

        width: 100% !important;
        max-width: none !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .hiro-hero-title {

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* =====================================================
       HERZSPALTE
       ===================================================== */

    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child {

        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        float: none !important;

        width: 100px !important;
        max-width: 100px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-self: end !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child
    > .vc_column-inner {

        display: block !important;

        width: 100px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child
    > .vc_column-inner
    > .wpb_wrapper {

        display: block !important;

        width: 100px !important;

        margin: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child
    .wpb_single_image {

        width: 100px !important;

        margin: 0 !important;

        text-align: right !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child
    .vc_figure,

    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child
    .vc_single_image-wrapper {

        display: block !important;

        width: 100px !important;

        margin: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child img {

        display: block !important;

        width: 100px !important;
        height: 100px !important;

        margin-left: auto !important;
        margin-right: 0 !important;
    }

}
/* ---------------------------------------------------------
   UNTER 767px
   Herz oben zentriert
   Text darunter zentriert
   --------------------------------------------------------- */

@media (max-width: 767px) {

   #funnel-home-living  form {
    margin-left: -50px !important;
   }
   #funnel-home-living .question[data-question-value="kontakt"] form {
    margin-left: 0px !important;
   }
    /* Kachelgröße */
    #funnel-home-living .hiro-lp-funnel
    .question a.answerBtn {
        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;

        height: 135px !important;
        min-height: 135px !important;

        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    /* Bootstrap-Spalten – Abstand funktioniert darüber */
    #funnel-home-living .hiro-lp-funnel
    .question
    .row.justify-content-center:has(a.answerBtn) > [class*="col-"] {
        flex: 0 0 125px !important;
        width: 125px !important;
        max-width: 125px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Gewünschter Abstand */
    #funnel-home-living .hiro-lp-funnel
    .question
    .row.justify-content-center:has(a.answerBtn) > [class*="col-"]:not(:last-child) {
        margin-right: 18px !important;
    }
    #funnel-home-living .hiro-lp-funnel
    .question a.answerBtn {
        margin-left: 9px !important;
        margin-right: 9px !important;
    }
    #funnel-home-living .hiro-lp-funnel .question .row.justify-content-center .row.justify-content-center:has(a.answerBtn) {
        gap: 40px !important;
    }
}

/* ---------------------------------------------------------
   UNTER 500px
   Herz oben zentriert
   Text darunter zentriert
   --------------------------------------------------------- */

@media (max-width: 499px) {

    #funnel-home-living .hiro-lp-funnel
    .question a.answerBtn {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;

        height: 120px !important;
        min-height: 120px !important;

        padding: 12px 8px !important;
        box-sizing: border-box !important;
        margin-left: -17px !important;
    }
    #funnel-home-living .hiro-lp-funnel .question .row.justify-content-center .row.justify-content-center:has(a.answerBtn) {
        gap: 20px !important;
    }
    .vc_row.hiro-w1024.beratung-service {

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Herz zuerst */
    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child {

        display: block !important;

        order: 1 !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 25px 0 !important;
        padding: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child
    > .vc_column-inner,

    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child
    > .vc_column-inner
    > .wpb_wrapper {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child
    .wpb_single_image {

        width: 100% !important;

        margin: 0 !important;

        text-align: left !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child
    .vc_figure {

        display: inline-block !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .wpb_column:last-child img {

        display: block !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Text darunter */
    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child {

        display: block !important;

        order: 2 !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child
    > .vc_column-inner,

    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:first-child
    > .vc_column-inner
    > .wpb_wrapper {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    .vc_row.hiro-w1024.beratung-service
    .hiro-hero-title {

        width: 100% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }
    /* Beschreibung unter der Überschrift */
        .vc_row.hiro-w1024.beratung-service
        > .wpb_column:first-child
        .wpb_text_column,

        .vc_row.hiro-w1024.beratung-service
        > .wpb_column:first-child
        .wpb_text_column > .wpb_wrapper,

        .vc_row.hiro-w1024.beratung-service
        > .wpb_column:first-child
        p {
            width: 100% !important;
            max-width: none !important;

            margin-left: auto !important;
            margin-right: auto !important;

            text-align: left !important;
        }
    .vc_row.hiro-w1024:has(> .vc_col-sm-2) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    p {
        text-align: left !important;
    }
}
/* Ab 1080px: Herz 20px nach links */
@media (min-width: 1080px) {

    .vc_row.hiro-w1024.beratung-service
    > .wpb_column:last-child {
        transform: translateX(-20px) !important;
    }

}