/* ==========================================================
   TREPPENLIFT – HERO / SECTION 1
   ========================================================== */

/* Hero-Hintergrund über die komplette Browserbreite */
#hiro-treppenlift-neu.hiro-tl-hero {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background: #f7f3f1;
    padding-top: 55px;
    padding-bottom: 48px;
}

/* Inhalt bleibt auf 1240px begrenzt */
#hiro-treppenlift-neu.hiro-tl-hero > .vc_row {
    width: calc(100% - 40px);
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
}

#hiro-treppenlift-neu.hiro-tl-hero {
    background: #f7f3f1;
    padding: 55px 20px 48px;
}

/* Gesamtbreite */
#hiro-treppenlift-neu.hiro-tl-hero > .vc_row {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto !important;
    display: flex;
    align-items: center;
}

/* WPBakery Standard-Paddings beibehalten/kontrollieren */
#hiro-treppenlift-neu.hiro-tl-hero > .vc_row > .vc_column_container > .vc_column-inner {
    padding-left: 15px;
    padding-right: 15px;
}

/* Linke Spalte */
#hiro-treppenlift-neu .hiro-tl-hero-copy {
    padding-right: 28px;
}

/* Eyebrow */
#hiro-treppenlift-neu .hiro-tl-eyebrow {
    display: block;
    margin: 0 0 17px;
    color: #ff6f61;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* H1 */
#hiro-treppenlift-neu .hiro-tl-hero-copy h1 {
    max-width: 610px;
    margin: 0 0 22px;
    color: #002241;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.2px;
}

/* Der hervorgehobene Teil */
#hiro-treppenlift-neu .hiro-tl-hero-copy h1 em {
    color: #ff6f61;
    font-style: normal;
    font-weight: 700;
}

/* Einleitung */
#hiro-treppenlift-neu .hiro-tl-lead {
    max-width: 610px;
    margin: 0 0 25px !important;
    color: #454545;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
}

/* Buttons */
#hiro-treppenlift-neu .hiro-tl-actions {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin: 0 0 25px;
}

#hiro-treppenlift-neu .hiro-tl-actions .btn,
#hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 25px;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}

/* Hauptbutton */
#hiro-treppenlift-neu .hiro-tl-actions .btn {
    border: 2px solid #ff6f61;
    background: #ff6f61;
    color: #fff;
}

#hiro-treppenlift-neu .hiro-tl-actions .btn:hover {
    border-color: #e85c4f;
    background: #e85c4f;
}

/* Telefonbutton */
#hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline {
    border: 2px solid #002241;
    background: transparent;
    color: #002241 !important;
}

#hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline:hover {
    background: #002241;
    color: #fff !important;
}


/* ==========================================================
   HERO – TRUST
   ========================================================== */

#hiro-treppenlift-neu .hiro-tl-trust {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 12px 28px;

    width: 100%;
    max-width: 610px;

    margin: 0;
    padding: 22px 0 0;

    border-top: 1px solid #d9dee1;
}

#hiro-treppenlift-neu .hiro-tl-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    color: #fff;
}

#hiro-treppenlift-neu .hiro-tl-trust-item > span {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: 0;
    padding: 0;

    background: #002241;
    color: #fff;

    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

#hiro-treppenlift-neu .hiro-tl-trust-item > strong {
    margin: 0;
    padding: 0;

    color: #002241;

    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;

    white-space: nowrap;
}

@media (max-width: 767px) {

    #hiro-treppenlift-neu .hiro-tl-trust {
        grid-template-columns: 1fr;
    }

    #hiro-treppenlift-neu .hiro-tl-trust-item > strong {
        white-space: normal;
    }
}

/* ----------------------------------------------------------
   FAKTENKARTE RECHTS
   ---------------------------------------------------------- */

#hiro-treppenlift-neu .hiro-tl-facts {
    width: calc(100% - 20px);
    max-width: 550px;
    margin: 15px 0 15px auto;
    padding: 30px 30px 25px;
    border: 0;
    border-top: 4px solid #ff6f61;
    background: #fff;
    box-shadow: 0 22px 40px rgba(0, 34, 65, 0.13);
}

#hiro-treppenlift-neu .hiro-tl-facts h2 {
    margin: 0 0 20px;
    color: #002241;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

#hiro-treppenlift-neu .hiro-tl-facts dl {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    margin: 0;
    padding: 0;
}

#hiro-treppenlift-neu .hiro-tl-facts dt,
#hiro-treppenlift-neu .hiro-tl-facts dd {
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid #d9dee1;
    line-height: 1.35;
}

#hiro-treppenlift-neu .hiro-tl-facts dt {
    padding-right: 15px;
    color: #81868a;
    font-size: 15px;
    font-weight: 700;
}

#hiro-treppenlift-neu .hiro-tl-facts dd {
    color: #002241;
    font-size: 15px;
    font-weight: 500;
}

#hiro-treppenlift-neu .hiro-tl-facts dt:last-of-type,
#hiro-treppenlift-neu .hiro-tl-facts dd:last-of-type {
    border-bottom: 0;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 991px) {

    #hiro-treppenlift-neu.hiro-tl-hero > .vc_row {
        display: block;
    }

    #hiro-treppenlift-neu.hiro-tl-hero > .vc_row > .vc_column_container {
        width: 100%;
    }

    #hiro-treppenlift-neu .hiro-tl-hero-copy {
        padding-right: 0;
    }

    #hiro-treppenlift-neu .hiro-tl-facts {
        width: 100%;
        max-width: none;
        margin: 40px 0 0;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    #hiro-treppenlift-neu.hiro-tl-hero {
        padding: 38px 5px 42px;
    }

    #hiro-treppenlift-neu .hiro-tl-hero-copy h1 {
        font-size: 34px;
        letter-spacing: -.6px;
    }

    #hiro-treppenlift-neu .hiro-tl-actions {
        display: block;
    }

    #hiro-treppenlift-neu .hiro-tl-actions .btn,
    #hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline {
        width: 100%;
        margin-bottom: 10px;
    }

    #hiro-treppenlift-neu .hiro-tl-trust {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #hiro-treppenlift-neu .hiro-tl-facts {
        padding: 24px 20px 20px;
    }

    #hiro-treppenlift-neu .hiro-tl-facts dl {
        grid-template-columns: 1fr;
    }

    #hiro-treppenlift-neu .hiro-tl-facts dt {
        padding-bottom: 2px;
        border-bottom: 0;
    }

    #hiro-treppenlift-neu .hiro-tl-facts dd {
        padding-top: 0;
    }
}
/* ==========================================================
   HERO – KORREKTUREN V2
   ========================================================== */


/* ----------------------------------------------------------
   1. ABSTAND/BALKEN ZWISCHEN HEADER UND HERO ENTFERNEN
   ---------------------------------------------------------- */

/*
 * Hero direkt unter den Header ziehen.
 * Der Abstand wird vom umgebenden Theme-Content erzeugt.
 */
body:has(#hiro-treppenlift-neu) main,
body:has(#hiro-treppenlift-neu) #main,
body:has(#hiro-treppenlift-neu) .main-content,
body:has(#hiro-treppenlift-neu) .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/*
 * Falls der Abstand über den ersten Content-Wrapper kommt.
 */
body:has(#hiro-treppenlift-neu) #content,
body:has(#hiro-treppenlift-neu) .content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ----------------------------------------------------------
   2. HERO DIREKT AN HEADER
   ---------------------------------------------------------- */

#hiro-treppenlift-neu.hiro-tl-hero {
    margin-top: 0 !important;
}


/* ----------------------------------------------------------
   3. TELEFONBUTTON WIE IM SCREENDESIGN
   ---------------------------------------------------------- */

#hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 52px;
    min-height: 52px;

    padding: 0 25px;

    border: 2px solid #002241 !important;
    border-radius: 0 !important;

    background: #fff !important;

    color: #002241 !important;

    font-size: 15px;
    line-height: 1;
    font-weight: 700;

    text-decoration: none !important;
    box-shadow: none !important;
}

#hiro-treppenlift-neu .hiro-tl-actions .hiro-tl-btn-outline:hover {
    background: #002241 !important;
    color: #fff !important;
}


/* ----------------------------------------------------------
   4. TRUST-BEREICH KOMPLETT NEU
   ---------------------------------------------------------- */

#hiro-treppenlift-neu .hiro-tl-trust {
    display: grid !important;

    grid-template-columns:
        minmax(190px, max-content)
        minmax(260px, max-content);

    column-gap: 40px;
    row-gap: 12px;

    width: 100%;
    max-width: 610px;

    margin: 0 !important;
    padding: 20px 0 0 !important;

    border-top: 1px solid #d9dee1;
}


/*
 * Die ursprünglichen Texte wieder normal anzeigen.
 */
#hiro-treppenlift-neu .hiro-tl-trust span {
    display: flex !important;
    align-items: center;

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

    color: #fff !important;

    font-size: 14px !important;
    line-height: 30px;
    font-weight: 700;

    white-space: nowrap;
}


/*
 * Das im HTML vorhandene ✓ soll das blaue Kästchen bilden.
 *
 * Da das Häkchen aktuell Bestandteil des Textes ist,
 * verwenden wir hier NICHT mehr die vorherigen
 * ::after-Textersetzungen.
 */
#hiro-treppenlift-neu .hiro-tl-trust span::before,
#hiro-treppenlift-neu .hiro-tl-trust span::after {
    content: none !important;
}


/* ----------------------------------------------------------
   TRUST: HÄKCHEN ALS BLAUES QUADRAT
   ---------------------------------------------------------- */

/*
 * Für eine exakt dem Screendesign entsprechende Darstellung
 * brauchen wir das Häkchen als eigenes Element.
 *
 * Bis wir den HTML-Code gleich minimal ändern, wird der
 * vorhandene Text vollständig sichtbar und korrekt im
 * 2-Spalten-Raster dargestellt.
 */


/* ----------------------------------------------------------
   5. REIHENFOLGE DES GRIDS
   ---------------------------------------------------------- */

#hiro-treppenlift-neu .hiro-tl-trust span:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

#hiro-treppenlift-neu .hiro-tl-trust span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

#hiro-treppenlift-neu .hiro-tl-trust span:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

#hiro-treppenlift-neu .hiro-tl-trust span:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

#hiro-treppenlift-neu .hiro-tl-trust span:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    #hiro-treppenlift-neu .hiro-tl-trust {
        grid-template-columns: 1fr;
    }

    #hiro-treppenlift-neu .hiro-tl-trust span:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
    }

    #hiro-treppenlift-neu .hiro-tl-trust span {
        white-space: normal;
    }
}
body:has(#hiro-treppenlift-neu) #simpleheader {
    min-height: 0 !important;
    height: 65px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}