/* ============================================================
   MOTAVIO FAHRZEUGCHECK HERO – CENTER FINAL

   Ändert ausschließlich Positionierung und Abstände.
   Farben, Texte, Logos und Builder-Inhalte bleiben unverändert.
   ============================================================ */


/* ============================================================
   HERO SCROLLT NORMAL MIT
   ============================================================ */

html body.mv-public .vc2-hero {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  z-index: auto !important;

  width: 100% !important;

  min-height:
    calc(
      100svh
      - var(
          --mv-header-height,
          86px
        )
    ) !important;

  margin: 0 !important;

  padding:
    58px 0
    66px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* ============================================================
   GLEICHER ZENTRALER SEITENCONTAINER WIE FRONTPAGE
   ============================================================ */

html body.mv-public
.vc2-hero
>
.vc2-shell.vc2-grid {
  width:
    min(
      1220px,
      calc(
        100%
        - 48px
      )
    ) !important;

  max-width: 1220px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(
      0,
      1.08fr
    )
    minmax(
      340px,
      0.92fr
    ) !important;

  column-gap:
    62px !important;

  row-gap:
    40px !important;

  align-items:
    center !important;

  justify-items:
    center !important;
}


/* ============================================================
   KOMPLETTE LINKE HERO-SPALTE ZENTRIEREN
   ============================================================ */

html body.mv-public
.vc2-hero
.vc2-copy {
  width:
    100% !important;

  max-width:
    660px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  text-align:
    center !important;
}


/* Kicker exakt über der Überschrift */

html body.mv-public
.vc2-hero
.vc2-copy
>
.vc2-kicker {
  width:
    max-content !important;

  max-width:
    100% !important;

  margin:
    0 auto
    22px !important;

  align-self:
    center !important;

  text-align:
    center !important;
}


/* Gesamte H1 – inklusive farbiger Unterelemente */

html body.mv-public
.vc2-hero
.vc2-copy
>
h1 {
  width:
    100% !important;

  max-width:
    660px !important;

  margin:
    0 auto
    18px !important;

  padding:
    0 !important;

  text-align:
    center !important;

  text-wrap:
    balance !important;
}


html body.mv-public
.vc2-hero
.vc2-copy
>
h1
span,

html body.mv-public
.vc2-hero
.vc2-copy
>
h1
em,

html body.mv-public
.vc2-hero
.vc2-copy
>
h1
strong {
  margin-left:
    auto !important;

  margin-right:
    auto !important;

  text-align:
    center !important;
}


/* Beschreibung mittig mit sauberer Lesebreite */

html body.mv-public
.vc2-hero
.vc2-copy
>
p {
  width:
    100% !important;

  max-width:
    625px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


/* ============================================================
   CHECK-MODUL EXAKT UNTER DEM TEXT
   ============================================================ */

html body.mv-public
.vc2-hero
.vc2-copy
>
.vc2-box {
  width:
    100% !important;

  max-width:
    610px !important;

  margin:
    28px auto
    0 !important;

  align-self:
    center !important;

  text-align:
    left !important;
}


/* UI-Elemente im Formular bleiben funktional linksbündig */

html body.mv-public
.vc2-hero
.vc2-box
input,

html body.mv-public
.vc2-hero
.vc2-box
textarea,

html body.mv-public
.vc2-hero
.vc2-box
select {
  text-align:
    left !important;
}


/* Hauptbutton bleibt mittig */

html body.mv-public
.vc2-hero
.vc2-submit {
  text-align:
    center !important;
}


/* Sicherheitszeile mittig */

html body.mv-public
.vc2-hero
.vc2-box
footer {
  justify-content:
    center !important;

  text-align:
    center !important;
}


/* ============================================================
   RECHTE VISUELLE SPALTE
   ============================================================ */

html body.mv-public
.vc2-hero
.vc2-visual {
  width:
    100% !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    grid !important;

  justify-items:
    center !important;

  align-items:
    center !important;

  align-content:
    center !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  text-align:
    center !important;

  transform:
    none !important;
}


html body.mv-public
.vc2-hero
.vc2-ring {
  margin:
    0 auto !important;
}


html body.mv-public
.vc2-hero
.vc2-visual
>
small {
  margin-left:
    auto !important;

  margin-right:
    auto !important;

  text-align:
    center !important;
}


/* ============================================================
   BUILDER-VORSCHAU / MITTLERE DESKTOPS
   ============================================================ */

@media
(min-width: 901px)
and (max-width: 1220px) {

  html body.mv-public
  .vc2-hero {
    min-height:
      calc(
        100svh
        - 78px
      ) !important;

    padding:
      46px 0
      54px !important;
  }


  html body.mv-public
  .vc2-hero
  >
  .vc2-shell.vc2-grid {
    width:
      calc(
        100%
        - 34px
      ) !important;

    grid-template-columns:
      minmax(
        0,
        1.08fr
      )
      minmax(
        265px,
        0.72fr
      ) !important;

    column-gap:
      34px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy {
    max-width:
      600px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  h1 {
    max-width:
      600px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  p {
    max-width:
      560px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  .vc2-box {
    max-width:
      565px !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width: 900px) {

  html body.mv-public
  .vc2-hero {
    min-height:
      auto !important;

    padding:
      48px 0
      58px !important;
  }


  html body.mv-public
  .vc2-hero
  >
  .vc2-shell.vc2-grid {
    width:
      calc(
        100%
        - 28px
      ) !important;

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

    row-gap:
      36px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy,

  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  h1,

  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  p,

  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  .vc2-box {
    max-width:
      100% !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  .vc2-kicker {
    margin-bottom:
      18px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  .vc2-box {
    margin-top:
      24px !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-visual {
    margin-top:
      4px !important;
  }

}


/* ============================================================
   KLEINES MOBILGERÄT
   ============================================================ */

@media(max-width: 560px) {

  html body.mv-public
  .vc2-hero {
    padding:
      38px 0
      48px !important;
  }


  html body.mv-public
  .vc2-hero
  >
  .vc2-shell.vc2-grid {
    width:
      calc(
        100%
        - 22px
      ) !important;
  }


  html body.mv-public
  .vc2-hero
  .vc2-copy
  >
  p {
    max-width:
      34rem !important;
  }

}