/* ============================================================
   MOTAVIO BRANDKIT FINAL V1
   ============================================================ */

:root{

  --motavio-navy:
    #071A2C;

  --motavio-blue:
    #168FE6;

  --motavio-blue-hover:
    #0D78CE;

  --motavio-white:
    #F5F7FA;

  --motavio-gold:
    #E2B449;

  --motavio-gold-light:
    #F1C85E;

  --motavio-gold-dark:
    #D8A934;

  --motavio-steel:
    #6E8491;

  --motavio-light-bg:
    #F7FAFC;

  --motavio-light-panel:
    #FFFFFF;

  --motavio-light-soft:
    #EEF4F8;

}


/* ============================================================
   TYPOGRAFIE
   ============================================================ */

html,
body,
button,
input,
select,
textarea{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}


/* ============================================================
   LOGO
   ungefähr gleiche visuelle Größe wie Referenz:
   174 × 44 px
   ============================================================ */

.mv-brand{
  min-width:
    0 !important;

  min-height:
    0 !important;

  width:
    auto !important;

  height:
    auto !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;

  text-decoration:
    none !important;
}


.mv-brand-picture{
  width:
    174px !important;

  height:
    44px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;
}


.mv-brand-logo{
  width:
    auto !important;

  height:
    44px !important;

  max-width:
    174px !important;

  display:
    block !important;

  object-fit:
    contain !important;

  object-position:
    left center !important;
}


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


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


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


.mv-brand-mark,
.mv-brand-word{
  display:
    none !important;
}


/* Footer kompakter */

.mv-footer .mv-brand-picture{
  width:
    148px !important;

  height:
    37px !important;
}


.mv-footer .mv-brand-logo{
  height:
    37px !important;

  max-width:
    148px !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.mv-header-inner{
  grid-template-columns:
    174px
    minmax(0,1fr)
    auto !important;

  gap:
    18px !important;
}


/* ============================================================
   DARK BRAND
   aktuelle Motavio-Farbwelt bleibt erhalten
   ============================================================ */

html:not([data-mv-theme="light"]),
html[data-mv-theme="dark"]{

  --gold:
    #E2B449;

  --gold-light:
    #F1C85E;

  --cyan:
    #00C2CB;

  --blue:
    #1CC8FF;

}


/* ============================================================
   LIGHT BRAND
   Weiß + Motavio Blue + Deep Navy
   ============================================================ */

html[data-mv-theme="light"]{

  --bg:
    #F7FAFC !important;

  --bg-soft:
    #EEF4F8 !important;

  --panel:
    #FFFFFF !important;

  --panel-2:
    #F2F7FB !important;

  --line:
    rgba(7,26,44,.14) !important;

  --line-soft:
    rgba(7,26,44,.075) !important;

  --text:
    #071A2C !important;

  --muted:
    #526779 !important;

  --muted-soft:
    #6E8491 !important;

  --gold:
    #168FE6 !important;

  --gold-light:
    #3AA5F2 !important;

  --cyan:
    #168FE6 !important;

  --blue:
    #168FE6 !important;
}


html[data-mv-theme="light"]
body.mv-public{
  background:
    #F7FAFC !important;

  color:
    #071A2C !important;
}


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

  border-bottom-color:
    #D6E3ED !important;

  box-shadow:
    0 3px 18px
    rgba(7,26,44,.055) !important;
}


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

  background:
    #F2F7FB !important;

  box-shadow:
    0 4px 16px
    rgba(7,26,44,.045) !important;
}


html[data-mv-theme="light"]
.mv-menu-v2-nav > a,

html[data-mv-theme="light"]
.mv-menu-v2-trigger{
  color:
    #263C50 !important;

  background:
    rgba(255,255,255,.66) !important;
}


html[data-mv-theme="light"]
.mv-menu-v2-nav > a:hover,

html[data-mv-theme="light"]
.mv-menu-v2-trigger:hover{
  color:
    #071A2C !important;

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

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


/* CTA wird in Light bewusst Blau */

html[data-mv-theme="light"]
.mv-menu-trial,

html[data-mv-theme="light"]
.mv-primary,

html[data-mv-theme="light"]
.mv-header-cta{
  background:
    linear-gradient(
      180deg,
      #249BF0,
      #117ED1
    ) !important;

  color:
    #FFFFFF !important;

  border-color:
    transparent !important;

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


/* Dark CTA bleibt Motavio Gold */

html:not([data-mv-theme="light"])
.mv-menu-trial,

html[data-mv-theme="dark"]
.mv-menu-trial{
  background:
    linear-gradient(
      180deg,
      #F1C85E,
      #D8A934
    ) !important;

  color:
    #071019 !important;
}


/* ============================================================
   LIGHT PANELS
   ============================================================ */

html[data-mv-theme="light"]
.mv-mega-v2,

html[data-mv-theme="light"]
.vcx-card,

html[data-mv-theme="light"]
.vc2-box{
  background:
    #FFFFFF !important;

  border-color:
    #D6E3ED !important;

  box-shadow:
    0 18px 50px
    rgba(7,26,44,.08) !important;
}


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

@media(max-width:900px){

  .mv-header-inner{
    grid-template-columns:
      148px
      1fr
      auto !important;
  }


  .mv-brand-picture{
    width:
      148px !important;

    height:
      37px !important;
  }


  .mv-brand-logo{
    height:
      37px !important;

    max-width:
      148px !important;
  }

}


@media(max-width:560px){

  .mv-header-inner{
    grid-template-columns:
      132px
      1fr
      auto !important;
  }


  .mv-brand-picture{
    width:
      132px !important;

    height:
      33px !important;
  }


  .mv-brand-logo{
    height:
      33px !important;

    max-width:
      132px !important;
  }

}