:root {
  --blue: #168FE6;
  --blue2: #0D78CE;
  --navy: #071A2C;
  --gold: #E2B449;
  --white: #F5F7FA;
}


html[data-mv-theme="light"] {
  --page: #F7FBFE;
  --surface: #FFFFFF;
  --surface2: #EEF5FA;
  --head: #071A2C;
  --text: #526779;
  --line: #D7E4ED;
  --accent: #168FE6;
  --accent2: #0D78CE;
  --contrast: #FFFFFF;

  color-scheme: light;
}


html:not([data-mv-theme="light"]),
html[data-mv-theme="dark"] {
  --page: #030A11;
  --surface: #081722;
  --surface2: #0B1D2A;
  --head: #F5F7FA;
  --text: #AFC0CB;
  --line: #193247;
  --accent: #E2B449;
  --accent2: #D8A934;
  --contrast: #071019;

  color-scheme: dark;
}


/* ============================================================
   PUBLIC / BUILDER: GLEICHE TYPOGRAFIE
   ============================================================ */

body.mv-public .mv-menu-v2-trigger,
body.mv-public .mv-menu-v2-nav > a,
body.mv-public .mv-main-nav .mv-vehiclecheck-direct {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-weight: 800 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
}


body.mv-public .mv-page-hero h1,
body.mv-public .vc2-copy > h1,
body.mv-public
section[data-mv-builder-section="vehicle_check-1"]
h1 {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 60px !important;
  line-height: 0.98 !important;
  font-weight: 800 !important;
  letter-spacing: -0.052em !important;

  text-rendering: geometricPrecision;
}


body.mv-public .mv-page-hero .mv-lead,
body.mv-public .vc2-copy > p {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 16px !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
}


@media(max-width: 900px) {

  body.mv-public .mv-page-hero h1,
  body.mv-public .vc2-copy > h1,
  body.mv-public
  section[data-mv-builder-section="vehicle_check-1"]
  h1 {
    font-size:
      clamp(
        40px,
        11vw,
        54px
      ) !important;
  }

}


/* ============================================================
   LOGIN
   ============================================================ */

body.mv-auth-page {
  margin: 0 !important;

  min-height: 100vh;

  color: var(--head) !important;
  background: var(--page) !important;
}


body.mv-auth-page > .mv-header,
body.mv-auth-page > .mv-footer {
  display: none !important;
}


body.mv-auth-page main {
  min-height: 100vh;

  background: transparent !important;
}


.mv-auth-screen {
  min-height: 100vh;

  padding:
    30px 22px
    40px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: var(--head);

  background:
    linear-gradient(
      rgba(22, 143, 230, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(22, 143, 230, 0.035) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 13% 82%,
      rgba(22, 143, 230, 0.17),
      transparent 34%
    ),
    radial-gradient(
      circle at 87% 10%,
      rgba(88, 76, 255, 0.14),
      transparent 31%
    ),
    var(--page);

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto;
}


html[data-mv-theme="light"]
.mv-auth-screen {
  background:
    linear-gradient(
      rgba(7, 26, 44, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 26, 44, 0.028) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 13% 82%,
      rgba(22, 143, 230, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at 86% 12%,
      rgba(22, 143, 230, 0.09),
      transparent 32%
    ),
    #F7FBFE;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto;
}


.mv-auth-top {
  width:
    min(
      1120px,
      100%
    );

  margin:
    0 auto
    14px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}


.mv-auth-top > a {
  color: var(--text);

  font:
    750 13px/1
    Inter,
    sans-serif;

  text-decoration: none;
}


.mv-auth-top > a:hover {
  color: var(--accent);
}


.mv-auth-top > button {
  width: 76px;
  height: 38px;

  padding: 3px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  border:
    1px solid
    var(--line);

  border-radius: 12px;

  color: var(--text);
  background: var(--surface);

  cursor: pointer;

  box-shadow:
    0 10px 30px
    rgba(7, 26, 44, 0.08);
}


.mv-auth-top > button span {
  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 9px;
}


html[data-mv-theme="light"]
.mv-auth-top > button
span:first-child,

html:not([data-mv-theme="light"])
.mv-auth-top > button
span:last-child {
  color: var(--contrast);
  background: var(--accent);
}


.mv-auth-card {
  width:
    min(
      1120px,
      100%
    );

  min-height: 620px;

  display: grid;

  grid-template-columns:
    56% 44%;

  overflow: hidden;

  border:
    1px solid
    var(--line);

  border-radius: 28px;

  background: var(--surface);

  box-shadow:
    0 32px 100px
    rgba(0, 0, 0, 0.24);
}


html[data-mv-theme="light"]
.mv-auth-card {
  box-shadow:
    0 28px 90px
    rgba(7, 26, 44, 0.13);
}


.mv-auth-side {
  padding:
    68px 58px
    50px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-right:
    1px solid
    var(--line);

  background:
    radial-gradient(
      circle at 15% 85%,
      rgba(22, 143, 230, 0.16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(22, 143, 230, 0.08),
      transparent 50%
    ),
    color-mix(
      in srgb,
      var(--surface2) 74%,
      var(--page)
    );
}


html[data-mv-theme="light"]
.mv-auth-side {
  background:
    radial-gradient(
      circle at 15% 85%,
      rgba(22, 143, 230, 0.15),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #F7FBFE,
      #EEF6FB
    );
}


.mv-auth-brand {
  width: 190px;

  min-height: 42px;

  margin-bottom: 42px;

  display: flex;

  align-items: center;

  text-decoration: none;
}


.mv-auth-brand img {
  max-width: 190px;
  max-height: 44px;

  object-fit: contain;
  object-position: left center;

  display: none;
}


.mv-auth-brand img.ready {
  display: block;
}


.mv-auth-brand
img.ready
+
[data-auth-fallback] {
  display: none;
}


.mv-auth-brand strong {
  color: var(--head);

  font:
    900 24px/1
    Inter,
    sans-serif;

  letter-spacing: 0.08em;
}


.mv-auth-kicker {
  margin:
    0 0
    18px;

  color: var(--accent) !important;

  font:
    900 11px/1
    Inter,
    sans-serif;

  letter-spacing: 0.14em;
}


.mv-auth-side h1 {
  margin: 0;

  max-width: 520px;

  color: var(--head) !important;

  font:
    800
    clamp(
      50px,
      4.3vw,
      70px
    ) / 0.98
    Inter,
    sans-serif;

  letter-spacing: -0.055em;
}


.mv-auth-side h1 em {
  color: var(--accent) !important;

  font-style: normal;
}


.mv-auth-copy {
  max-width: 520px;

  margin:
    24px 0
    0;

  color: var(--text) !important;

  font:
    400 16px/1.65
    Inter,
    sans-serif;
}


.mv-auth-side ul {
  list-style: none;

  margin:
    30px 0
    0;

  padding: 0;

  display: grid;

  gap: 13px;

  color: var(--head);
}


.mv-auth-side li {
  display: flex;

  align-items: center;

  gap: 11px;

  font:
    500 14px/1.4
    Inter,
    sans-serif;
}


.mv-auth-side li i {
  width: 25px;
  height: 25px;

  display: grid;

  place-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 48%,
      transparent
    );

  border-radius: 50%;

  color: var(--accent);

  background:
    color-mix(
      in srgb,
      var(--accent) 10%,
      transparent
    );

  font-style: normal;
  font-weight: 900;
}


.mv-auth-side > small {
  margin-top: auto;

  padding-top: 30px;

  color: var(--text) !important;

  font:
    400 12px/1.55
    Inter,
    sans-serif;
}


.mv-auth-formbox {
  padding:
    68px 46px
    50px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--surface);
}


.mv-auth-formbox > div {
  width:
    min(
      100%,
      430px
    );
}


.mv-auth-formbox h2 {
  margin: 0;

  color: var(--head) !important;

  font:
    800 39px/1.06
    Inter,
    sans-serif;

  letter-spacing: -0.042em;
}


.mv-auth-intro {
  margin:
    13px 0
    29px;

  color: var(--text) !important;

  font:
    400 14px/1.6
    Inter,
    sans-serif;
}


.mv-auth-errors {
  margin:
    0 0
    18px;

  padding:
    13px 15px;

  border:
    1px solid
    rgba(241, 109, 122, 0.38);

  border-radius: 12px;

  color: #FFB8BF;

  background:
    rgba(241, 109, 122, 0.09);
}


html[data-mv-theme="light"]
.mv-auth-errors {
  color: #A82436;
  background: #FFF1F3;
}


.mv-auth-errors p {
  margin: 0;

  color: inherit !important;

  font-size: 13px;
}


.mv-auth-formbox form {
  display: grid;

  gap: 19px;
}


.mv-auth-formbox label {
  display: grid;

  gap: 9px;

  color: var(--head);

  font:
    900 10px/1
    Inter,
    sans-serif;

  letter-spacing: 0.1em;
}


.mv-auth-formbox input {
  width: 100%;
  height: 54px;

  padding:
    0 16px;

  border:
    1px solid
    var(--line) !important;

  border-radius: 12px !important;

  outline: 0;

  color: var(--head) !important;
  background: var(--surface2) !important;

  font:
    500 15px/1
    Inter,
    sans-serif !important;

  box-shadow: none !important;
}


.mv-auth-formbox
input::placeholder {
  color:
    color-mix(
      in srgb,
      var(--text) 75%,
      transparent
    ) !important;
}


.mv-auth-formbox input:focus {
  border-color:
    var(--accent) !important;

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--accent) 15%,
      transparent
    ) !important;
}


.mv-password {
  position: relative;

  display: block;
}


.mv-password input {
  padding-right: 96px;
}


.mv-password button {
  position: absolute;

  right: 7px;
  top: 7px;

  height: 40px;

  padding:
    0 13px;

  border: 0;

  border-radius: 9px;

  color: var(--head);

  background:
    color-mix(
      in srgb,
      var(--accent) 10%,
      var(--surface2)
    );

  font:
    800 12px/1
    Inter,
    sans-serif;

  cursor: pointer;
}


.mv-password button:hover {
  color: var(--accent);
}


.mv-auth-meta {
  margin-top: -8px;

  display: flex;

  justify-content: flex-end;
}


.mv-auth-meta a {
  color: var(--accent);

  font:
    800 12px/1
    Inter,
    sans-serif;

  text-decoration: none;
}


.mv-auth-submit {
  width: 100%;
  height: 54px;

  border: 0;

  border-radius: 12px;

  color: var(--contrast);

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  box-shadow:
    0 15px 34px
    color-mix(
      in srgb,
      var(--accent) 24%,
      transparent
    );

  font:
    900 14px/1
    Inter,
    sans-serif;

  cursor: pointer;
}


.mv-auth-submit:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.04);
}


.mv-auth-help {
  margin:
    20px 0
    0;

  color: var(--text) !important;

  font:
    400 12px/1.55
    Inter,
    sans-serif;
}


.mv-auth-register {
  margin-top: 23px;

  padding-top: 19px;

  display: flex;

  justify-content: space-between;

  gap: 14px;

  border-top:
    1px solid
    var(--line);

  color: var(--text);

  font:
    400 13px/1.4
    Inter,
    sans-serif;
}


.mv-auth-register a {
  color: var(--accent);

  font-weight: 850;

  text-decoration: none;
}


.mv-auth-note {
  width:
    min(
      820px,
      calc(100% - 30px)
    );

  margin:
    16px auto
    0;

  padding:
    15px 18px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 28%,
      var(--line)
    );

  border-radius: 15px;

  color: var(--text);

  background:
    color-mix(
      in srgb,
      var(--surface) 88%,
      transparent
    );
}


.mv-auth-note strong {
  color: var(--accent);

  font-size: 13px;
}


.mv-auth-note p {
  margin:
    6px 0
    0;

  color: var(--text) !important;

  font-size: 12px;

  line-height: 1.55;
}


@media(max-width: 900px) {

  .mv-auth-screen {
    padding:
      20px 14px
      30px;

    justify-content: flex-start;
  }


  .mv-auth-card {
    grid-template-columns:
      1fr;

    border-radius: 22px;
  }


  .mv-auth-side {
    padding:
      40px 28px
      34px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--line);
  }


  .mv-auth-brand {
    margin-bottom: 28px;
  }


  .mv-auth-side h1 {
    font-size:
      clamp(
        44px,
        12vw,
        62px
      );
  }


  .mv-auth-side > small {
    margin-top: 26px;
  }


  .mv-auth-formbox {
    padding:
      40px 26px;
  }

}


@media(max-width: 520px) {

  .mv-auth-side,
  .mv-auth-formbox {
    padding:
      32px 20px;
  }


  .mv-auth-side h1 {
    font-size: 42px;
  }


  .mv-auth-formbox h2 {
    font-size: 33px;
  }


  .mv-auth-register {
    flex-direction: column;
  }

}