/* Base */
body{
  margin:0;
  font-family:'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* font-size: 2.5rem; */
  font-size: 20px;
  color: #13357A;
  font-weight: 300;
  line-height:1.5;
}
.home main {
  max-width: 1920px;
  padding: 0;
}
main {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
main .content-wrapper {
  padding: 60px 130px;
}
p {
  margin: 0 0 40px;
}
ul {
  margin-top: 0;
}
ul li p {
  margin: 0;
}
h1.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}
h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
}
.page-content {
  padding-right: 250px;
}

/* Container */
.container {
  /* max-width:1920px;margin:0 auto; */
}
.btn{display:inline-block;background:#3b82f6;color:#fff;padding:.6rem 1rem;border-radius:.25rem;text-decoration:none;}

/* Header overlay on hero */
.site-header{
  position:relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
}
.home .site-header nav a {
  color:#13357A;
}
.site-header nav a{
  font-size: 20px;
  margin:0;
  padding:0 40px;
  color:#fff;
  text-decoration:none;
}

.home header .site-logo {
  position: absolute;
  right: 250px;
  top: 125px;
  z-index: 1;
}
.home header .site-logo img {
  width: 285px;
  height: auto;
}
header .site-logo img {
  position: absolute;
  right: 130px;
  bottom: -240px;
}
header .site-logo img {
  width: 178px;
  height: auto;
}

/* Hero */
.hero{position:relative;}
.hero-home {
  position:relative;
  width: 100%;
  height: 100%;
  min-height: 964px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__slides img{width:100%;height:auto;display:block}
.hero__text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 0 0 330px;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.hero__headline {
  font-size: 24px;
  font-weight: 300;
  line-height: 33px;
}
.hero__headline p {
  padding: 0;
  margin: 0;
}
 .hero__subheadline {
  font-size:50px;
  line-height: 60px;
  font-weight: 300;
  padding: 0;
  margin: 0;
}
.hero__subheadline strong {
  font-weight: 700;
}
.hero__subheadline p {
  margin: 0;
  padding: 0;
}
.home .split-slider__title {
  font-size: 50px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  padding: 0 0 0 80px;
}
.home .split-slider__media {
  justify-content: center;
  align-items: center;
  right: auto;
  top: auto;
  margin-right: 100px;
  margin-top: -150px;
  position: relative; 
  --arrow-offset: 50px;
}
.split-slider__media {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
  --arrow-offset: 50px;
}
.home .split-slider__media .slider {
  width: 850px;
  height: 529px;
}
/* .home .slider__prev, .home .slider__next { z-index: 20; } */
.slider__prev { left: calc(var(--arrow-offset) * -1); }
.slider__next { right: calc(var(--arrow-offset) * -1); }

/* Generic page header image (non-home) */
.page-hero{
  width:100%;
  height:530px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media (max-width: 1024px){
  .page-hero{height:300px}
}

/* Mobile (always) navigation */
.menu-toggle{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);
  width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  background:#f3a83f;box-shadow:0 6px 22px rgba(0,0,0,.2);z-index:60
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;transform:translate(-50%,-50%)
}
.menu-toggle__bars::before{transform:translate(-50%,-8px)}
.menu-toggle__bars::after{transform:translate(-50%,6px)}
.menu-open .menu-toggle__bars{background:transparent}
.menu-open .menu-toggle__bars::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-open .menu-toggle__bars::after{transform:translate(-50%,-50%) rotate(-45deg)}

.mobile-menu[hidden]{display:none}
.mobile-menu{
  position:fixed;left:50%;top:72px;transform:translateX(-50%);
  padding:0;z-index:55
}
.mobile-menu__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
  background: #ffffffab;
}
.home .mobile-menu__item {
  border-bottom: 1px solid #13357A;
  font-size: 1.25rem;
}
.home .mobile-menu__item:first-child {
  border-top: 1px solid #13357A;
}
.mobile-menu__item:first-child {
  border-top: 1px solid #fff;
}
.mobile-menu__item { 
  border-bottom: 1px solid #fff;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 10px 0;
  transition: opacity 0.3s ease;
  font-size: 1.25rem;
}
.mobile-menu__item:hover,
.mobile-menu__item.active-nav {
  background: #F0B150;
}
.mobile-menu__item a{text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.03em;color:#0f172a}
.mobile-menu__item a:hover{opacity:.8}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:0; margin:0 0 100px;}
.split--rev{direction:rtl}
.split--rev > *{direction:ltr}
.split__media{display:flex;justify-content:center;align-items:center}
.split__media img{width:100%;height:auto;display:block;}
.split__text {
  padding: 0 40px;
}
.split__text h2{margin:0 0 .5rem 0}

/* Bullets */
.bullets{padding:2rem}
.bullets h2{margin:0 0 .75rem 0}
.bullets ul{margin:0;padding-left:1.25rem}

/* Generic slider */
.slider{position:relative; overflow:hidden; width:var(--slider-w,560px); height:var(--slider-h,360px)}
.slider__track{display:flex; transition:transform .4s ease; height:100%}
.slider__slide{flex:0 0 100%;height:100%}
.slider__slide img{display:block;width:100%;height:100%;object-fit:cover}
.slider__prev,.slider__next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:transparent;border:none;border-radius:0;
  width:50px;height:50px;display:grid;place-items:center;cursor:pointer;
  box-shadow:none;z-index:20
  color:transparent;
}
/* .slider__prev{left:-36px}
.slider__next{right:-36px} */
.slider__prev::before,.slider__next::before{
  content:'';position:absolute;left:50%;top:50%;
  width:16px;height:16px;border:3px solid rgba(255,255,255,.95);
  border-top:0;border-right:0;transform:translate(-50%,-50%) rotate(45deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.slider__next::before{transform:translate(-50%,-50%) rotate(-135deg)}
/* Hover/Focus states */
.slider__prev:hover,.slider__next:hover,
.slider__prev:focus-visible,.slider__next:focus-visible{
  background:rgba(255,255,255,.12);border-radius:999px;outline:none
}
.slider__dots{display:none !important}

/* Responsive */
@media (max-width: 1024px){
  .split{grid-template-columns:1fr;gap:1.25rem}
  .slider{width:100%;height:auto;aspect-ratio:16/10}
  .slider__prev{left:6px}.slider__next{right:6px}
  .home .split-slider__media { --arrow-offset: 6px; }
}

/* Callout */
.callout{padding:2rem;background:#f1f5f9;border-radius:.5rem;margin:2rem}
.callout .btn{margin-top:1rem}

/* Rich */
.home .rich{
  padding:0 130px;
  margin:0 0 100px;
}
.rich{
  padding:0;
  margin:0;
}

/* Form section */
.formsec{padding:4rem 2rem;background-size:cover;background-position:center}
.formsec h2{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.formsec__subtitle{color:#fff;max-width:60ch;margin:.5rem 0 1rem 0;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.formsec__form{background:rgba(255,255,255,.9);padding:1rem;border-radius:.5rem;max-width:720px}
.formsec__form input,.formsec__form textarea{width:100%;padding:.5rem .75rem;margin:.35rem 0;border:1px solid #cbd5e1;border-radius:.25rem}

/* Footer */
footer {
  width:100%;
  max-width:1920px;
  margin:0 auto;
  padding: 0;
}
.home .footerwrap {
  padding-top:40px;
}
.footerwrap {
  padding:100px 130px 40px;
  background-size:cover;
  background-position:center;
}
footer .footer__text h2 {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin: 0;
}
.footer__content{
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}
.footer__meta {
  text-align: center;
  font-size:1.25rem;
  color:#fff;
  margin: 0;
  border-bottom: 1px solid #fff;
}
.footer__meta p {
  padding:0;
  margin:0 0 20px;
}

.footer__menu {
  margin:20px 0 0;
}
.footer__menu ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  color: #fff;
  justify-content: center;
}
.footer__menu ul li:first-child::after {
  content:'/';
  margin:0 10px;
}
.footer__menu ul li a {
  color: #fff;
  text-decoration: none;
}
.footer__menu ul li a:hover {
  text-decoration: underline;
}

/* References (gallery) */
.referenzen .refs {
  padding: 0 120px;
  margin: 100px 0 0;
}
.refs__filters{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin:0 0 24px;
}
.btn--chip{
  background:#13357A;
  color: #fff;
  border: none;
  padding: 6px 12px;
  line-height: 1;
  text-transform: none;
  font-size: 100%;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
}
.btn--chip.is-active{background:#8389B9}
.refs__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:60px
}
@media (max-width: 1200px){
  .refs__grid{grid-template-columns:repeat(2,1fr)}
}
.refs__item{
  overflow:hidden;
  opacity:1;
  transform:scale(1);
  transition:opacity .25s ease, transform .25s ease;
  margin: 0;
  padding: 0;
}
.refs__item.is-hidden{opacity:0;transform:scale(.98)}
.refs__item img{
  display:block;
  width:100%;
  height:100%;
  max-height: 450px;
  min-height: 450px;
  object-fit:cover;
  cursor: pointer;
}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
.lb.is-open{display:flex;animation:lb-fade .2s ease}
.lb__img{max-width:90vw;max-height:90vh;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb__close,.lb__prev,.lb__next{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:34px;cursor:pointer;padding:10px}
.lb__close{top:24px;right:24px;transform:none;font-size:28px}
.lb__prev{left:24px}
.lb__next{right:24px}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}

/* Footer form – layout and look like mockup */
footer .footer__contact {
  margin: 100px 0 200px;
}
footer .footer__contact form{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "name   email  message"
    "phone  company message"
    "submit submit submit";
  column-gap: 30px;
  row-gap: 40px;
  align-items:end;
  width:100%;
  max-width: 1000px;
}
footer .footer__contact input,
footer .footer__contact textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.85);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.2;
  padding: 10px 0;
  width: 100%;
  outline: none;
}
footer .footer__contact input::placeholder,
footer .footer__contact textarea::placeholder{
  color: rgba(255,255,255,.9);
}
footer .footer__contact [name="name"]{ grid-area: name; }
footer .footer__contact [name="email"]{ grid-area: email; }
footer .footer__contact [name="phone"]{ grid-area: phone; }
footer .footer__contact [name="company"]{ grid-area: company; }
footer .footer__contact [name="message"]{
  font-family:'Open Sans', sans-serif;
  grid-area: message;
  min-height: 100px;
  border: none;
  background: rgba(255,255,255,.92);
  color: #13357A;
  padding: 14px 16px;
}
footer .footer__contact textarea::placeholder {
  color: #13357A;
  }
footer .footer__contact button[type="submit"]{
  grid-area: submit;
  justify-self: center;
  background: #fff;
  color:#6DA4D3;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.3rem;
  padding: 10px 35px;
  border: 0;
  border-radius: 15px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .4s ease
}
footer .footer__contact button[type="submit"]:hover{
  background: #6DA4D3;
  color:#fff;
}

/* Page Dienstleistungen */
.dienstleistungen .container section {
  margin: 0 0 60px;
}
.dienstleistungen .container section .split {
  margin: 0;
}
.dienstleistungen .split__text {
  padding: 0;
}
.dienstleistungen #block-1 {
  width: 70%;
}

.dienstleistungen #block-2,
.dienstleistungen #block-3 {
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: start;
}
.dienstleistungen #block-2 .split__media .slider {
  width: 100%;
  height: 445px;
}
.dienstleistungen #block-2 .split__text .split-slider__media .slider {
  width: 100%;
  height: 830px;
}

.dienstleistungen #block-3 .split__media .slider {
  width: 100%;
  height: 530px;
}
.dienstleistungen #block-3 .split__text {
  margin: 150px 0 0;
}

.dienstleistungen #renovationen .block-3_text {
  width: 70%;
}
.dienstleistungen .footerwrap {
  background-position: 0% 100%;
}

.dienstleistungen #block-2 ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  gap: 10px 20px;
  flex-direction: row;
  flex-wrap: wrap;
}
.dienstleistungen #block-2 ul a {
  background: #13357A;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0 10px;
  transition:transform .4s ease
}
.dienstleistungen #block-2 ul a:hover {
  background: #8389B9;
}

.dienstleistungen #renovationen .dual-sliders .split-slider__media:first-child {
  width:30%;
  margin-top: 150px;
}
.dienstleistungen #renovationen .dual-sliders .split-slider__media:last-child {
  width: 55%;
}
.dienstleistungen .dual-sliders .split-slider__media:first-child .slider {
  width: 100%;
  height: 530px;
}
.dienstleistungen .dual-sliders .split-slider__media:last-child .slider {
  width: 100%;
  height: 530px;
}

.dienstleistungen #um-und-neubauten .block-3_text {
  padding: 0 0 0 45%;
}

.dienstleistungen .dual-sliders {
  display: flex !important;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}
.dienstleistungen #um-und-neubauten .dual-sliders .split-slider__media {
  padding:0;
  width: 55%;
}
.dienstleistungen #um-und-neubauten .dual-sliders .split-slider__media:last-child {
  margin:150px 0 0;
  width:30%;
}

.dienstleistungen #naturfarben {
  margin: -50px 0 0 0;
  width: 55%;
}

.dienstleistungen #tapeten {
  margin: -100px 0 0 55%;
}

.dienstleistungen #farb-und-materialkonzepte {
  margin: -50px 0 0 0;
  width: 55%;
}

/* Page Uber Mich */
.uber-mich .split__text {
  padding: 0;
}
.uber-mich .split__text img {
  width: 100%;
  height: auto;
}
.uber-mich #block-1,
.uber-mich #block-2 {
  display: flex;
  align-items: start;
  flex-direction: row;
  margin: 0;
  padding: 0;
  gap: 60px;
}
.uber-mich #block-1 .split__text:first-child {
  width: 30%;
}
.uber-mich #block-1 .split__text:last-child {
  width: 70%;
}
.uber-mich #block-1 .split__text:last-child img {
  margin-top: 150px;
}
.uber-mich #block-2 .split__text:first-child {
  width: 60%;
}
.uber-mich #block-2 .split__text:last-child {
  width: 40%;
  margin-top: 50px;
}

/* Page kontakt */
.kontakt .split__text img {
  width:100%;
}
.kontakt #block-2 {
display: flex;
align-items: start;
flex-direction: row;
margin: 100px 0 0;
padding: 0;
gap: 60px;
}
.kontakt #block-2 .split__text {
width: 50%;
padding: 0;
}

@media (max-width: 1200px){
  footer .footer__contact form{
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "phone"
      "company"
      "message"
      "submit";
  }
}

/* Responsive 1080 */
@media screen and (min-width: 1280px) and (max-width: 1919px) {
  .home header a.site-logo {
    right: 40px;
    top: 100px;
  }
  header a.site-logo img {
    right: 100px;
  }
  .home header a.site-logo img {
    right: 0;
    bottom: unset;
  }  
  .home .hero__text {
    padding: 0 0 0 40px;
  }
  .home h1.split-slider__title {
    padding: 0;
  }
  .home section.rich {
    padding: 0 40px;
  }

  main div.content-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }

  .referenzen section.refs {
    padding: 0;
  }

  section.footerwrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (min-width: 1050px) and (max-width: 1279px) {
   body h2 {
    font-size: 2.3rem;
  }
  
  .home div.hero__subheadline {
    font-size: 40px;
    line-height: 50px;
  }
  .home h1.split-slider__title {
    font-size: 40px;
    line-height: 1.2;
  }
  .home section.split {
    display: flex;
  }
  .home .split .split__text {
    width: 30%;
  }
  .home .split .split-slider__media {
    margin-right: 0;
    width: 50%;
  }
  .home header a.site-logo {
    right: 40px;
    top: 100px;
  }
  .home .split-slider__media div.slider {
    width: auto;
    height: 400px;
  }
  header a.site-logo img {
    right: 100px;
  }
  .home header a.site-logo img {
    right: 0;
    bottom: unset;
    width: 200px;
  }  
  .home .hero__text {
    padding: 0 0 0 40px;
  }
  .home h1.split-slider__title {
    padding: 0;
  }
  .home section.rich {
    padding: 0 40px;
  }

  main div.content-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }

  .referenzen section.refs {
    padding: 0;
  }

  section.footerwrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  body footer .footer__text h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  footer div.footer__contact {
    width: 90%;
    margin: 100px 0;
  }
  footer .footer__contact [name="message"] {
    width: 96.5%;
  }
}

@media screen and (min-width: 600px) and (max-width: 1049px) {
  .mobile-menu__list {
    background: #ffffff;
  }

  .home .hero-home {
    min-height: 700px;
  }
  
  button.menu-toggle {
    left: 40px;
    top: 40px;
    transform:none ;
  }
  nav.mobile-menu {
    left: 0;
    transform: none;
    top:85px;
  }
  
  body h2 {
   font-size: 2.3rem;
 }
 
 .home div.hero__subheadline {
   font-size: 40px;
   line-height: 50px;
 }
 .home h1.split-slider__title {
   font-size: 30px;
   line-height: 1.1;
 }
 .home section.split {
   padding: 0 40px; 
 }
 .home .split .split__text {
   width: 100%;
   padding: 0;
 }
 .home .split .split-slider__media {
  margin: 0 auto;
   width: 100%;
 }
 .home header a.site-logo {
   right: 40px;
   top: 40px;
 }
 .home .split-slider__media div.slider {
   width: auto;
   height: 400px;
 }
 header a.site-logo img {
   right: 40px;
   bottom: unset;
   top: 40px;
   width: 150px;
 }
 .home header a.site-logo img {
   right: 0;
   bottom: unset;
   width: 150px;
   top:0;
 }  
 .home .hero__text {
   padding: 0 40px;
 }
 .home h1.split-slider__title {
   padding: 0;
   text-align: center;
 }
 .home section.rich {
   padding: 0 40px;
 }

 main div.content-wrapper {
   padding-left:40px;
   padding-right:40px;
 }

 .referenzen section.refs {
   padding: 0;
 }
 
 .dienstleistungen section#block-2,
 .dienstleistungen section#block-3 {
  display: block;
}
.dienstleistungen section#block-2 .split__media .slider {
  height: auto;
}
.dienstleistungen #block-2 div.split__media {
  margin-bottom: 60px;
}
.dienstleistungen section#block-2 .split__text .split-slider__media .slider {
  height: auto;
}

.dienstleistungen section#renovationen .block-3_text {
  width: 100%;
  display: block;
}
.dienstleistungen div.dual-sliders {
  display: block !important;
  width: 100%;
}
.dienstleistungen section#renovationen .dual-sliders .split-slider__media:first-child {
  width: 100%;
  margin-top: 60px;
}
.dienstleistungen section#renovationen .dual-sliders .split-slider__media:last-child {
  width: 100%;
  margin-top: 60px;
}

.dienstleistungen section#um-und-neubauten .block-3_text {
  padding: 0;
}
.dienstleistungen section#um-und-neubauten .dual-sliders .split-slider__media {
  padding: 0;
  width: 100%;
}
.dienstleistungen section#um-und-neubauten .dual-sliders .split-slider__media:last-child {
  margin: 60px 0 0;
  width: 100%;
}
.dienstleistungen section#naturfarben {
  margin: 0;
  width: 100%;
}
.dienstleistungen section#tapeten {
  margin: 0;
}
.dienstleistungen section#farb-und-materialkonzepte {
  margin: 0;
  width: 100%;
}

div.page-content {
  padding-right: 0;
}
.referenzen section.refs {
  margin: 60px 0 0;
}
figure.refs__item img {
  max-height: 250px;
  min-height: 250px;
}

main div.content-wrapper {
  padding: 40px;
}

 section.footerwrap {
   padding-left:40px;
   padding-right:40px;
 }

 body footer .footer__text h2 {
   font-size: 2.5rem;
   line-height: 3rem;
 }

 footer div.footer__contact {
   width: 90%;
   margin: 100px 0;
 }
 footer .footer__contact [name="message"] {
   width: 96.5%;
 }
}

@media screen and (min-width: 300px) and (max-width: 599px) {
  .mobile-menu__list {
    background: #ffffff;
  }

   header.site-header nav a {
    color: #13357a;
  }

   section.page-hero {
    height: 200px;
  }

  .home .hero__headline {
    font-size: 18px;
    line-height: 25px;
  }

  .home .hero-home {
    min-height: 600px;
  }
  
  button.menu-toggle {
    left: 20px;
    top: 20px;
    transform:none ;
  }
  nav.mobile-menu {
    left: 0;
    transform: none;
    top:85px;
  }

  section.split {
    margin: 0 0 60px;
  }
  
  body h2 {
   font-size: 24px;
 }
 
 .home div.hero__subheadline {
   font-size: 24px;
   line-height: 34px;
 }
 .home h1.split-slider__title {
   font-size: 24px;
   line-height: 34px;
 }
 .home section.split {
   padding: 0 20px; 
 }
 .home .split .split__text {
   width: 100%;
   padding: 0;
 }
 .home .split .split-slider__media {
  margin: 0 auto;
   width: 100%;
 }
 .home header a.site-logo {
   right: 20px;
   top: 20px;
 }
 .home .split-slider__media div.slider {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
 }
 header a.site-logo img {
   right: 20px;
   bottom: unset;
   top: 20px;
   width: 100px;
 }
 .home header a.site-logo img {
   right: 0;
   bottom: unset;
   width: 100px;
   top:0;
 }  
 .home .hero__text {
   padding: 0 20px;
 }
 .home h1.split-slider__title {
   padding: 0;
   text-align: center;
 }
 .home section.rich {
   padding: 0 20px;
   margin: 0 0 60px;
 }

 main div.content-wrapper {
   padding-left:40px;
   padding-right:40px;
 }

 .referenzen section.refs {
   padding: 0;
 }
 
 .dienstleistungen section#block-2,
 .dienstleistungen section#block-3 {
  display: block;
}
.dienstleistungen section#block-2 .split__media .slider {
  height: auto;
}
.dienstleistungen #block-2 div.split__media {
  margin-bottom: 60px;
}
.dienstleistungen section#block-2 .split__text .split-slider__media .slider {
  height: auto;
}

.dienstleistungen section#renovationen .block-3_text {
  width: 100%;
  display: block;
}
.dienstleistungen div.dual-sliders {
  display: block !important;
  width: 100%;
}
.dienstleistungen section#renovationen .dual-sliders .split-slider__media:first-child {
  width: 100%;
  margin-top: 60px;
}
.dienstleistungen section#renovationen .dual-sliders .split-slider__media:last-child {
  width: 100%;
  margin-top: 60px;
}

.dienstleistungen section#um-und-neubauten .block-3_text {
  padding: 0;
}
.dienstleistungen section#um-und-neubauten .dual-sliders .split-slider__media {
  padding: 0;
  width: 100%;
}
.dienstleistungen section#um-und-neubauten .dual-sliders .split-slider__media:last-child {
  margin: 60px 0 0;
  width: 100%;
}
.dienstleistungen section#naturfarben {
  margin: 0;
  width: 100%;
}
.dienstleistungen section#tapeten {
  margin: 0;
}
.dienstleistungen section#farb-und-materialkonzepte {
  margin: 0;
  width: 100%;
}

.kontakt section#block-2 {
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: 0;
}
.kontakt section#block-2 .split__text {
  width: 100%;
}

div.page-content {
  padding-right: 0;
}
div.refs__grid {
  gap: 20px;
}
.referenzen section.refs {
  margin: 60px 0 0;
}
figure.refs__item img {
  max-height: 200px;
  min-height: 200px;
}

.uber-mich section#block-1,
.uber-mich section#block-2 {
  flex-direction: column;
  gap: 0;
}
.uber-mich section#block-1 .split__text:first-child,
.uber-mich section#block-1 .split__text:last-child,
.uber-mich section#block-2 .split__text:first-child,
.uber-mich section#block-2 .split__text:last-child {
  width: 100%;
}

.uber-mich section#block-1 .split__text:last-child img,
.uber-mich section#block-2 .split__text:last-child {
  margin-top: 0;
}

main div.content-wrapper {
  padding: 20px;
}

.content-wrapper h1.page-title {
  font-size: 30px;
}

.dienstleistungen section#block-3 .split__media .slider,
body.dienstleistungen .dual-sliders .split-slider__media:first-child .slider,
body.dienstleistungen .dual-sliders .split-slider__media:last-child .slider {
  width: 100%;
  height: auto;
}
.dienstleistungen section#block-3 .split__text {
  margin: 60px 0 0;
}

 section.footerwrap {
   padding-left:20px;
   padding-right:20px;
   padding-top: 20px;
  padding-bottom: 20px;
 }

 body footer .footer__text h2 {
  font-size: 24px;
  line-height: 34px;
 }

 footer div.footer__contact {
   width: 100%;
   margin: 60px 0;
 }
 footer .footer__contact [name="message"] {
   width: 90%;
 }

 footer .footer__menu ul {
  font-size: 1rem;
}
}