/************* Variablen ***************/
:root {
  --ml-c1: #ff651a/*Orange | Nicht genutztes Orange aus altem Logo #fb6946 = 251,105,70*/;
  --ml-c1-90: RGBA(255, 101, 26, 0.9); 
  --ml-c2: #0329bc/*Blau | Nicht genutztes Blau-lila aus altem Logo #43358b*/;
  --ml-c3: #e7e9e9/*Hellstes Grau im Logo*/;
  --ml-c3-90: RGBA(231, 233, 233, 0.9);
  --ml-c4: #616665 /* rgb(97,102,101) | Nicht genutztes dunkelstes Grau im Logo #727977*/;
  --ml-c4-90: RGBA(97,102,101,0.9);
  --ml-c5: #212529/*Schwarz = 33,37, 41*/;
  --ml-c5-80: RGBA(33,37,41,.8);
}

/********************** Header *********************/
#sp-header {
  padding: 0 2%;
  box-shadow: 0 0 0 0;
  background-color: rgba(255,255,255,0);
}

#sp-header #sp-menu .align-items-center {
  align-items: flex-start !important;
}

#offcanvas-toggler .burger-icon {
  width: 40px;
}

#offcanvas-toggler .burger-icon > span {
  background-color: #fff;
  height: 4px;
  margin: 7px 0;  
}

#offcanvas-toggler {
  margin-top: 13px;
}

@media (max-width: 767.98px) {
  #offcanvas-toggler {
    margin-top: 7px;
  }
}

@media (max-width: 575.98px) {
  #sp-header {
    padding: 0 15px;
    box-shadow: 0 0 0 0;
    background-color: rgba(255,255,255,0);
  }
}

/***************** Offcanvas **********************/
.offcanvas-menu {
  background-color: var(--ml-c4);   
}

.offcanvas-menu .offcanvas-inner {
  margin-top: 80px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a {
  color: #fff;
  opacity: 1;
  font-weight: 500;
  font-size: unset;
  text-transform: uppercase;
  padding: 15px 0;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus {
  color: var(--ml-c1) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #fff !important;
  opacity: .25 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module:last-child {
  margin-top: 50px;
}

.close-offcanvas {
  top: 35px;
  right: 25px !important;
}

.close-offcanvas .burger-icon {
 width: 40px;
}

.close-offcanvas .burger-icon > span {
  background-color: #fff;
  height: 4px;
}

.offcanvas-active .burger-icon > span:nth-child(3) {
	transform: translate(0, -9px) rotate(45deg);
}

/************* Elemente, Abstände, Größen ******************/
.sppb-btn {
  width: 260px;
  height: 70px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  font-size: unset;
  font-weight: 300;
  text-transform: uppercase;
}

p:last-child {
  margin-bottom: 0 !important;
}

h3 {
  margin-bottom: 2rem;
}

.ml-ul-c1, .ml-ul-c2 {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

#ml-ds-ds .ml-ul-c1, #ml-ds-ds .ml-ul-c2 {
  margin-bottom: 1rem;
}

.ml-ul-c1 li, .ml-ul-c2 li {
  margin-bottom: 0.75em;
  position: relative;
  padding-left: 32px;
}

.ml-ul-c1 li:last-child, .ml-ul-c2 li:last-child {
  margin-bottom: 0 !important;
}

.ml-ul-c1 li::before, .ml-ul-c2 li::before {
  width: 1.15rem;
  margin-right: 15px;
  display: inline-block;
  position: absolute;
  left: 0;
}

.ml-ul-c1 li::before {
  content: url(/images/makellos-icon-1x-c1.svg);
}

.ml-ul-c2 li::before {
  content: url(/images/makellos-icon-1x-c2.svg);
}


.sp-scroll-up {
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
}

.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
  background: var(--ml-c1);
}

#ml-ds-ds h3 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

#ml-ds-ds h4 {
  margin-top: 2rem;
}

#ml-ds-ds .ds-hervorhebung {
  margin-top: 2rem;
}

@media (max-width: 991.98px) {
  .sppb-btn {
    height: 65px;
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  #ml-home-kontakt .sppb-btn {
    width: 320px;
  }
}

@media (max-width: 767.98px) {
  .sppb-btn {
    height: 55px;
    font-size: 1.3rem;
  }
}

@media (max-width: 575.98px) {
  .sppb-btn {
    width: 230px;
    height: 55px;
    font-size: 1.2rem;
  }
  #ml-home-kontakt .sppb-btn {
    width: 230px;
  }
  .ml-hyphens {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/*********************** Referenzen *******************************/
.ml-sec-ref-projekt {
  margin-top: 80px;
}
.ml-sec-ref-projekt:first-child {
  margin-top: 0;
}

.ml-col-ref-text-vertical /*Text links*/{
  padding: 20% 0 0;
}
.ml-col-ref-text-horizontal /*Text rechts*/{
  padding: 20% 0 0;
}
.ml-col-ref-img-vertical /*Bild rechts*/{
  padding: 0 0 0 10%;
}
.ml-col-ref-img-horizontal /*Bild links*/{
  padding: 0 10% 0 0;
}

.sppb-before-after-wrapper, .sppb-before-after-image > img {
  width: 100%;
  height: 600px;
}
.sppb-before-after-wrapper::after {
  content: "Ziehen Sie die Linie, um die Vorher-Nachher-Bilder komplett zu sehen!";
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--ml-c4-90);
  padding: 5px 10px;
  max-width: 100px;
  border-radius: 0;
  font-size: 1rem;
  max-width: 200px;           /* Maximale Breite nach Wunsch */
  width: max-content;         /* Wird nur so breit wie nötig... */
  min-width: 100px;           /* ...aber mindestens 100px */
  white-space: normal;        /* Erlaubt Zeilenumbrüche! */
  overflow-wrap: break-word;  /* Bricht sehr lange Wörter zur Not um */
  text-align: center;         /* Sieht bei Mehrzeilern meist besser aus */
  opacity: 0;
  pointer-events: none; /* Verhindert Flackern beim Hovern */
  transition: opacity 0.5s ease-in-out;
  z-index: 9999;
}

.sppb-before-after-wrapper:hover::after {
  opacity: 1;
}

.sppb-before-after-wrapper .sppb-before-after-separator > svg {
  height: 80px !important;
  width: 80px !important;
}

@media (max-width: 1198.98px) {
  .ml-col-ref-img-vertical /*Bild rechts*/{
    padding: 0 0 0 5%;
  }
  .ml-col-ref-img-horizontal /*Bild links*/{
    padding: 0 5% 0 0;
  }
  .sppb-before-after-wrapper, .sppb-before-after-image > img {
    height: 450px;
  }
}

@media (max-width: 991.98px) {
  .ml-col-ref-text-vertical /*Text links*/, .ml-col-ref-text-horizontal /*Text rechts*/{
    padding: 0;
  }
  .ml-col-ref-img-vertical /*Bild rechts*/, .ml-col-ref-img-horizontal /*Bild links*/{
    padding: 2rem 0 0 32px;
  }
  .sppb-before-after-wrapper .sppb-before-after-separator > svg {
    height: 60px !important;
    width: 60px !important;
  }
}

@media (max-width: 767.98px) {
  .sppb-before-after-wrapper, .sppb-before-after-image > img {
    height: 380px;
  }
}

@media (max-width: 575.98px) {
  .ml-sec-ref-projekt {
    margin-top: 60px;
  }
  .ml-col-ref-img-vertical /*Bild rechts*/, .ml-col-ref-img-horizontal /*Bild links*/{
    padding: 2rem 0 0;
  }
  .ml-col-ref-img-vertical .sppb-before-after-wrapper, .ml-col-ref-img-vertical .sppb-before-after-image > img {
    height: 270px;
  }
  .ml-col-ref-img-horizontal .sppb-before-after-wrapper, .ml-col-ref-img-horizontal .sppb-before-after-image > img {
    width: 100%;
  }
}

@media (max-width: 399.98px) {
  .ml-col-ref-img-vertical .sppb-before-after-wrapper, .ml-col-ref-img-vertical .sppb-before-after-image > img {
    height: 240px;
  }
}

/*************** Formulare + Formular-Pop-up******************/
.sppb-form-check {
  margin: 0px 0px 20px;
  padding: 0px 15px;
  max-width: 99%;
}

.sppb-form-check-label {
  max-width: 99%;
}

.sppb-addon-form-builder .sppb-form-check-label::before, .sppb-addon-form-builder .form-builder-checkbox-item label::before {
  border: 1px solid #fff !important;
  border-radius: 0;
}

.sppb-addon-form-builder .sppb-form-check-label, .sppb-addon-form-builder .form-builder-checkbox-item label {
  margin-left: 16px !important;
}

.sppb-ajax-contact-status {
  margin: 30px auto 20px 30px !important;
}

.sppb-text-success, .sppb-text-danger {
  font-weight: 300 !important;
  font-style: normal;
  color: var(--ml-c1);
}

@media (min-width: 576px) {
  .sppb-form-group label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px; /* verhindert möglicherweise einen scroll-bug */
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* ältere Browser */
    white-space: nowrap;
    border: 0;
  }
}

/*.sppb-form-group.sppb-form-builder-field-0 label, .sppb-form-group.sppb-form-builder-field-1 label, .sppb-form-group.sppb-form-builder-field-2 label {
    display: none !important;
}*/

@media (max-width: 575.98px) {
  input#captcha-1759243868399::placeholder {
    color: transparent !important;
  }
}

/******************** Sections + Columns *********************/
html::before {
	content: ' ';
	display: block;
	background-image: url(/images/makellos-arbeiten01-2000x1333-80.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	top: 0; bottom: 0; left: 0; right: 0;
	position: fixed;
	z-index: -10;
}

#sp-main-body {
  margin-top: -80px !important;
}

.ml-sec-padding-top-bottom {
  padding-top: 150px;
  padding-bottom: 170px;  
}

.ml-sec-padding-top {
  padding-top: 150px;
}

.ml-sec-padding-bottom {
  padding-bottom: 170px;  
}

.ml-sec-padding-left-right {
  padding-left: 10vw;
  padding-right: 10vw;
}

#ml-home-hero {
  height: calc(100vh + 80px) !important;
  padding: 0 0 0 12.5vw;
}

#ml-home-hero .ml-col-hero {
  height: 80vh;
  min-height: 760px;
  min-width: 760px;
  max-width: 1000px;
}

.ml-home-intro-col-text {
  max-width: 1200px;
  margin: 0 0 0 auto;
}

.ml-subpages-hero {
  display: flex;
  align-items: center;
}

.ml-subpages-hero:not(#ml-404-hero) {
  height: 75vh;
  min-height: 700px;
  max-height: 900px;
}

.ml-subpages-hero .ml-col-hero {
  min-height: 470px;
  min-width: 760px;
  max-width: 1000px;
}

@media (max-width: 1399.98px) {
  .ml-sec-padding-left-right {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 1199.98px) {
  #ml-home-hero {
    padding: 0 0 0 7.5vw;
  }
  #ml-home-hero .ml-col-hero {
    min-width: 650px;
    max-width: 680px;
  }
  .ml-subpages-hero .ml-col-hero {
	min-width: 720px;
  }
}

@media (max-width: 991.98px) {
  #ml-home-hero .ml-col-hero {
    min-width: unset;
    max-width: 530px;
  }
  #ml-home-intro {
    background-image: url(/images/makellos-arbeiten01-1000x1666-80.webp);
  }
  .ml-subpages-hero .ml-col-hero {
	min-width: 670px;
  }
  .ml-sec-padding-left-right.ml-sec-mobile-float-left:not(#ml-ds-ds) {
    padding-left: 0;
  }
  .ml-sec-padding-left-right.ml-sec-mobile-float-right {
    padding-right: 0;
  }
  .ml-sec-padding-left-right.ml-sec-mobile-float-left .sppb-row-container:not(.ml-projekte-ref-jahr .sppb-row-container) {
    margin: 0 auto 0 -15px;
    max-width: unset;
  }
  .ml-sec-padding-left-right.ml-sec-mobile-float-right .sppb-row-container:not(.ml-projekte-ref-jahr .sppb-row-container) {
    margin: 0 -15px 0 auto;
    max-width: unset;
  }
}

/*Safari 6.1 bis 10.0*/
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
  @media (max-width: 991.98px) {
    #ml-home-intro {
      background-attachment: scroll !important;
    }
  }
}

/*Safari 10.1+*/
@media not all and (min-resolution:.001dpcm) {
  @media (max-width: 991px) {
    #ml-home-intro {
      background-attachment: scroll !important;
    }
  }
}

@media (max-width: 767.98px) {
  html::before {
	background-image: url(/images/makellos-arbeiten01-1000x1666-80.webp);
  }
  #ml-home-hero .ml-col-hero {
    min-height: 700px;
    max-width: 390px; 
  }
  .ml-subpages-hero .ml-col-hero {
    min-width: 400px;
  }
  .ml-sec-padding-left-right.ml-projekte-ref-jahr {
    padding-left: 5%;
    padding-right: 0;
  }  
}

@media (max-width: 575.98px) {
  #ml-home-hero, .ml-subpages-hero {
    padding: 0;
  }
  #ml-home-hero .ml-col-hero {
    height: calc(100vh + 80px);
    min-height: 750px;
    max-width: 100%; 
  }
  .ml-subpages-hero .ml-col-hero {
    min-height: 425px;
    min-width: 275px;
  }
  .ml-sec-padding-top-bottom {
    padding-top: 80px;
    padding-bottom: 90px;
  }
  .ml-sec-padding-top {
    padding-top: 80px;
  }
  .ml-sec-padding-bottom {
    padding-bottom: 90px;
  }
}

/**************** Footer ******************/
#sp-footer {
  padding: 75px 10vw;
  background: var(--ml-c2);
}

@media (max-width: 1400px) {
  #sp-footer {
    padding: 75px 5vw;
  }
}

/***************** Fonts ************************/
/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v25-latin-300.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v25-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v25-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
}

p, body, h1, h2, h3, h4, .sppb-before-title, .sppb-after-title, .sp-megamenu-parent > li > a, .menu.nav-pills > li > a {
  font-family: 'Lato' !important;
}

body, p, label {
  line-height: 1.25 !important;
}

label, input, textarea {
  font-weight: 300;
}

h1:not(#ml-home-hero h1), h2, h3, h4, #ml-home-hero p, .ml-subpages-hero p, .sppb-before-title, .sppb-after-title {
  text-transform: uppercase;
}

#sp-footer, #sp-footer h4 {
  font-size: 1.2rem;
}

#ml-home-hero p {
  font-size: 3.25rem;
  font-weight: 600;
}

#ml-home-hero h1, #ml-home-intro p, .ml-subpages-hero p {
  font-size: 2rem;
  font-weight: 300;
}

@media (max-width: 1199.98px) {
  #ml-home-hero h1, #ml-home-intro p, .ml-subpages-hero p {
    font-size: 1.8rem;
  }
}

@media (max-width: 991.98px) {
  #ml-home-hero p {
  font-size: 2.5rem;
  }
}

@media (max-width: 767.98px) {
  #ml-home-hero h1, #ml-home-intro p, .ml-subpages-hero p {
    font-size: 1.5rem;
  }
  #ml-home-hero p {
    font-size: 1.8rem;
  }
}

@media (max-width: 575.98px) {
  h1, #ml-home-hero p {
    font-size: 1.8rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  #ml-home-hero h1, #ml-home-intro p, .ml-subpages-hero p {
    font-size: 1.3rem !important;
  }
}

@media (max-width: 399.98px) {
  .sppb-before-title, .sppb-after-title {
    font-size: 0.9rem !important;
  }
}