/* ============================================================
   MOTAVIO FINAL UI ALIGNMENT
   ============================================================ */


/* ============================================================
   HEADER / MENÜ
   ============================================================ */

.mv-header-inner{
  width:min(1280px,calc(100% - 56px)) !important;
  min-height:92px !important;
  gap:18px !important;
}


.mv-menu-v2-nav{
  gap:5px !important;
  padding:6px !important;
}


.mv-menu-v2-nav > a,
.mv-menu-v2-trigger,
.mv-main-nav .mv-vehiclecheck-direct{
  min-height:42px !important;

  padding:
    0 13px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  border-radius:
    999px !important;

  font-size:
    12.5px !important;

  line-height:
    1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    .025em !important;

  white-space:
    nowrap !important;
}


.mv-menu-v2-actions{
  gap:7px !important;
}


.mv-menu-login-text{
  font-size:
    11.5px !important;

  font-weight:
    950 !important;
}


.mv-menu-trial{
  min-height:
    42px !important;

  padding:
    0 15px !important;

  font-size:
    10.5px !important;

  font-weight:
    950 !important;
}


/* Sprache rechts */

.mv-menu-v2-actions .mv-lang-switch{
  min-height:
    36px !important;

  display:flex !important;

  align-items:center !important;

  gap:2px !important;
}


.mv-menu-v2-actions .mv-lang-switch button{
  min-width:
    34px !important;

  height:
    34px !important;

  padding:
    0 7px !important;

  font-size:
    11px !important;

  font-weight:
    950 !important;
}


.mv-menu-v2-actions .mv-lang-switch span{
  font-size:
    10px !important;
}


/* Theme-Symbole größer */

.mv-menu-v2-actions .mv-theme-switch{
  display:flex !important;

  align-items:center !important;

  gap:3px !important;
}


.mv-menu-v2-actions .mv-theme-switch button{
  width:
    36px !important;

  height:
    36px !important;

  min-width:
    36px !important;

  display:grid !important;

  place-items:center !important;

  padding:
    0 !important;

  font-size:
    15px !important;

  line-height:
    1 !important;
}


/* ============================================================
   HERO – GLEICHE GRUNDGEOMETRIE WIE FRONTPAGE
   ============================================================ */

.vc2-hero{
  width:
    100% !important;

  min-height:
    clamp(
      680px,
      calc(100svh - 92px),
      790px
    ) !important;

  padding:
    62px 28px
    70px !important;

  display:
    flex !important;

  align-items:
    center !important;

  background:
    radial-gradient(
      circle at 21% 36%,
      rgba(0,194,203,.065),
      transparent 31%
    ),
    #03080d !important;
}


.vc2-hero *,
.vc2-hero *::before,
.vc2-hero *::after{
  box-sizing:
    border-box !important;
}


/* DER WICHTIGE FIX:
   garantiert wieder mittig statt links am Bildschirmrand */

.vc2-hero > .vc2-shell.vc2-grid{
  width:
    100% !important;

  max-width:
    1280px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  padding:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1.16fr)
    minmax(0,.84fr)
    !important;

  gap:
    54px !important;

  align-items:
    center !important;
}


/* ============================================================
   HERO COPY
   ============================================================ */

.vc2-copy{
  width:
    100% !important;

  max-width:
    730px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.vc2-kicker{
  width:
    auto !important;

  min-height:
    34px !important;

  padding:
    0 17px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(226,180,73,.30)
    !important;

  border-radius:
    999px !important;

  background:
    rgba(226,180,73,.035)
    !important;

  color:
    #f1c85e !important;

  font-size:
    10.5px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .10em !important;
}


.vc2-copy h1{
  width:
    100% !important;

  max-width:
    730px !important;

  margin:
    22px 0
    18px !important;

  padding:
    0 !important;

  color:
    #f4f7f8 !important;

  font-size:
    clamp(
      56px,
      4vw,
      68px
    ) !important;

  line-height:
    .93 !important;

  letter-spacing:
    -.055em !important;

  font-weight:
    950 !important;

  text-align:
    left !important;
}


.vc2-copy h1 span{
  display:
    inline !important;

  color:
    #e2b449 !important;
}


.vc2-copy > p{
  width:
    100% !important;

  max-width:
    690px !important;

  margin:
    0 !important;

  color:
    rgba(236,242,244,.74)
    !important;

  font-size:
    16px !important;

  line-height:
    1.65 !important;
}


/* ============================================================
   CHECK-MODUL
   ============================================================ */

.vc2-box{
  width:
    100% !important;

  max-width:
    650px !important;

  margin:
    27px 0 0 !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(105,140,190,.25)
    !important;

  border-radius:
    18px !important;

  background:
    #071521 !important;

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.28)
    !important;
}


.vc2-tabs{
  min-height:
    54px !important;

  padding:
    8px 10px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  background:
    #0a2133 !important;
}


.vc2-tabs button{
  appearance:
    none !important;

  min-height:
    37px !important;

  padding:
    0 17px !important;

  border:
    0 !important;

  border-radius:
    9px !important;

  background:
    transparent !important;

  color:
    #a9bbc4 !important;

  font:
    inherit !important;

  font-size:
    12px !important;

  font-weight:
    950 !important;

  cursor:
    pointer !important;
}


.vc2-tabs button.active{
  background:
    #f6f8fa !important;

  color:
    #071a34 !important;
}


.vc2-box form{
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    16px !important;
}


.vc2-field{
  width:
    100% !important;

  min-height:
    58px !important;

  display:
    grid !important;

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

  overflow:
    hidden !important;

  border:
    1px solid
    #cbd6e2 !important;

  border-radius:
    11px !important;

  background:
    #f8fafc !important;
}


.vc2-field[hidden]{
  display:
    none !important;
}


.vc2-field b{
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  background:
    #0d3674 !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    950 !important;
}


.vc2-field input{
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    58px !important;

  padding:
    0 17px !important;

  border:
    0 !important;

  outline:
    0 !important;

  background:
    #f8fafc !important;

  color:
    #263c54 !important;

  font:
    inherit !important;

  font-size:
    16px !important;

  font-weight:
    800 !important;
}


.vc2-submit{
  width:
    100% !important;

  min-height:
    54px !important;

  margin-top:
    13px !important;

  border:
    0 !important;

  border-radius:
    11px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    10px !important;

  background:
    linear-gradient(
      180deg,
      #17498d,
      #0d3470
    ) !important;

  color:
    #fff !important;

  font:
    inherit !important;

  font-size:
    14px !important;

  font-weight:
    950 !important;
}


.vc2-box footer{
  min-height:
    37px !important;

  margin-top:
    7px !important;

  padding-top:
    11px !important;

  border-top:
    1px solid
    rgba(105,140,190,.14)
    !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    11px !important;

  color:
    #899da7 !important;

  font-size:
    9.5px !important;

  font-weight:
    850 !important;
}


/* ============================================================
   RECHTES SYMBOL
   ============================================================ */

.vc2-visual{
  width:
    100% !important;

  display:
    grid !important;

  justify-items:
    center !important;

  align-content:
    center !important;

  justify-self:
    center !important;

  gap:
    13px !important;
}


/* etwas größer als vorher */

.vc2-ring{
  width:
    270px !important;

  height:
    270px !important;

  min-width:
    270px !important;

  max-width:
    270px !important;

  padding:
    11px !important;

  border-radius:
    50% !important;

  background:
    repeating-conic-gradient(
      #e2b449 0 3deg,
      transparent 3deg 8deg
    ) !important;

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.26),
    0 0 44px
    rgba(0,194,203,.055)
    !important;
}


.vc2-inner{
  width:
    100% !important;

  height:
    100% !important;

  padding:
    17px !important;

  border-radius:
    50% !important;

  background:
    #04111a !important;
}


.vc2-shield{
  position:
    relative !important;

  width:
    100% !important;

  height:
    100% !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    3px solid
    rgba(226,180,73,.82)
    !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle at 50% 40%,
      #0e4d6d,
      #06263b 56%,
      #041520
    ) !important;
}


.vc2-shield::before{
  content:
    "" !important;

  position:
    absolute !important;

  width:
    43% !important;

  height:
    51% !important;

  border:
    3px solid #fff !important;

  border-radius:
    19px 19px 42% 42%
    !important;

  background:
    #fff !important;
}


.vc2-shield > span{
  position:
    relative !important;

  z-index:
    2 !important;

  width:
    72px !important;

  height:
    46px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    16px !important;

  background:
    #0d3674 !important;

  color:
    #fff !important;

  font-size:
    24px !important;

  font-weight:
    950 !important;
}


.vc2-shield > b{
  position:
    absolute !important;

  z-index:
    3 !important;

  right:
    17% !important;

  bottom:
    17% !important;

  width:
    48px !important;

  height:
    48px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    4px solid #fff !important;

  border-radius:
    50% !important;

  background:
    #099b70 !important;

  color:
    #fff !important;

  font-size:
    22px !important;
}


.vc2-visual > small{
  color:
    #8196a0 !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .14em !important;
}


/* ============================================================
   1366–1500px DESKTOP
   ============================================================ */

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

  .mv-menu-v2-nav > a,
  .mv-menu-v2-trigger,
  .mv-main-nav .mv-vehiclecheck-direct{
    padding:
      0 10px !important;

    font-size:
      11.5px !important;
  }


  .vc2-hero > .vc2-shell.vc2-grid{
    grid-template-columns:
      minmax(0,1.12fr)
      minmax(0,.88fr)
      !important;

    gap:
      40px !important;
  }


  .vc2-copy h1{
    font-size:
      clamp(
        52px,
        4vw,
        64px
      ) !important;
  }


  .vc2-ring{
    width:
      245px !important;

    height:
      245px !important;

    min-width:
      245px !important;

    max-width:
      245px !important;
  }

}


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

@media(max-width:900px){

  .vc2-hero{
    min-height:
      auto !important;

    padding:
      50px 14px
      60px !important;
  }


  .vc2-hero > .vc2-shell.vc2-grid{
    width:
      100% !important;

    grid-template-columns:
      1fr !important;

    gap:
      30px !important;
  }


  .vc2-copy,
  .vc2-copy h1,
  .vc2-copy > p,
  .vc2-box{
    max-width:
      100% !important;
  }


  .vc2-copy h1{
    font-size:
      44px !important;
  }


  .vc2-visual{
    display:
      none !important;
  }

}



/* MOTAVIO_HEADER_STICKY_V2_START */


/* ============================================================
   HEADER MEHR BREITE
   ============================================================ */

.mv-header-inner{
  width:min(1380px,calc(100% - 48px)) !important;
  gap:16px !important;
}


/* Hauptnavigation etwas kompakter,
   damit rechts mehr eigener Raum entsteht */

.mv-menu-v2-nav{
  gap:4px !important;
}


.mv-menu-v2-nav > a,
.mv-menu-v2-trigger,
.mv-main-nav .mv-vehiclecheck-direct{
  padding:0 12px !important;
}


/* ============================================================
   RECHTE HEADER-GRUPPE
   ============================================================ */

.mv-menu-v2-actions{
  margin-left:auto !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-end !important;

  gap:7px !important;

  flex-shrink:0 !important;
}


/* ANMELDEN bekommt bewusst Abstand vom Hauptmenü */

.mv-menu-login-text{
  margin-left:18px !important;

  padding:0 4px !important;

  white-space:nowrap !important;
}


/* Trial-Button etwas mehr "alleine" */

.mv-menu-trial{
  margin-left:7px !important;

  margin-right:17px !important;

  min-height:44px !important;

  padding:0 18px !important;

  box-shadow:
    0 12px 28px rgba(226,180,73,.16)
    !important;
}


/* ============================================================
   DE / EN NOCH WEITER RECHTS
   ============================================================ */

.mv-menu-v2-actions .mv-lang-switch{
  margin-left:6px !important;

  min-height:38px !important;

  padding:2px !important;
}


.mv-menu-v2-actions .mv-lang-switch button{
  min-width:35px !important;

  height:35px !important;
}


/* ============================================================
   HELL / DUNKEL GANZ RECHTS
   ============================================================ */

.mv-menu-v2-actions .mv-theme-switch{
  margin-left:5px !important;

  padding-left:7px !important;

  border-left:
    1px solid rgba(105,140,190,.17)
    !important;
}


.mv-menu-v2-actions .mv-theme-switch button{
  width:37px !important;

  height:37px !important;

  min-width:37px !important;

  font-size:16px !important;
}


/* ============================================================
   HERO STICKY
   ============================================================ */

@media(min-width:901px){

  .vc2-hero{
    position:sticky !important;

    top:92px !important;

    z-index:1 !important;

    min-height:
      calc(100svh - 92px)
      !important;
  }


  /*
   * Nachfolgende Inhalte liegen beim Scrollen
   * sauber über dem Sticky-Hero.
   */

  .vc2-hero ~ section,
  .vc2-hero ~ .vcx-section,
  .vc2-hero ~ .vcx-categories,
  .vc2-hero ~ .vcx-price,
  .vc2-hero ~ .vcx-final{
    position:relative !important;

    z-index:2 !important;
  }

}


/* ============================================================
   MITTLERE DESKTOPS
   ============================================================ */

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

  .mv-header-inner{
    width:calc(100% - 34px) !important;
  }


  .mv-menu-v2-nav > a,
  .mv-menu-v2-trigger,
  .mv-main-nav .mv-vehiclecheck-direct{
    padding:0 9px !important;

    font-size:11px !important;
  }


  .mv-menu-login-text{
    margin-left:10px !important;

    font-size:11px !important;
  }


  .mv-menu-trial{
    margin-left:4px !important;

    margin-right:10px !important;

    padding:0 14px !important;

    font-size:10px !important;
  }


  .mv-menu-v2-actions .mv-lang-switch{
    margin-left:3px !important;
  }

}


/* ============================================================
   MOBILE: KEIN STICKY HERO
   ============================================================ */

@media(max-width:900px){

  .vc2-hero{
    position:relative !important;

    top:auto !important;
  }


  .mv-menu-v2-actions{
    margin-left:auto !important;
  }

}


/* MOTAVIO_HEADER_STICKY_V2_END */