/* ============================================================
   MOTAVIO HEADER FINAL V2

   Verbindliche letzte CSS-Schicht für:
   - öffentliche Website
   - Builder-Vorschau
   - Dark Mode
   - Light Mode
   - hochgeladene SVG- und PNG-Logos
   ============================================================ */

:root {
  --mv-header-height: 86px;
  --mv-header-container: 1420px;
  --mv-logo-column: 210px;
}


/* ============================================================
   HEADER-GRUNDGERÜST
   ============================================================ */

html body .mv-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;

  width: 100% !important;
  min-height: var(--mv-header-height) !important;

  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%) !important;

  backdrop-filter:
    blur(18px)
    saturate(135%) !important;
}


html body .mv-header-inner {
  width:
    min(
      var(--mv-header-container),
      calc(100% - 48px)
    ) !important;

  min-height: var(--mv-header-height) !important;

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

  display: grid !important;

  grid-template-columns:
    var(--mv-logo-column)
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  column-gap: 18px !important;
}


/* ============================================================
   LOGO
   ============================================================ */

html body a.mv-brand {
  width: auto !important;
  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

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

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
  text-decoration: none !important;
}


html body a.mv-brand img {
  display: block !important;

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

  object-fit: contain !important;
  object-position: left center !important;
}


/* Statische Fallback-Logos */

html body .mv-brand-logo-light {
  display: none !important;
}

html[data-mv-theme="light"]
body
.mv-brand-logo-dark {
  display: none !important;
}

html[data-mv-theme="light"]
body
.mv-brand-logo-light {
  display: block !important;
}


/* ============================================================
   HAUPTNAVIGATION
   ============================================================ */

html body .mv-main-nav {
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}


html body .mv-menu-v2-nav {
  min-width: 0 !important;
  min-height: 50px !important;

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

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  gap: 3px !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
}


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

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;

  white-space: nowrap !important;
  text-decoration: none !important;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease !important;
}


html body .mv-menu-v2-nav > a:hover,
html body .mv-menu-v2-trigger:hover,
html body .mv-main-nav .mv-vehiclecheck-direct:hover {
  transform: translateY(-1px) !important;
}


/* ============================================================
   RECHTE HEADER-AKTIONEN
   ============================================================ */

html body .mv-menu-v2-actions {
  min-width: max-content !important;

  margin-left: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 9px !important;

  flex-shrink: 0 !important;
}


html body .mv-menu-login-text {
  min-height: 40px !important;

  margin: 0 4px 0 0 !important;
  padding: 0 5px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
  text-decoration: none !important;
}


html body .mv-menu-trial {
  min-height: 44px !important;

  margin: 0 12px 0 0 !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid transparent !important;
  border-radius: 14px !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  white-space: nowrap !important;

  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease !important;
}


html body .mv-menu-trial:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.035) !important;
}


/* ============================================================
   SPRACHE UND THEME
   ============================================================ */

html body .mv-lang-switch,
html body .mv-theme-switch {
  min-height: 40px !important;

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

  display: flex !important;
  align-items: center !important;

  gap: 2px !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
}


html body .mv-lang-switch button,
html body .mv-theme-switch button {
  appearance: none !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

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

  display: grid !important;
  place-items: center !important;

  border: 0 !important;
  border-radius: 9px !important;

  background: transparent !important;

  font-family: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  cursor: pointer !important;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}


html body .mv-theme-switch button {
  font-size: 16px !important;
}


/* ============================================================
   DARK MODE
   ============================================================ */

html:not([data-mv-theme="light"])
body
.mv-header,
html[data-mv-theme="dark"]
body
.mv-header {
  background: rgba(3, 10, 17, 0.965) !important;

  border-bottom-color:
    rgba(121, 157, 184, 0.14) !important;

  box-shadow:
    0 10px 34px
    rgba(0, 0, 0, 0.16) !important;
}


html:not([data-mv-theme="light"])
body
.mv-menu-v2-nav,
html[data-mv-theme="dark"]
body
.mv-menu-v2-nav {
  background: #0B1117 !important;
  border-color: #1C2B37 !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.035),
    0 8px 26px
    rgba(0, 0, 0, 0.12) !important;
}


html:not([data-mv-theme="light"])
body
.mv-menu-v2-nav > a,
html:not([data-mv-theme="light"])
body
.mv-menu-v2-trigger,
html:not([data-mv-theme="light"])
body
.mv-main-nav
.mv-vehiclecheck-direct,
html[data-mv-theme="dark"]
body
.mv-menu-v2-nav > a,
html[data-mv-theme="dark"]
body
.mv-menu-v2-trigger,
html[data-mv-theme="dark"]
body
.mv-main-nav
.mv-vehiclecheck-direct {
  color: #F2F5F7 !important;

  background:
    rgba(255, 255, 255, 0.025) !important;
}


html:not([data-mv-theme="light"])
body
.mv-menu-v2-nav > a:hover,
html:not([data-mv-theme="light"])
body
.mv-menu-v2-trigger:hover,
html:not([data-mv-theme="light"])
body
.mv-main-nav
.mv-vehiclecheck-direct:hover,
html[data-mv-theme="dark"]
body
.mv-menu-v2-nav > a:hover,
html[data-mv-theme="dark"]
body
.mv-menu-v2-trigger:hover,
html[data-mv-theme="dark"]
body
.mv-main-nav
.mv-vehiclecheck-direct:hover {
  color: #FFFFFF !important;

  border-color:
    rgba(226, 180, 73, 0.19) !important;

  background:
    rgba(226, 180, 73, 0.075) !important;
}


html:not([data-mv-theme="light"])
body
.mv-menu-login-text,
html[data-mv-theme="dark"]
body
.mv-menu-login-text {
  color: #EEF3F6 !important;
}


html:not([data-mv-theme="light"])
body
.mv-menu-trial,
html[data-mv-theme="dark"]
body
.mv-menu-trial {
  color: #071019 !important;

  background:
    linear-gradient(
      180deg,
      #F1C85E 0%,
      #D8A934 100%
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(226, 180, 73, 0.15) !important;
}


html:not([data-mv-theme="light"])
body
.mv-lang-switch,
html:not([data-mv-theme="light"])
body
.mv-theme-switch,
html[data-mv-theme="dark"]
body
.mv-lang-switch,
html[data-mv-theme="dark"]
body
.mv-theme-switch {
  background: #081119 !important;
  border-color: #20313E !important;
}


html:not([data-mv-theme="light"])
body
.mv-lang-switch button,
html:not([data-mv-theme="light"])
body
.mv-theme-switch button,
html[data-mv-theme="dark"]
body
.mv-lang-switch button,
html[data-mv-theme="dark"]
body
.mv-theme-switch button {
  color: #AFC0CA !important;
}


html:not([data-mv-theme="light"])
body
.mv-lang-switch button.active,
html:not([data-mv-theme="light"])
body
.mv-lang-switch button[aria-pressed="true"],
html:not([data-mv-theme="light"])
body
.mv-theme-switch button.active,
html:not([data-mv-theme="light"])
body
.mv-theme-switch button[aria-pressed="true"],
html[data-mv-theme="dark"]
body
.mv-lang-switch button.active,
html[data-mv-theme="dark"]
body
.mv-lang-switch button[aria-pressed="true"],
html[data-mv-theme="dark"]
body
.mv-theme-switch button.active,
html[data-mv-theme="dark"]
body
.mv-theme-switch button[aria-pressed="true"] {
  color: #22D3E1 !important;
  background: #073149 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(34, 211, 225, 0.11) !important;
}


/* ============================================================
   LIGHT MODE
   ============================================================ */

html[data-mv-theme="light"]
body
.mv-header {
  background:
    rgba(255, 255, 255, 0.975) !important;

  border-bottom-color: #DCE6ED !important;

  box-shadow:
    0 8px 30px
    rgba(7, 26, 44, 0.065) !important;
}


html[data-mv-theme="light"]
body
.mv-menu-v2-nav {
  background: #F4F8FB !important;
  border-color: #DCE7EF !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.95),
    0 7px 22px
    rgba(7, 26, 44, 0.045) !important;
}


html[data-mv-theme="light"]
body
.mv-menu-v2-nav > a,
html[data-mv-theme="light"]
body
.mv-menu-v2-trigger,
html[data-mv-theme="light"]
body
.mv-main-nav
.mv-vehiclecheck-direct {
  color: #142B3E !important;

  background:
    rgba(255, 255, 255, 0.66) !important;
}


html[data-mv-theme="light"]
body
.mv-menu-v2-nav > a:hover,
html[data-mv-theme="light"]
body
.mv-menu-v2-trigger:hover,
html[data-mv-theme="light"]
body
.mv-main-nav
.mv-vehiclecheck-direct:hover {
  color: #071A2C !important;

  border-color:
    rgba(22, 143, 230, 0.20) !important;

  background:
    rgba(22, 143, 230, 0.075) !important;
}


html[data-mv-theme="light"]
body
.mv-menu-login-text {
  color: #142B3E !important;
  opacity: 1 !important;
}


html[data-mv-theme="light"]
body
.mv-menu-trial {
  color: #FFFFFF !important;

  background:
    linear-gradient(
      180deg,
      #249BF0 0%,
      #117ED1 100%
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(22, 143, 230, 0.18) !important;
}


html[data-mv-theme="light"]
body
.mv-lang-switch,
html[data-mv-theme="light"]
body
.mv-theme-switch {
  background: #F4F8FB !important;
  border-color: #D8E4EC !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.90) !important;
}


html[data-mv-theme="light"]
body
.mv-lang-switch button,
html[data-mv-theme="light"]
body
.mv-theme-switch button {
  color: #526779 !important;
}


html[data-mv-theme="light"]
body
.mv-lang-switch button:hover,
html[data-mv-theme="light"]
body
.mv-theme-switch button:hover {
  color: #071A2C !important;
  background: #E6F1F8 !important;
}


html[data-mv-theme="light"]
body
.mv-lang-switch button.active,
html[data-mv-theme="light"]
body
.mv-lang-switch button[aria-pressed="true"],
html[data-mv-theme="light"]
body
.mv-theme-switch button.active,
html[data-mv-theme="light"]
body
.mv-theme-switch button[aria-pressed="true"] {
  color: #FFFFFF !important;
  background: #168FE6 !important;

  box-shadow:
    0 5px 14px
    rgba(22, 143, 230, 0.18) !important;
}


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

@media
(min-width: 1221px)
and (max-width: 1499px) {

  :root {
    --mv-header-container: calc(100% - 24px);
    --mv-logo-column: 186px;
  }

  html body .mv-header-inner {
    width: calc(100% - 24px) !important;
    column-gap: 13px !important;
  }

  html body .mv-menu-v2-nav > a,
  html body .mv-menu-v2-trigger,
  html body .mv-main-nav .mv-vehiclecheck-direct {
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }

  html body .mv-menu-v2-actions {
    gap: 6px !important;
  }

  html body .mv-menu-login-text {
    margin-right: 0 !important;
    padding: 0 2px !important;
    font-size: 11px !important;
  }

  html body .mv-menu-trial {
    min-height: 42px !important;
    margin-right: 6px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
  }

  html body .mv-lang-switch,
  html body .mv-theme-switch {
    min-height: 38px !important;
  }

  html body .mv-lang-switch button,
  html body .mv-theme-switch button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}


/* ============================================================
   SCHMALER DESKTOP / BUILDER-IFRAME
   ============================================================ */

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

  :root {
    --mv-header-height: 78px;
    --mv-logo-column: 154px;
  }

  html body .mv-header-inner {
    width: calc(100% - 20px) !important;
    column-gap: 9px !important;
  }

  html body .mv-menu-v2-nav {
    min-height: 46px !important;
    padding: 4px !important;
    gap: 1px !important;
  }

  html body .mv-menu-v2-nav > a,
  html body .mv-menu-v2-trigger,
  html body .mv-main-nav .mv-vehiclecheck-direct {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  html body .mv-menu-login-text {
    display: none !important;
  }

  html body .mv-menu-trial {
    min-height: 40px !important;
    margin-right: 3px !important;
    padding: 0 10px !important;
    font-size: 9.5px !important;
  }

  html body .mv-menu-v2-actions {
    gap: 4px !important;
  }

  html body .mv-lang-switch,
  html body .mv-theme-switch {
    min-height: 36px !important;
    padding: 2px !important;
  }

  html body .mv-lang-switch button,
  html body .mv-theme-switch button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}


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

@media(max-width: 900px) {

  :root {
    --mv-header-height: 72px;
    --mv-logo-column: 148px;
  }

  html body .mv-header-inner {
    width: calc(100% - 24px) !important;

    grid-template-columns:
      var(--mv-logo-column)
      minmax(0, 1fr)
      auto !important;

    column-gap: 8px !important;
  }
}