/* inter-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: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - 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: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - 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: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - 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: "Inter";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - 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: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - 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: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
html, body {
  font-family: "Akrobat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.8;
  background: #e2dad3;
  color: #344e64;
}
@media (min-width: 768px) {
  html, body {
    font-size: 20px;
    letter-spacing: 0;
  }
}
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
  margin-bottom: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1728px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1674px;
  }
}
.rot {
  color: #e42b2b;
}
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -85px;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain, cover;
  background-position: center bottom, center top;
  background-blend-mode: color, normal;
}
@media (min-width: 576px) {
  header {
    background-size: cover, cover;
  }
}
@media (min-width: 992px) {
  header {
    margin-top: 0;
  }
}
header.blend-blue {
  background-color: rgba(51, 127, 171, 0.7);
  background-blend-mode: color, multiply;
}
header .dmd {
  width: 65vw;
  margin: -10.5% 0 0 0;
}
@media (min-width: 576px) {
  header .dmd {
    width: 245px;
    margin: -10.5% 24.4% 0 0;
  }
}
@media (min-width: 768px) {
  header .dmd {
    width: 32%;
  }
}
header .titel-container {
  width: 290px;
}
@media (min-width: 499px) {
  header .titel-container {
    width: 350px;
  }
}
@media (min-width: 576px) {
  header .titel-container {
    width: 350px;
  }
}
@media (min-width: 768px) {
  header .titel-container {
    width: 350px;
  }
}
@media (min-width: 992px) {
  header .titel-container {
    width: 480px;
  }
}
@media (min-width: 1200px) {
  header .titel-container {
    width: 570px;
  }
}
@media (min-width: 1400px) {
  header .titel-container {
    width: 670px;
  }
}
@media (min-width: 1728px) {
  header .titel-container {
    width: 760px;
  }
}
header .h1, header h1 {
  margin-top: 70px;
  margin-bottom: 0;
  padding-bottom: 72px;
  font-size: 39px;
  line-height: 36px;
  text-transform: uppercase;
  /*text-shadow: 3px 3px 6px rgba(0,0,0,0.5);*/
  color: #fff;
  hyphens: auto;
}
@media (min-width: 499px) {
  header .h1, header h1 {
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 576px) {
  header .h1, header h1 {
    margin-top: 87px;
    padding-bottom: 90px;
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 768px) {
  header .h1, header h1 {
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 992px) {
  header .h1, header h1 {
    margin-top: 109px;
    padding-bottom: 112px;
    font-size: 63px;
    line-height: 58px;
  }
}
@media (min-width: 1200px) {
  header .h1, header h1 {
    font-size: 75px;
    line-height: 68px;
  }
}
@media (min-width: 1400px) {
  header .h1, header h1 {
    font-size: 88px;
    line-height: 80px;
  }
}
@media (min-width: 1728px) {
  header .h1, header h1 {
    font-size: 100px;
    line-height: 90px;
  }
}
.nav-mobile-container .controls-container {
  position: relative;
  z-index: 2;
  height: 85px;
  padding-bottom: 5px;
  width: 100%;
  background: rgba(52, 78, 100, 0.6);
  backdrop-filter: blur(4px);
}
@media (min-width: 992px) {
  .nav-mobile-container .controls-container {
    display: none;
  }
}
.nav-mobile-container .controls-container .logo {
  position: absolute;
  display: inline-block;
  top: 12px;
  left: 24px;
}
.nav-mobile-container .controls-container .logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
.nav-mobile-container .controls-container .nav-toggle {
  position: absolute;
  display: inline-block;
  top: 12px;
  right: 24px;
  height: 62px;
  width: 70px;
  background-color: transparent;
  background-image: url(../img/nav-toggle.webp);
  background-size: auto 400%;
  background-position: center top;
  border: none;
}
.nav-mobile-container .controls-container .nav-toggle:focus, .nav-mobile-container .controls-container .nav-toggle:hover {
  background-position: center -100%;
}
.nav-mobile-container .controls-container .nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
.nav-mobile-container .controls-container .nav-toggle[aria-expanded="true"] {
  background-position: center -200%;
}
.nav-mobile-container .controls-container .nav-toggle[aria-expanded="true"]:focus, .nav-mobile-container .controls-container .nav-toggle[aria-expanded="true"]:hover {
  background-position: center -300%;
}
.nav-mobile-container .nav-mobile-collapse-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.nav-mobile-container .nav-mobile {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  width: 100%;
  background-image: url(../img/nav-mobile-bg.webp);
  background-size: cover;
  background-position: center top;
}
@media (min-width: 992px) {
  .nav-mobile-container .nav-mobile {
    display: none;
  }
}
.nav-mobile-container .nav-mobile .nav-item .nav-link {
  display: inline-block;
  padding: 0;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  transition: opacity 0.35s ease;
}
.nav-mobile-container .nav-mobile .nav-item .nav-link:focus, .nav-mobile-container .nav-mobile .nav-item .nav-link:hover {
  opacity: 0.7;
}
.nav-mobile-container .nav-mobile .nav-item .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
nav {
  display: none;
  margin-top: -80px;
  height: 80px;
  width: 100%;
  background: rgba(52, 78, 100, 0.6);
  backdrop-filter: blur(4px);
  animation-name: navStart;
  animation-duration: 3s;
}
@media (min-width: 992px) {
  nav {
    display: block;
  }
}
nav .nav {
  padding-left: 24px;
  padding-right: 26px;
}
nav .nav .nav-item {
  animation-name: navItem;
}
nav .nav .nav-item .nav-link {
  padding: 8px 20px 0;
  line-height: 72px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  transition: opacity 0.35s ease;
}
@media (min-width: 1200px) {
  nav .nav .nav-item .nav-link {
    padding: 8px 26px 0;
    font-size: 22px;
  }
}
nav .nav .nav-item .nav-link img {
  vertical-align: bottom;
}
nav .nav .nav-item .nav-link:focus, nav .nav .nav-item .nav-link:hover {
  opacity: 0.7;
}
nav .nav .nav-item:first-of-type {
  display: block;
  margin-right: auto;
  animation-name: none;
}
nav .nav .nav-item:first-of-type .nav-link span {
  animation-name: navItem;
  animation-duration: 3s;
}
nav .nav .nav-item:nth-of-type(2) {
  animation-duration: 4s;
}
nav .nav .nav-item:nth-of-type(3) {
  animation-duration: 5s;
}
nav .nav .nav-item:nth-of-type(4) {
  animation-duration: 6s;
}
nav .nav .nav-item:nth-of-type(5) {
  animation-duration: 7s;
}
nav .nav .nav-item:nth-of-type(6) {
  animation-duration: 8s;
}
@keyframes navStart {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes navItem {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#ueber-uns {
  margin-top: 0;
  padding-top: 105px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
@media (min-width: 576px) {
  #ueber-uns {
    margin-top: 50px;
  }
}
@media (min-width: 992px) {
  #ueber-uns {
    margin-top: 100px;
  }
}
#ueber-uns .h1, #ueber-uns h1 {
  margin-top: 58px;
  margin-bottom: 60px;
  font-size: 39px;
  line-height: 36px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #ueber-uns .h1, #ueber-uns h1 {
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 576px) {
  #ueber-uns .h1, #ueber-uns h1 {
    margin-top: 78px;
    margin-bottom: 80px;
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 768px) {
  #ueber-uns .h1, #ueber-uns h1 {
    font-size: 46px;
    line-height: 43px;
  }
}
@media (min-width: 992px) {
  #ueber-uns .h1, #ueber-uns h1 {
    margin-top: 98px;
    margin-bottom: 100px;
    font-size: 63px;
    line-height: 58px;
  }
}
@media (min-width: 1200px) {
  #ueber-uns .h1, #ueber-uns h1 {
    font-size: 75px;
    line-height: 68px;
  }
}
@media (min-width: 1400px) {
  #ueber-uns .h1, #ueber-uns h1 {
    font-size: 88px;
    line-height: 80px;
  }
}
@media (min-width: 1728px) {
  #ueber-uns .h1, #ueber-uns h1 {
    font-size: 100px;
    line-height: 90px;
  }
}
#ueber-uns .logos {
  margin-bottom: 105px;
}
@media (min-width: 576px) {
  #ueber-uns .logos {
    margin-bottom: 130px;
  }
}
@media (min-width: 992px) {
  #ueber-uns .logos {
    margin-bottom: 155px;
  }
}
#ueber-uns .logos .frank-logo {
  width: auto;
}
@media (min-width: 576px) {
  #ueber-uns .logos .frank-logo {
    width: 176px;
  }
}
@media (min-width: 768px) {
  #ueber-uns .logos .frank-logo {
    width: auto;
  }
}
#ueber-uns .logos .plus {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 150px;
  margin-right: 150px;
}
@media (min-width: 499px) {
  #ueber-uns .logos .plus {
    margin-left: 170px;
    margin-right: 170px;
  }
}
@media (min-width: 576px) {
  #ueber-uns .logos .plus {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 40px;
    margin-right: 30px;
  }
}
@media (min-width: 768px) {
  #ueber-uns .logos .plus {
    margin-left: 70px;
    margin-right: 60px;
  }
}
#ueber-uns .logos .pesl-logo {
  width: auto;
}
@media (min-width: 576px) {
  #ueber-uns .logos .pesl-logo {
    width: 228px;
  }
}
@media (min-width: 768px) {
  #ueber-uns .logos .pesl-logo {
    width: auto;
  }
}
#ueber-uns a {
  color: #344e64;
}
#ueber-uns a:focus, #ueber-uns a:hover {
  color: #e42b2b;
}
#ueber-uns .text {
  margin-bottom: 121px;
  padding-left: calc((100% - 660px)*0.5);
  padding-right: calc((100% - 660px)*0.5);
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #ueber-uns .text {
    margin-bottom: 161px;
  }
}
@media (min-width: 992px) {
  #ueber-uns .text {
    margin-bottom: 201px;
  }
}
#ueber-uns .text b, #ueber-uns .text strong {
  font-weight: 800;
}
#ueber-uns .slider-video {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#ueber-uns .slider-video .slider {
  width: 100%;
  margin-right: auto;
}
@media (min-width: 768px) {
  #ueber-uns .slider-video .slider {
    width: 35.3%;
  }
}
#ueber-uns .slider-video .slider #ueber-uns-slider:focus-within {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#ueber-uns .slider-video .video {
  text-align: center;
  overflow: hidden;
  width: 100%;
  padding-top: 40px;
}
@media (min-width: 768px) {
  #ueber-uns .slider-video .video {
    padding-top: 71px;
    width: 63.5%;
  }
}
@media (min-width: 992px) {
  #ueber-uns .slider-video .video {
    padding-top: 95px;
  }
}
@media (min-width: 1200px) {
  #ueber-uns .slider-video .video {
    padding-top: 114px;
  }
}
@media (min-width: 1400px) {
  #ueber-uns .slider-video .video {
    padding-top: 133px;
  }
}
@media (min-width: 1728px) {
  #ueber-uns .slider-video .video {
    padding-top: 166px;
  }
}
#ueber-uns .slider-video .video .video-container {
  display: inline-block;
  margin-bottom: -10px;
  width: 132%;
}
@media (min-width: 768px) {
  #ueber-uns .slider-video .video .video-container {
    margin-bottom: -11.5px;
  }
}
#vorteile {
  margin-top: 0;
  padding-top: 105px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  overflow: hidden;
}
@media (min-width: 576px) {
  #vorteile {
    margin-top: 34px;
  }
}
@media (min-width: 992px) {
  #vorteile {
    margin-top: 68px;
  }
}
#vorteile b, #vorteile strong {
  font-weight: 800;
}
#vorteile .h2, #vorteile h2 {
  margin-top: 134px;
  margin-bottom: 35px;
  font-size: 47px;
  line-height: 43px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #vorteile .h2, #vorteile h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 576px) {
  #vorteile .h2, #vorteile h2 {
    margin-top: 167px;
    margin-bottom: 44px;
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 768px) {
  #vorteile .h2, #vorteile h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 992px) {
  #vorteile .h2, #vorteile h2 {
    margin-top: 209px;
    margin-bottom: 55px;
    font-size: 69px;
    line-height: 63px;
  }
}
@media (min-width: 1200px) {
  #vorteile .h2, #vorteile h2 {
    font-size: 82px;
    line-height: 75px;
  }
}
@media (min-width: 1400px) {
  #vorteile .h2, #vorteile h2 {
    font-size: 95px;
    line-height: 87px;
  }
}
@media (min-width: 1728px) {
  #vorteile .h2, #vorteile h2 {
    font-size: 120px;
    line-height: 110px;
  }
}
#vorteile .h3, #vorteile h3 {
  margin-bottom: 112px;
  font-size: 32px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #vorteile .h3, #vorteile h3 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #vorteile .h3, #vorteile h3 {
    margin-bottom: 140px;
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #vorteile .h3, #vorteile h3 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #vorteile .h3, #vorteile h3 {
    margin-bottom: 175px;
    font-size: 38px;
  }
}
@media (min-width: 1200px) {
  #vorteile .h3, #vorteile h3 {
    font-size: 45px;
  }
}
@media (min-width: 1400px) {
  #vorteile .h3, #vorteile h3 {
    font-size: 53px;
  }
}
@media (min-width: 1728px) {
  #vorteile .h3, #vorteile h3 {
    font-size: 60px;
  }
}
@media (min-width: 992px) {
  #vorteile .icon-container {
    height: 70px;
  }
}
#vorteile .h4, #vorteile h4 {
  margin-top: 43px;
  margin-bottom: 26px;
  padding-top: 23px;
  padding-left: 0;
  padding-right: 0;
  font-size: 28px;
  font-weight: 200;
  text-transform: uppercase;
  border-top: 1px solid #344e64;
}
@media (min-width: 499px) {
  #vorteile .h4, #vorteile h4 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #vorteile .h4, #vorteile h4 {
    margin-top: 54px;
    padding-left: calc((100% - 500px)*0.5);
    padding-right: calc((100% - 500px)*0.5);
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #vorteile .h4, #vorteile h4 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #vorteile .h4, #vorteile h4 {
    margin-top: 68px;
    padding-left: calc((100% - 400px)*0.5);
    padding-right: calc((100% - 400px)*0.5);
    font-size: 41px;
  }
}
@media (min-width: 1200px) {
  #vorteile .h4, #vorteile h4 {
    font-size: 39px;
  }
}
@media (min-width: 1400px) {
  #vorteile .h4, #vorteile h4 {
    font-size: 45px;
  }
}
@media (min-width: 1728px) {
  #vorteile .h4, #vorteile h4 {
    font-size: 50px;
  }
}
#vorteile .text {
  margin-bottom: 27px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #vorteile .text {
    margin-bottom: 34px;
    padding-left: calc((100% - 570px)*0.5);
    padding-right: calc((100% - 570px)*0.5);
  }
}
@media (min-width: 992px) {
  #vorteile .text {
    margin-bottom: 43px;
    padding-left: calc((100% - 470px)*0.5);
    padding-right: calc((100% - 470px)*0.5);
  }
}
#vorteile .zwei-partner {
  padding-top: 152px;
  width: 312px;
  margin: 0 auto;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner {
    padding-top: 190px;
    width: 100%;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner {
    padding-top: 237px;
  }
}
#vorteile .zwei-partner img {
  width: 185px;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner img {
    width: 290px;
  }
}
@media (min-width: 768px) {
  #vorteile .zwei-partner img {
    width: 387px;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner img {
    width: 516px;
  }
}
@media (min-width: 1200px) {
  #vorteile .zwei-partner img {
    width: 613px;
  }
}
@media (min-width: 1400px) {
  #vorteile .zwei-partner img {
    width: 710px;
  }
}
@media (min-width: 1728px) {
  #vorteile .zwei-partner img {
    width: 900px;
  }
}
#vorteile .zwei-partner .titel {
  margin-top: -103px;
  margin-bottom: 78px;
  font-weight: 900;
  font-size: 54px;
  line-height: 42px;
  text-transform: uppercase;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner .titel {
    margin-top: -161px;
    margin-bottom: 97px;
    font-size: 84px;
    line-height: 65px;
  }
}
@media (min-width: 768px) {
  #vorteile .zwei-partner .titel {
    margin-top: -214px;
    font-size: 112px;
    line-height: 87px;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner .titel {
    margin-top: -285px;
    margin-bottom: 121px;
    font-size: 149px;
    line-height: 116px;
  }
}
@media (min-width: 1200px) {
  #vorteile .zwei-partner .titel {
    margin-top: -338px;
    font-size: 177px;
    line-height: 138px;
  }
}
@media (min-width: 1400px) {
  #vorteile .zwei-partner .titel {
    margin-top: -391px;
    font-size: 205px;
    line-height: 160px;
  }
}
@media (min-width: 1728px) {
  #vorteile .zwei-partner .titel {
    margin-top: -496px;
    font-size: 260px;
    line-height: 203px;
  }
}
#vorteile .zwei-partner .titel .padder-1 {
  display: inline-block;
  padding-left: 42px;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 68px;
  }
}
@media (min-width: 768px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 98px;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 139px;
  }
}
@media (min-width: 1200px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 169px;
  }
}
@media (min-width: 1400px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 200px;
  }
}
@media (min-width: 1728px) {
  #vorteile .zwei-partner .titel .padder-1 {
    padding-left: 260px;
  }
}
#vorteile .zwei-partner .titel .padder-2 {
  display: inline-block;
  padding-left: 2px;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 6px;
  }
}
@media (min-width: 768px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 15px;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 29px;
  }
}
@media (min-width: 1200px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 38px;
  }
}
@media (min-width: 1400px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 47px;
  }
}
@media (min-width: 1728px) {
  #vorteile .zwei-partner .titel .padder-2 {
    padding-left: 66px;
  }
}
#vorteile .zwei-partner .titel .padder-3 {
  display: inline-block;
  padding-left: 75px;
}
@media (min-width: 576px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 120px;
  }
}
@media (min-width: 768px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 167px;
  }
}
@media (min-width: 992px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 232px;
  }
}
@media (min-width: 1200px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 279px;
  }
}
@media (min-width: 1400px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 326px;
  }
}
@media (min-width: 1728px) {
  #vorteile .zwei-partner .titel .padder-3 {
    padding-left: 420px;
  }
}
#vorteile .section-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 90px;
}
#vorteile .section-2 .left {
  width: 100%;
  margin-right: auto;
}
@media (min-width: 992px) {
  #vorteile .section-2 .left {
    width: 41%;
  }
}
#vorteile .section-2 .left .h3, #vorteile .section-2 .left h3 {
  padding-top: 6px;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 576px) {
  #vorteile .section-2 .left .h3, #vorteile .section-2 .left h3 {
    padding-left: calc((100% - 500px)*0.5);
    padding-right: calc((100% - 500px)*0.5);
  }
}
@media (min-width: 992px) {
  #vorteile .section-2 .left .h3, #vorteile .section-2 .left h3 {
    padding-left: calc((100% - 400px)*0.5);
    padding-right: calc((100% - 400px)*0.5);
  }
}
#vorteile .section-2 .right {
  width: 100%;
}
@media (min-width: 992px) {
  #vorteile .section-2 .right {
    width: 43.3%;
  }
}
#vorteile .section-2 .right .text {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 576px) {
  #vorteile .section-2 .right .text {
    padding-left: calc((100% - 570px)*0.5);
    padding-right: calc((100% - 570px)*0.5);
  }
}
@media (min-width: 992px) {
  #vorteile .section-2 .right .text {
    padding-left: calc((100% - 445px)*0.5);
    padding-right: calc((100% - 445px)*0.5);
  }
}
#vorteile .section-2 .right .text p, #vorteile .section-2 .right .text ol, #vorteile .section-2 .right .text ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #vorteile .section-2 .right .text p, #vorteile .section-2 .right .text ol, #vorteile .section-2 .right .text ul {
    margin-bottom: 36px;
  }
}
#leistungen {
  margin-top: 0;
  padding-top: 105px;
}
@media (min-width: 576px) {
  #leistungen {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  #leistungen {
    margin-top: 60px;
  }
}
#leistungen .h2, #leistungen h2 {
  margin-top: 112px;
  margin-bottom: 35px;
  font-size: 47px;
  line-height: 43px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #leistungen .h2, #leistungen h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 576px) {
  #leistungen .h2, #leistungen h2 {
    margin-top: 140px;
    margin-bottom: 44px;
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 768px) {
  #leistungen .h2, #leistungen h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 992px) {
  #leistungen .h2, #leistungen h2 {
    margin-top: 175px;
    margin-bottom: 55px;
    font-size: 69px;
    line-height: 63px;
  }
}
@media (min-width: 1200px) {
  #leistungen .h2, #leistungen h2 {
    font-size: 82px;
    line-height: 75px;
  }
}
@media (min-width: 1400px) {
  #leistungen .h2, #leistungen h2 {
    font-size: 95px;
    line-height: 87px;
  }
}
@media (min-width: 1728px) {
  #leistungen .h2, #leistungen h2 {
    font-size: 120px;
    line-height: 110px;
  }
}
#leistungen .h2.type-2, #leistungen h2.type-2 {
  margin-bottom: 41px;
  padding-right: 0;
}
@media (min-width: 576px) {
  #leistungen .h2.type-2, #leistungen h2.type-2 {
    margin-bottom: 51px;
    padding-right: 1.5%;
  }
}
@media (min-width: 992px) {
  #leistungen .h2.type-2, #leistungen h2.type-2 {
    margin-bottom: 64px;
    padding-right: 3%;
  }
}
#leistungen .h3, #leistungen h3 {
  margin-bottom: 72px;
  font-size: 32px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #leistungen .h3, #leistungen h3 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #leistungen .h3, #leistungen h3 {
    margin-bottom: 90px;
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #leistungen .h3, #leistungen h3 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #leistungen .h3, #leistungen h3 {
    margin-bottom: 113px;
    font-size: 38px;
  }
}
@media (min-width: 1200px) {
  #leistungen .h3, #leistungen h3 {
    font-size: 45px;
  }
}
@media (min-width: 1400px) {
  #leistungen .h3, #leistungen h3 {
    font-size: 53px;
  }
}
@media (min-width: 1728px) {
  #leistungen .h3, #leistungen h3 {
    font-size: 60px;
  }
}
#leistungen .h3.type-2, #leistungen h3.type-2 {
  margin-bottom: 41px;
}
@media (min-width: 576px) {
  #leistungen .h3.type-2, #leistungen h3.type-2 {
    margin-bottom: 51px;
  }
}
@media (min-width: 992px) {
  #leistungen .h3.type-2, #leistungen h3.type-2 {
    margin-bottom: 64px;
  }
}
#leistungen .leistungen-bg {
  padding-bottom: 19px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue2.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}
@media (min-width: 576px) {
  #leistungen .leistungen-bg {
    padding-bottom: 24px;
  }
}
@media (min-width: 992px) {
  #leistungen .leistungen-bg {
    padding-bottom: 30px;
  }
}
#leistungen .video-container {
  padding-bottom: 74px;
}
@media (min-width: 576px) {
  #leistungen .video-container {
    padding-bottom: 92px;
  }
}
@media (min-width: 992px) {
  #leistungen .video-container {
    padding-bottom: 115px;
  }
}
#leistungen .video-container .youTubeVideo {
  position: relative;
  background-size: cover;
}
@media (min-width: 768px) {
  #leistungen .video-container .youTubeVideo {
    width: 70.5%;
    margin-left: 29.5%;
  }
}
#leistungen .video-container .youTubeVideo a {
  outline: none;
}
#leistungen .video-container .youTubeVideo .load-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 20%;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  background: rgba(52, 78, 100, 0.6);
  backdrop-filter: blur(4px);
}
@media (min-width: 576px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 14%;
  }
}
@media (min-width: 768px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 7%;
  }
}
@media (min-width: 992px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 15%;
  }
}
@media (min-width: 1200px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 20%;
  }
}
@media (min-width: 1400px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 25%;
  }
}
@media (min-width: 1728px) {
  #leistungen .video-container .youTubeVideo .load-overlay {
    padding: 0 30%;
  }
}
#leistungen .video-container .youTubeVideo:focus-within {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#leistungen #accordionLeistungen {
  width: 100%;
  margin-left: 0;
}
@media (min-width: 768px) {
  #leistungen #accordionLeistungen {
    width: 81%;
    margin-left: 19%;
  }
}
@media (min-width: 992px) {
  #leistungen #accordionLeistungen {
    width: 73%;
    margin-left: 27%;
  }
}
@media (min-width: 1200px) {
  #leistungen #accordionLeistungen {
    width: 63.5%;
    margin-left: 36.5%;
  }
}
#leistungen #accordionLeistungen .accordion-item {
  background-color: transparent;
  border: none;
  border-top: 1px solid #344e64;
  border-radius: 0;
  color: #344e64;
}
#leistungen #accordionLeistungen .accordion-header {
  border-radius: 0;
}
#leistungen #accordionLeistungen .accordion-header .accordion-button {
  padding-top: 24px;
  padding-bottom: 44px;
  padding-left: 0;
  padding-right: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  background-color: transparent;
  color: #344e64;
  border-radius: 0;
}
@media (min-width: 499px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 41px;
  }
}
@media (min-width: 1200px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 39px;
  }
}
@media (min-width: 1400px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 45px;
  }
}
@media (min-width: 1728px) {
  #leistungen #accordionLeistungen .accordion-header .accordion-button {
    font-size: 50px;
  }
}
#leistungen #accordionLeistungen .accordion-header .accordion-button .content {
  display: inline-block;
  width: 90%;
}
#leistungen #accordionLeistungen .accordion-header .accordion-button .content .thin {
  font-weight: 200;
}
#leistungen #accordionLeistungen .accordion-header .accordion-button:after {
  height: 2rem;
  width: 2rem;
  background-size: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e42b2b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
#leistungen #accordionLeistungen .accordion-header .accordion-button:focus {
  box-shadow: none;
}
#leistungen #accordionLeistungen .accordion-header .accordion-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#leistungen #accordionLeistungen .accordion-body {
  margin-top: -9px;
  padding-top: 0;
  padding-bottom: 49px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #leistungen #accordionLeistungen .accordion-body {
    padding-left: calc((100% - 570px)*0.5);
    padding-right: calc((100% - 570px)*0.5);
  }
}
@media (min-width: 992px) {
  #leistungen #accordionLeistungen .accordion-body {
    padding-left: calc((100% - 514px)*0.5);
    padding-right: calc((100% - 514px)*0.5);
  }
}
#leistungen #accordionLeistungen .accordion-body p, #leistungen #accordionLeistungen .accordion-body ol, #leistungen #accordionLeistungen .accordion-body ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #leistungen #accordionLeistungen .accordion-body p, #leistungen #accordionLeistungen .accordion-body ol, #leistungen #accordionLeistungen .accordion-body ul {
    margin-bottom: 36px;
  }
}
#projekte {
  margin-top: 0;
  padding-top: 105px;
}
@media (min-width: 576px) {
  #projekte {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  #projekte {
    margin-top: 60px;
  }
}
#projekte .h2, #projekte h2 {
  margin-top: 160px;
  margin-bottom: 117px;
  font-size: 47px;
  line-height: 43px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #projekte .h2, #projekte h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 576px) {
  #projekte .h2, #projekte h2 {
    margin-top: 200px;
    margin-bottom: 146px;
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 768px) {
  #projekte .h2, #projekte h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 992px) {
  #projekte .h2, #projekte h2 {
    margin-top: 250px;
    margin-bottom: 183px;
    font-size: 69px;
    line-height: 63px;
  }
}
@media (min-width: 1200px) {
  #projekte .h2, #projekte h2 {
    font-size: 82px;
    line-height: 75px;
  }
}
@media (min-width: 1400px) {
  #projekte .h2, #projekte h2 {
    font-size: 95px;
    line-height: 87px;
  }
}
@media (min-width: 1728px) {
  #projekte .h2, #projekte h2 {
    font-size: 120px;
    line-height: 110px;
  }
}
#projekte .text {
  margin-bottom: 121px;
  padding-left: calc((100% - 660px)*0.5);
  padding-right: calc((100% - 660px)*0.5);
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #projekte .text {
    margin-bottom: 161px;
  }
}
@media (min-width: 992px) {
  #projekte .text {
    margin-bottom: 201px;
  }
}
#projekte .text b, #projekte .text strong {
  font-weight: 800;
}
#projekte .projekte-bg {
  padding-bottom: 29px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue2.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}
@media (min-width: 576px) {
  #projekte .projekte-bg {
    padding-bottom: 36px;
  }
}
@media (min-width: 992px) {
  #projekte .projekte-bg {
    padding-bottom: 45px;
  }
}
#projekte .slider-container {
  position: relative;
  top: -150px;
  padding-top: 150px;
  padding-bottom: 0.25rem;
  overflow: hidden;
}
#projekte #projekte-slider {
  margin-left: -12.5px;
  margin-right: -12.5px;
}
#projekte #projekte-slider .slick-list {
  overflow: visible;
}
#projekte #projekte-slider .slick-slide {
  position: relative;
  margin-left: 12.5px;
  margin-right: 12.5px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
  transition: color 0.35s ease;
}
#projekte #projekte-slider .slick-slide a {
  outline: none;
}
#projekte #projekte-slider .slick-slide .position {
  position: absolute;
  top: -40px;
  left: 0;
  font-family: "Akrobat", sans-serif;
  font-size: 30px;
  font-weight: 800;
}
#projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
  margin-top: 19px;
  margin-bottom: 32px;
  padding-right: 4%;
  font-family: "Akrobat", sans-serif;
  font-weight: 200;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    margin-top: 24px;
    margin-bottom: 36px;
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    margin-top: 30px;
    margin-bottom: 45px;
    font-size: 41px;
  }
}
@media (min-width: 1200px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    font-size: 39px;
  }
}
@media (min-width: 1400px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    font-size: 45px;
  }
}
@media (min-width: 1728px) {
  #projekte #projekte-slider .slick-slide .h4, #projekte #projekte-slider .slick-slide h4 {
    font-size: 50px;
  }
}
#projekte #projekte-slider .slick-slide:hover, #projekte #projekte-slider .slick-slide:focus-within {
  color: #e42b2b;
}
#projekte #projekte-slider .slick-slide:focus-within {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#projekte #projekte-slider .slick-prev {
  position: absolute;
  top: -97px;
  right: 72.5px;
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-prev.svg);
  border: none;
}
@media (min-width: 576px) {
  #projekte #projekte-slider .slick-prev {
    top: -121px;
  }
}
@media (min-width: 992px) {
  #projekte #projekte-slider .slick-prev {
    top: -151px;
  }
}
#projekte #projekte-slider .slick-prev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#projekte #projekte-slider .slick-prev[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#projekte #projekte-slider .slick-next {
  position: absolute;
  top: -97px;
  right: 12.5px;
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-next.svg);
  border: none;
}
@media (min-width: 576px) {
  #projekte #projekte-slider .slick-next {
    top: -121px;
  }
}
@media (min-width: 992px) {
  #projekte #projekte-slider .slick-next {
    top: -151px;
  }
}
#projekte #projekte-slider .slick-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#projekte #projekte-slider .slick-next[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#kontakt {
  padding-top: 100px;
  color: #fff;
  background-image: url(../img/kontakt-bg.svg);
  background-size: cover;
}
#kontakt .h2, #kontakt h2 {
  margin-top: 70px;
  margin-bottom: 35px;
  font-size: 47px;
  line-height: 43px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #kontakt .h2, #kontakt h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 576px) {
  #kontakt .h2, #kontakt h2 {
    margin-top: 88px;
    margin-bottom: 44px;
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 768px) {
  #kontakt .h2, #kontakt h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 992px) {
  #kontakt .h2, #kontakt h2 {
    margin-top: 110px;
    margin-bottom: 55px;
    font-size: 69px;
    line-height: 63px;
  }
}
@media (min-width: 1200px) {
  #kontakt .h2, #kontakt h2 {
    font-size: 82px;
    line-height: 75px;
  }
}
@media (min-width: 1400px) {
  #kontakt .h2, #kontakt h2 {
    font-size: 95px;
    line-height: 87px;
  }
}
@media (min-width: 1728px) {
  #kontakt .h2, #kontakt h2 {
    font-size: 120px;
    line-height: 110px;
  }
}
#kontakt .h3, #kontakt h3 {
  margin-bottom: 0;
  font-size: 32px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 38px;
  }
}
@media (min-width: 1200px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 45px;
  }
}
@media (min-width: 1400px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 53px;
  }
}
@media (min-width: 1728px) {
  #kontakt .h3, #kontakt h3 {
    font-size: 60px;
  }
}
#kontakt .text {
  padding-top: 35px;
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #kontakt .text {
    padding-top: 44px;
  }
}
@media (min-width: 992px) {
  #kontakt .text {
    padding-top: 55px;
  }
}
@media (min-width: 1200px) {
  #kontakt .text {
    padding-top: 0;
  }
}
#kontakt .text b, #kontakt .text strong {
  font-weight: 800;
}
#kontakt #kontakt-form {
  padding-top: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* Honeypot */
}
#kontakt #kontakt-form [aria-hidden="true"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#kontakt #kontakt-form .form {
  width: 100%;
  margin-right: auto;
}
@media (min-width: 1200px) {
  #kontakt #kontakt-form .form {
    width: 48.5%;
  }
}
#kontakt #kontakt-form .form .form-floating > .form-control, #kontakt #kontakt-form .form .form-floating > .form-control-plaintext, #kontakt #kontakt-form .form .form-floating > .form-select {
  height: 74px;
  min-height: 74px;
}
#kontakt #kontakt-form .form .form-floating > .form-control, #kontakt #kontakt-form .form .form-floating > .form-control-plaintext {
  padding: 26px 0.75rem 16px;
}
#kontakt #kontakt-form .form .form-floating > label {
  font-family: "Inter", sans-serif;
  color: #344e64;
  padding: 21px 0.75rem;
}
#kontakt #kontakt-form .form .form-floating > .form-control-plaintext ~ label, #kontakt #kontakt-form .form .form-floating > .form-control:focus ~ label, #kontakt #kontakt-form .form .form-floating > .form-control:not(:placeholder-shown) ~ label, #kontakt #kontakt-form .form .form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-1rem) translateX(0.15rem);
}
#kontakt #kontakt-form .form .form-control {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: #344e64;
  border-radius: 0;
}
#kontakt #kontakt-form .form .form-control:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#kontakt #kontakt-form .form .form-check {
  line-height: 1.3;
}
#kontakt #kontakt-form .form .form-check-input {
  position: relative;
  top: -3px;
}
#kontakt #kontakt-form .form .form-check-input:checked {
  background-color: #7892a6;
  border-color: #7892a6;
}
#kontakt #kontakt-form .form .form-check-input:focus, #kontakt #kontakt-form .form .form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#kontakt #kontakt-form .form .form-check-input.is-valid:checked, #kontakt #kontakt-form .form .was-validated .form-check-input:valid:checked {
  border-color: #198754;
}
#kontakt #kontakt-form .form .form-check-label {
  line-height: 1;
}
#kontakt #kontakt-form .form button {
  margin-top: 67px;
  margin-bottom: 101px;
  padding: 18px 28px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 36px;
  border-radius: 0;
  background-color: #e42b2b;
}
#kontakt #kontakt-form .form button:focus, #kontakt #kontakt-form .form button:hover {
  background-color: #b02a37;
}
#kontakt #kontakt-form .form button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#kontakt #kontakt-form .kontaktdaten {
  margin-top: -5px;
  width: 100%;
  font-family: "Inter", sans-serif;
  line-height: 36px;
}
@media (min-width: 1200px) {
  #kontakt #kontakt-form .kontaktdaten {
    width: 37.8%;
  }
}
#kontakt #kontakt-form .kontaktdaten p, #kontakt #kontakt-form .kontaktdaten ol, #kontakt #kontakt-form .kontaktdaten ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #kontakt #kontakt-form .kontaktdaten p, #kontakt #kontakt-form .kontaktdaten ol, #kontakt #kontakt-form .kontaktdaten ul {
    margin-bottom: 36px;
  }
}
#kontakt #kontakt-form .kontaktdaten b, #kontakt #kontakt-form .kontaktdaten strong {
  font-weight: 800;
}
#kontakt #kontakt-form .kontaktdaten a {
  color: #fff;
  text-decoration: none;
}
#kontakt #kontakt-form .kontaktdaten a:focus, #kontakt #kontakt-form .kontaktdaten a:hover {
  color: #e42b2b;
}
#kontakt #kontakt-form .kontaktdaten a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#kontakt #kontakt-form .kontaktdaten .social-media {
  margin-bottom: 101px;
  padding-top: 32px;
}
@media (min-width: 576px) {
  #kontakt #kontakt-form .kontaktdaten .social-media {
    padding-top: 40px;
  }
}
@media (min-width: 768px) {
  #kontakt #kontakt-form .kontaktdaten .social-media {
    padding-top: 50px;
  }
}
@media (min-width: 992px) {
  #kontakt #kontakt-form .kontaktdaten .social-media {
    padding-top: 62px;
  }
}
@media (min-width: 1200px) {
  #kontakt #kontakt-form .kontaktdaten .social-media {
    padding-top: 78px;
  }
}
@media (min-width: 1400px) {
  #kontakt #kontakt-form .kontaktdaten .social-media {
    padding-top: 98px;
  }
}
#kontakt #kontakt-form .kontaktdaten .social-media a {
  display: inline-block;
}
#kontakt #kontakt-form .kontaktdaten .social-media a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
#kontakt #kontakt-form .kontaktdaten .social-media a.instagram {
  border-radius: 12px;
}
#kontakt #kontakt-form .kontaktdaten .social-media a.facebook {
  border-radius: 50%;
  margin-left: 14px;
}
.projekt-navigation {
  display: flex;
  flex-direction: row;
  padding-top: 23px;
  padding-bottom: 19px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
  border-bottom: 1px solid #344e64;
}
.projekt-navigation b, .projekt-navigation strong {
  font-weight: 700;
}
.projekt-navigation .position {
  margin-right: auto;
}
.projekt-navigation a {
  color: #344e64;
  text-decoration: none;
}
.projekt-navigation a:focus, .projekt-navigation a:hover {
  color: #e42b2b;
}
.projekt-navigation a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
.projekt-intro {
  padding-top: 131px;
}
@media (min-width: 576px) {
  .projekt-intro {
    padding-top: 164px;
  }
}
@media (min-width: 992px) {
  .projekt-intro {
    padding-top: 205px;
  }
}
.projekt-intro .text {
  margin-top: 54px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
}
@media (min-width: 576px) {
  .projekt-intro .text {
    margin-top: 80px;
    margin-bottom: 34px;
    padding-left: calc((100% - 570px)*0.5);
    padding-right: calc((100% - 570px)*0.5);
  }
}
@media (min-width: 992px) {
  .projekt-intro .text {
    margin-top: 100px;
    margin-bottom: 43px;
    padding-left: calc((100% - 670px)*0.5);
    padding-right: calc((100% - 670px)*0.5);
  }
}
.projekt-intro .text b, .projekt-intro .text strong {
  font-weight: 800;
}
.projekt-intro .text p, .projekt-intro .text ol, .projekt-intro .text ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .projekt-intro .text p, .projekt-intro .text ol, .projekt-intro .text ul {
    margin-bottom: 36px;
  }
}
#shortfacts {
  padding-top: 82px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center calc(100% - 58px);
}
@media (min-width: 499px) {
  #shortfacts {
    background-position: center calc(100% - 77px);
  }
}
@media (min-width: 768px) {
  #shortfacts {
    line-height: 36px;
  }
}
@media (min-width: 576px) {
  #shortfacts {
    padding-top: 102px;
  }
}
@media (min-width: 992px) {
  #shortfacts {
    padding-top: 127px;
  }
}
#shortfacts b, #shortfacts strong {
  font-weight: 700;
}
#shortfacts p, #shortfacts ol, #shortfacts ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #shortfacts p, #shortfacts ol, #shortfacts ul {
    margin-bottom: 36px;
  }
}
#shortfacts p:last-child {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  #shortfacts p:last-child {
    margin-bottom: 36px;
  }
}
#shortfacts .h2, #shortfacts h2 {
  margin-bottom: 34px;
  font-family: "Akrobat", sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 2.4;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid #344e64;
}
@media (min-width: 576px) {
  #shortfacts .h2, #shortfacts h2 {
    margin-bottom: 42px;
    font-size: 48px;
  }
}
@media (min-width: 992px) {
  #shortfacts .h2, #shortfacts h2 {
    margin-bottom: 53px;
    font-size: 60px;
  }
}
#shortfacts .h3, #shortfacts h3 {
  margin-bottom: 14px;
  font-family: "Akrobat", sans-serif;
  font-weight: 200;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0%;
  text-transform: uppercase;
}
@media (min-width: 576px) {
  #shortfacts .h3, #shortfacts h3 {
    margin-bottom: 18px;
    font-size: 28px;
    line-height: 32px;
  }
}
@media (min-width: 992px) {
  #shortfacts .h3, #shortfacts h3 {
    margin-bottom: 22px;
    font-size: 35px;
    line-height: 40px;
  }
}
#shortfacts .g-5 {
  --bs-gutter-x: 2.2rem;
}
#shortfacts #projekt-slider {
  margin-top: 136px;
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 576px) {
  #shortfacts #projekt-slider {
    margin-top: 170px;
  }
}
@media (min-width: 992px) {
  #shortfacts #projekt-slider {
    margin-top: 213px;
    padding-left: 11.9%;
    padding-right: 11.9%;
  }
}
#shortfacts #projekt-slider img {
  clip-path: polygon(0% 13.2%, 79% 0%, 100% 13.2%, 100% 100%, 0% 100%);
}
#shortfacts #projekt-slider .img-caption {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 16px;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0;
  height: 42px;
}
@media (min-width: 499px) {
  #shortfacts #projekt-slider .img-caption {
    margin-top: 21px;
    font-size: 18px;
    line-height: 28px;
    height: 56px;
  }
}
#shortfacts #projekt-slider .img-caption b, #shortfacts #projekt-slider .img-caption strong {
  font-weight: 800;
}
#shortfacts #projekt-slider .slick-prev {
  position: absolute;
  top: calc(50% - 22px);
  left: 0;
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-prev.svg);
  border: none;
}
@media (min-width: 992px) {
  #shortfacts #projekt-slider .slick-prev {
    left: 8.2%;
  }
}
#shortfacts #projekt-slider .slick-prev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#shortfacts #projekt-slider .slick-prev[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#shortfacts #projekt-slider .slick-next {
  position: absolute;
  top: calc(50% - 22px);
  right: 0;
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-next.svg);
  border: none;
}
@media (min-width: 992px) {
  #shortfacts #projekt-slider .slick-next {
    right: 8.2%;
  }
}
#shortfacts #projekt-slider .slick-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#shortfacts #projekt-slider .slick-next[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#herausforderung {
  padding-top: 107px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
@media (min-width: 576px) {
  #herausforderung {
    padding-top: 134px;
  }
}
@media (min-width: 992px) {
  #herausforderung {
    padding-top: 171px;
  }
}
#herausforderung .h2, #herausforderung h2 {
  margin-top: 109px;
  margin-bottom: 61px;
  font-family: "Akrobat", sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (min-width: 576px) {
  #herausforderung .h2, #herausforderung h2 {
    margin-top: 136px;
    margin-bottom: 76px;
    font-size: 48px;
  }
}
@media (min-width: 992px) {
  #herausforderung .h2, #herausforderung h2 {
    margin-top: 170px;
    margin-bottom: 95px;
    font-size: 60px;
  }
}
#herausforderung .text {
  margin-bottom: 162px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
}
@media (min-width: 576px) {
  #herausforderung .text {
    margin-bottom: 202px;
  }
}
@media (min-width: 992px) {
  #herausforderung .text {
    margin-bottom: 252px;
    padding-left: calc((100% - 670px)*0.5);
    padding-right: calc((100% - 670px)*0.5);
  }
}
#herausforderung .text b, #herausforderung .text strong {
  font-weight: 800;
}
#herausforderung .text p, #herausforderung .text ol, #herausforderung .text ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #herausforderung .text p, #herausforderung .text ol, #herausforderung .text ul {
    margin-bottom: 36px;
  }
}
#herausforderung .images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#herausforderung .images .image-1 {
  width: 100%;
  margin-right: auto;
}
@media (min-width: 768px) {
  #herausforderung .images .image-1 {
    width: 35.3%;
  }
}
#herausforderung .images .image-2 {
  width: 100%;
  padding-top: 40px;
}
@media (min-width: 768px) {
  #herausforderung .images .image-2 {
    width: 63.5%;
    padding-top: 71px;
  }
}
@media (min-width: 992px) {
  #herausforderung .images .image-2 {
    padding-top: 95px;
  }
}
@media (min-width: 1200px) {
  #herausforderung .images .image-2 {
    padding-top: 114px;
  }
}
@media (min-width: 1400px) {
  #herausforderung .images .image-2 {
    padding-top: 133px;
  }
}
@media (min-width: 1728px) {
  #herausforderung .images .image-2 {
    padding-top: 166px;
  }
}
#projekt-ablauf {
  padding-top: 200px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.1px;
}
@media (min-width: 768px) {
  #projekt-ablauf {
    letter-spacing: 0;
  }
}
#projekt-ablauf b, #projekt-ablauf strong {
  font-weight: 700;
}
#projekt-ablauf p, #projekt-ablauf ol, #projekt-ablauf ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #projekt-ablauf p, #projekt-ablauf ol, #projekt-ablauf ul {
    margin-bottom: 36px;
  }
}
#projekt-ablauf ol, #projekt-ablauf ul {
  padding-left: 1.4rem;
}
#projekt-ablauf .h2, #projekt-ablauf h2 {
  margin-top: 105px;
  margin-bottom: 38px;
  font-family: "Akrobat", sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 2.4;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid #344e64;
}
@media (min-width: 576px) {
  #projekt-ablauf .h2, #projekt-ablauf h2 {
    margin-top: 131px;
    margin-bottom: 48px;
    font-size: 48px;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf .h2, #projekt-ablauf h2 {
    margin-top: 164px;
    margin-bottom: 60px;
    font-size: 60px;
  }
}
#projekt-ablauf .h3, #projekt-ablauf h3 {
  margin-top: 79px;
  margin-bottom: 22px;
  margin-left: 0;
  font-family: "Akrobat", sans-serif;
  font-weight: 200;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0%;
  text-transform: uppercase;
}
@media (min-width: 576px) {
  #projekt-ablauf .h3, #projekt-ablauf h3 {
    margin-top: 99px;
    font-size: 28px;
    line-height: 32px;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf .h3, #projekt-ablauf h3 {
    margin-top: 124px;
    margin-left: -8px;
    font-size: 35px;
    line-height: 40px;
  }
}
#projekt-ablauf .text-1 {
  margin-left: 0;
}
@media (min-width: 992px) {
  #projekt-ablauf .text-1 {
    margin-left: -8px;
  }
}
@media (min-width: 1400px) {
  #projekt-ablauf .text-1 {
    padding-right: 20%;
  }
}
@media (min-width: 1728px) {
  #projekt-ablauf .text-1 {
    padding-right: 37%;
  }
}
#projekt-ablauf .text-2 {
  margin-top: 0;
  margin-left: 0;
}
@media (min-width: 576px) {
  #projekt-ablauf .text-2 {
    margin-top: 14px;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf .text-2 {
    margin-top: 121px;
    margin-left: 5px;
  }
}
#projekt-ablauf .g-5 {
  --bs-gutter-x: 2.2rem;
}
#projekt-ablauf #projekt-ablauf-slider img {
  height: 81px;
}
@media (min-width: 768px) {
  #projekt-ablauf #projekt-ablauf-slider img {
    height: 116px;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf #projekt-ablauf-slider img {
    height: 177px;
  }
}
@media (min-width: 1200px) {
  #projekt-ablauf #projekt-ablauf-slider img {
    height: auto;
  }
}
#projekt-ablauf #projekt-ablauf-slider .slick-prev {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 17.9%;
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-prev.svg);
  border: none;
}
@media (min-width: 768px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-prev {
    left: 17.9%;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-prev {
    left: 16.7%;
  }
}
@media (min-width: 1200px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-prev {
    left: 16.8%;
  }
}
@media (min-width: 1400px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-prev {
    left: 15%;
  }
}
@media (min-width: 1728px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-prev {
    left: 15.3%;
  }
}
#projekt-ablauf #projekt-ablauf-slider .slick-prev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#projekt-ablauf #projekt-ablauf-slider .slick-prev[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#projekt-ablauf #projekt-ablauf-slider .slick-next {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(17.9% + 36px);
  height: 44px;
  width: 18px;
  padding: 0;
  text-indent: -20000px;
  background-color: transparent;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-Icon-NAV-next.svg);
  border: none;
}
@media (min-width: 576px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 25%;
  }
}
@media (min-width: 768px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 23.6%;
  }
}
@media (min-width: 992px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 21%;
  }
}
@media (min-width: 1200px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 20.5%;
  }
}
@media (min-width: 1400px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 18.7%;
  }
}
@media (min-width: 1728px) {
  #projekt-ablauf #projekt-ablauf-slider .slick-next {
    left: 19%;
  }
}
#projekt-ablauf #projekt-ablauf-slider .slick-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}
#projekt-ablauf #projekt-ablauf-slider .slick-next[aria-disabled="true"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: default;
}
#projekt-vorteile {
  margin-top: 0;
  padding-top: 105px;
  overflow: hidden;
}
@media (min-width: 576px) {
  #projekt-vorteile {
    margin-top: 34px;
  }
}
@media (min-width: 992px) {
  #projekt-vorteile {
    margin-top: 68px;
  }
}
#projekt-vorteile .h2, #projekt-vorteile h2 {
  margin-top: 34px;
  margin-bottom: 101px;
  font-size: 47px;
  line-height: 43px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 576px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    margin-top: 42px;
    margin-bottom: 126px;
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 768px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    font-size: 52px;
    line-height: 47px;
  }
}
@media (min-width: 992px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    margin-top: 52px;
    margin-bottom: 157px;
    font-size: 69px;
    line-height: 63px;
  }
}
@media (min-width: 1200px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    font-size: 82px;
    line-height: 75px;
  }
}
@media (min-width: 1400px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    font-size: 95px;
    line-height: 87px;
  }
}
@media (min-width: 1728px) {
  #projekt-vorteile .h2, #projekt-vorteile h2 {
    font-size: 120px;
    line-height: 110px;
  }
}
#projekt-vorteile .h3, #projekt-vorteile h3 {
  margin-bottom: 112px;
  font-size: 32px;
  text-transform: uppercase;
}
@media (min-width: 499px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    font-size: 28px;
  }
}
@media (min-width: 576px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    margin-bottom: 140px;
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    margin-bottom: 175px;
    font-size: 38px;
  }
}
@media (min-width: 1200px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    font-size: 45px;
  }
}
@media (min-width: 1400px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    font-size: 53px;
  }
}
@media (min-width: 1728px) {
  #projekt-vorteile .h3, #projekt-vorteile h3 {
    font-size: 60px;
  }
}
@media (min-width: 992px) {
  #projekt-vorteile .icon-container {
    height: 70px;
  }
}
#projekt-vorteile .h4, #projekt-vorteile h4 {
  margin-top: 43px;
  margin-bottom: 26px;
  padding-top: 23px;
  padding-left: 0;
  padding-right: 0;
  font-size: 28px;
  font-weight: 200;
  text-transform: uppercase;
  border-top: 1px solid #344e64;
}
@media (min-width: 499px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    margin-top: 54px;
    padding-left: calc((100% - 500px)*0.5);
    padding-right: calc((100% - 500px)*0.5);
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    margin-top: 68px;
    padding-left: calc((100% - 400px)*0.5);
    padding-right: calc((100% - 400px)*0.5);
    font-size: 41px;
  }
}
@media (min-width: 1200px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    font-size: 39px;
  }
}
@media (min-width: 1400px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    font-size: 45px;
  }
}
@media (min-width: 1728px) {
  #projekt-vorteile .h4, #projekt-vorteile h4 {
    font-size: 50px;
  }
}
#projekt-vorteile .text {
  margin-bottom: 27px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter", sans-serif;
}
@media (min-width: 576px) {
  #projekt-vorteile .text {
    margin-bottom: 34px;
    padding-left: calc((100% - 570px)*0.5);
    padding-right: calc((100% - 570px)*0.5);
  }
}
@media (min-width: 992px) {
  #projekt-vorteile .text {
    margin-bottom: 43px;
    padding-left: calc((100% - 470px)*0.5);
    padding-right: calc((100% - 470px)*0.5);
  }
}
#projekt-vorteile .text b, #projekt-vorteile .text strong {
  font-weight: 800;
}
#projekt-navigation-bottom {
  padding-top: 158px;
}
#projekt-navigation-bottom .projekt-navigation {
  margin-top: 67px;
  margin-bottom: 202px;
}
#default {
  padding-top: 105px;
  padding-bottom: 105px;
  font-family: "Inter", sans-serif;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  overflow: hidden;
}
#default .h1, #default h1, #default .h2, #default h2, #default .h3, #default h3, #default .h4, #default h4, #default .h5, #default h5, #default .h6, #default h6 {
  margin-bottom: 32px;
  font-family: "Akrobat", sans-serif;
}
@media (min-width: 768px) {
  #default .h1, #default h1, #default .h2, #default h2, #default .h3, #default h3, #default .h4, #default h4, #default .h5, #default h5, #default .h6, #default h6 {
    margin-bottom: 36px;
  }
}
#default b, #default strong {
  font-weight: 700;
}
#default p, #default ol, #default ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  #default p, #default ol, #default ul {
    margin-bottom: 36px;
  }
}
#default ol, #default ul {
  padding-left: 1.4rem;
}
#default a {
  color: #344e64;
}
#default a:focus, #default a:hover {
  color: #e42b2b;
}
footer {
  padding-bottom: 23px;
  background-image: url(../img/Das-Muenchner-Dach-Zimmerer-Dachdecker-Spengler-OVERLAY-back-blue1.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center calc(100% + 22.8vw);
  overflow: hidden;
}
footer .logo-container {
  padding-top: 128px;
  padding-bottom: 104px;
}
@media (min-width: 576px) {
  footer .logo-container {
    padding-top: 160px;
    padding-bottom: 130px;
  }
}
@media (min-width: 992px) {
  footer .logo-container {
    padding-top: 200px;
    padding-bottom: 163px;
  }
}
footer .logo-container img {
  max-width: 100%;
}
footer .h4, footer h4 {
  margin-bottom: 32px;
  padding-right: 4%;
  font-family: "Akrobat", sans-serif;
  font-weight: 200;
  font-size: 32px;
  line-height: 1.59;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid #344e64;
}
@media (min-width: 499px) {
  footer .h4, footer h4 {
    font-size: 32px;
  }
}
@media (min-width: 576px) {
  footer .h4, footer h4 {
    margin-bottom: 36px;
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  footer .h4, footer h4 {
    font-size: 32px;
  }
}
@media (min-width: 992px) {
  footer .h4, footer h4 {
    margin-bottom: 32px;
    font-size: 41px;
  }
}
@media (min-width: 1200px) {
  footer .h4, footer h4 {
    font-size: 39px;
  }
}
@media (min-width: 1400px) {
  footer .h4, footer h4 {
    font-size: 45px;
  }
}
@media (min-width: 1728px) {
  footer .h4, footer h4 {
    font-size: 50px;
  }
}
footer .kontaktdaten {
  padding-bottom: 0;
  font-family: "Inter", sans-serif;
  line-height: 36px;
}
@media (min-width: 576px) {
  footer .kontaktdaten {
    padding-bottom: 17px;
  }
}
@media (min-width: 992px) {
  footer .kontaktdaten {
    padding-bottom: 34px;
  }
}
footer .kontaktdaten p, footer .kontaktdaten ol, footer .kontaktdaten ul {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  footer .kontaktdaten p, footer .kontaktdaten ol, footer .kontaktdaten ul {
    margin-bottom: 36px;
  }
}
footer .kontaktdaten b, footer .kontaktdaten strong {
  font-weight: 800;
}
footer .kontaktdaten a {
  color: #344e64;
  text-decoration: none;
}
footer .kontaktdaten a:focus, footer .kontaktdaten a:hover {
  color: #e42b2b;
}
footer .kontaktdaten a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
footer .social-media {
  padding-bottom: 36px;
}
@media (min-width: 576px) {
  footer .social-media {
    padding-bottom: 53px;
  }
}
@media (min-width: 992px) {
  footer .social-media {
    padding-bottom: 70px;
  }
}
footer .social-media a {
  display: inline-block;
}
footer .social-media a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
footer .social-media a.instagram {
  border-radius: 12px;
}
footer .social-media a.facebook {
  border-radius: 50%;
  margin-left: 14px;
}
footer .nav {
  padding-bottom: 36px;
}
@media (min-width: 576px) {
  footer .nav {
    padding-bottom: 53px;
  }
}
@media (min-width: 992px) {
  footer .nav {
    padding-bottom: 70px;
  }
}
footer .nav .nav-item .nav-link {
  display: inline-block;
  padding: 0;
  font-family: "Inter", sans-serif;
  line-height: 36px;
  color: #344e64;
}
footer .nav .nav-item .nav-link:focus, footer .nav .nav-item .nav-link:hover, footer .nav .nav-item .nav-link.active {
  color: #e42b2b;
}
footer .nav .nav-item .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
/* text selection highlight color */
::-moz-selection {
  /* Code for Firefox */
  color: #344E64;
  background: #E42B2B;
}
::selection {
  color: #344E64;
  background: #E42B2B;
}