/*
Theme Name: Hybrid
Theme URI: http://werbestudio-hild.de
Author: Werbestudio Hild
Description: Hybrid FSE Theme
Version: 1.0
*/

/* WP Gallery Block Fix: Display all Images same height */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
  object-fit: cover;
  }
  .wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
  }
  
  /* @media(max-width:1200px){
      .wp-block-columns.is-layout-flex {
          padding: 20px;
      }
  } */

 .wp-block-image, 
 .wp-block-image img{
    transition: all 1s;
  }

html, body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", sans-serif;
    scroll-behavior: smooth;
    /* overflow-x:hidden; */
    overflow-wrap: unset;
    word-break: unset;
    hyphens: auto;
}

p{hyphens:auto;}

strong {
    font-weight: bolder;
}

p,ul,li{
    font-size:22px;
    font-weight:100;
    font-family: "Open Sans", sans-serif;
}

a{
    text-decoration: none;
    color:#111;
}

.scrolloffset {scroll-margin-top: 200px;}
.wp-block-button{transition: all 1s;}

.wp-block-button .wp-block-button__link:where(.is-style-outline), .wp-block-button:where(.is-style-outline)>.wp-block-button__link {
    border: 1px solid;
    padding: 0.667em 1.333em;
}

.wp-block-button:hover{letter-spacing:2px;}

.alignwide{
    /* width:1400px; */
    margin: 0 auto;
}

.gap0{gap: 0;}

/* @media(max-width:1399px){
    .alignwide{width:100vw; padding: 0 40px;}
} */

h1,h2,h3,h4,h5,h6, .hsmall{
    line-height: 1.5;
    font-family: "Manrope", serif;
    /* font-family: "Jost", serif;
    font-family: "Nunito Sans", serif;
    font-family: "Lora", serif;
    font-family: "Quicksand", serif; */
    font-weight:900;
    margin:0;
}

h1{font-size:50px;}
h2{font-size:40px;}
h3{font-size:30px;}

p#headline {
  font-weight: 900;
  line-height: 1.3;
}

footer{position:relative;width:100vw;overflow:hidden;}

.footer-content{
  position: relative;
  z-index: 2;
}

footer p, footer a{
  font-size:18px;
}

footer .wp-block-social-links{
  margin: 0;
}

#return-to-top, #iconphone, #iconmail {
  opacity: 0;
  position: fixed;
  right: 20px;
  bottom: 110px;
  z-index: 2;
  cursor: pointer;
  background-color: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  padding: 15px 22px;
  text-align: center;
  width:20px;
  border-radius: 50%;
}

#iconphone{
    bottom: 250px;
    background-color: #fff;
    color: #111;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#iconmail{
    bottom: 180px;
    background-color: #fff;
    color: #111;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#return-to-top i{color:#111;}

/* Breakpoint WP anpassen / einspaltig schon ab 900px*/

@media (min-width: 782px) and (max-width:900px){
  .wp-block-columns {flex-wrap: wrap!important;}
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {flex-basis: 100%!important;}
}

@media (max-width: 900px){
  .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
      grid-template-columns: 1fr;
  }
}

/* Custom Tabs */
.tab{padding-top: 20px;}
.tab button {
  display: block;
  background-color: transparent;
  color: #ccc;
  width: 90%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 25px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: inherit;
  position: relative;
}

.tab button.active {
  font-weight: 700;
  color: #444;
  padding-left:20px;
}

.tab .wp-block-button .wp-block-button__link{
  font-size:18px;
}

.tab .wp-block-button:hover{
  letter-spacing: 0;
}

.tab .wp-block-button:hover .wp-block-button__link{
  background-color:#d02d2db0;
  color: #fff;
}

.tablinks.acb .wp-block-button__link{
  background-color:#d02d2d;
  color: #fff;
}


.tabcontent {
  position: relative;
  top: 0;
  min-height: 439px;
  width: 100%;
  padding: 0;
  opacity: 0;
  transition: 2s ease opacity;
  border-left: 10px solid #d02d2d;
  padding-left: 20px;
}

.tabcontent.defaultOpen{
  display:block;
  opacity:1;
}

.hsmall{
  position: relative;
  font-weight:700;
}
.hsmall:after {
  content: "";
  width: 250px;
  height: 5px;
  background-color: #d02d2d;
  position: absolute;
  left: -20px;
  top: 34px;
}

.slick-dots li button:before {
  font-size: 11px;
}

.menu-item.active a {
  /* border-bottom: 3px solid #e3031e; */
  font-weight:800!important;
}


/* Boxed Overlay Tabs */
.targetDiv {
  position: fixed;
  top: 120px;
  left: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
  color: #111;
  width: 100vw;
  max-width: 100vw;
  height: calc(100vh - 120px);
  overflow: scroll;
  background: #fff;
  display: none;
}
.contentinner {
  height: 100%;
  padding: 150px 0;
}
.closecontent {
  cursor: pointer;
  position: absolute;
  right: 10%;
  top: 10vh;
  z-index: 2;
}
.bshowSingle{
  cursor:pointer;
  border: 1px solid #ccc;
  transition: all 1s;
}
.bshowSingle:hover{
  transform: scale(0.95);
}

/* Tabs Plugin */
.plethoraplugins-sidenavjump li a.active {
  border-left-color: #676767 !important;
}

/* .js-plethoraplugins-tabs--link.active span{
  color:#d02d2d!important;
} */

@media(max-width:900px){
  .plethoraplugins-sidenavjump{
    flex-basis: 100%!important;
    padding-left: 20px!important
  }
  .plethoraplugins-tabs--content.plethoraplugins-sidenavjump-content{
    flex-basis: 100%!important;
    padding:20px!important;
  }
}

.closecontent2{
  cursor: pointer;
}


.closecontent2 p{
  transition: all 0.5s;
}


.closecontent2:hover p{
  letter-spacing: 2px;
}

.iconafter{position:relative;}
.iconafter svg{
  position: absolute;
  margin-top: 46px;
  width: 50vw;
  height: 50vh;
  left: 0%;
}

/* #stage:after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40vh 0 0 100vw;
  border-color: transparent transparent transparent #1c2831;
  transform: rotate(0deg);
  left: 0;
  position: absolute;
  z-index: 0;
  bottom: 0;
} */

/* Mega Menü */
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
  margin-top: 5px;
}

.widget_media_image img{
  width: 100%;
  aspect-ratio: 3 / 2;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, 
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  color: white;
  font-family: inherit;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 300;
  text-align: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  border: 0;
}

.textwidget p{
  font-size:18px;
  margin: 0;
}

/*  */

#stage{position:relative;}

/* Scroll Down */
/* scroll down arrows */
.arrows_container {
  position: absolute;
  bottom: -50px;
  left: calc(50% - 20px);
  display: block;
  margin: 0 auto;
  width: 40px;
  height: 31px;
}

.chevron {
  position: absolute;
  width: 59px;
  height: 6px;
  opacity: 0;
  transform: scale3d(1, 2, 3);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50.5%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 5px;
}

.chevron:after {
  right: 0;
  transform: skew(0deg, -30deg);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 5px;
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

.teamslider .slick-dots li button:before {
  color: #272d35;
}

.teamslider .slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #272d35;
}

#karriere .wp-block-columns{
  margin:0;
}

.teamslider .slick-dots {
  bottom: -50px;
}



#kundenstimmen .slick-nav{margin-top: 5px;}
#kundenstimmen .slick-prev, .slick-next {
  display: block;
  background: #272d35;
  position: absolute;
  left: 0;
  bottom: -180px;
  width: 70px;
  height: 100px;
  margin: 1px;
  text-align: center;
  padding: 25px 0;
  cursor: pointer;
  top: auto;
}

#kundenstimmen .slick-next {
  left: 45px;
}

#kundenstimmen .slick-prev:before, #kundenstimmen .slick-next:before {
    font: var(--fa-font-solid);
    color: #fff!important;
    opacity: 1!important;
    font-size: 2em;
    text-align: center;
}
#kundenstimmen .slick-prev:before {content: "\f104";}
#kundenstimmen .slick-next:before {content: "\f105";}
#kundenstimmen .slick-prev:hover, #kundenstimmen .slick-prev:focus, #kundenstimmen .slick-next:hover, #kundenstimmen .slick-next:focus {background: #c2c2c2}

#leistungen .wp-block-column{
  transition:all 1s;
}

/* #leistungen .wp-block-column:hover{
  transform: scale(1.1);
  cursor:pointer;
  border:1px solid #0084c6;
} */

/* #leistungen .wp-block-column:hover .wp-block-cover__background{
  opacity:0;
} */

.scrollsection{
scroll-margin-top: 150px;
}

.partnercards .wp-block-group{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  padding:20px 30px;
  min-height: 450px;
}

.partnercards p{
  font-size: 18px;
  hyphens: none;
}

.wp-block-cloudcatch-tab{
  background-color: #8dc3dc;
  color:#fff;
  padding: 20px 30px;
  border-radius: 50px;
  margin-bottom: 50px;
  cursor: pointer;
}

.wp-block-cloudcatch-tab__label{cursor: pointer;}

.wp-block-cloudcatch-tab.active {
  background-color: #0084c6;
  color:#fff;
}

.wp-block-cloudcatch-tab-content {margin-top: 50px!important;}

.wp-block-cloudcatch-tabs__container {
  -moz-column-gap: 13px;
  column-gap: 13px;
}

.wpcf7 input {
  height: 35px;
  width: 100%;
  text-indent: 10px;
  font-family: "Open Sans", sans-serif;
  font-weight:100;
  font-size: 18px;
  padding:5px;
}

.wpcf7 textarea{
  width: 100%;
  height: 250px;
  text-indent: 10px;
  font-family: "Open Sans", sans-serif;
  font-weight:100;
  font-size: 18px;
  padding-top:18px;
}

.wpcf7 .wpcf7-list-item-label{
  font-size:18px;
}

input.wpcf7-submit{
    width: 200px;
    height: 60px;
    background-color: #041e26;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    padding-left: 0;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.wpcf7-list-item{margin:0;padding:0;}

.wpcf7-not-valid-tip {
    color: #bfbfbf;
    font-size: 18px;
    font-weight: 100;
}

.fernverwartung{
  position: absolute;
  right: 30px;
  top: 62px;
  padding: 8px 20px;
  font-size: 15px;
  color: #fff;
  border-radius: 50px;
  background-color: #0085c6;
  border:1px solid #0085c6;
}

.fernverwartung:hover{
  background-color:#fff;
  color:#0085c6;
}

/* Neu */
.border-lr{
  border-left: 1px solid #83cfa8;
  border-right: 1px solid #83cfa8;
  padding: 0 30px;
}

.border-l{
  border-left: 1px solid #83cfa8;
  padding: 0 30px;
}

#header.small{
    background: #fff;
    height: 90px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#header.small #logo{
    top: -20px;
}

#header.small #navbar{
  top:18px;
  background: none;
}

.af2_form_heading_wrapper{display:none;}

.blogcardcontent{
  padding:20px 35px;
}

.btn-more{
  background: #64ba93;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 50px;
  float:left;
}

.sub-menu{
  display:none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
}

#header.small .sub-menu{
  background-color: #64ba93;
}

.sub-menu a {
  font-size: 16px !important;
}

#header.small .sub-menu a {
  color:#111!important;
}

.sub-menu li {
  display: block !important;
}

#hiddencontent{
  height: 0;
  opacity: 0;
  transition: all 1s;
}

#hiddencontent.show{
    height: auto;
    opacity: 1;
    margin-top: 30px;
}

figure.wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 20px;
}
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {transition:all 1s;}

.wp-block-query ul li:hover img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
  transform: scale(1.1);
}

/* neu */
.headerimg h3{
  position:relative;
}

.headerimg h3:before {
    position: absolute;
    left: -48px;
    top: -10%;
    width: 9px;
    height: 120%;
    background-color: #fff;
    content: "";
    transform: rotate(0deg);
}

.pricebox{
  min-height:50vh;
  padding: 54px 20px 30px 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.navbtnangebot {
    background-color: #aec90c;
    color: #fff !important;
    margin: 0 10px;
    padding: 7px 16px 11px 16px !important;
    border-radius: 50px;
}

.navbtnangebot a{
    color: #fff !important;
}

#hero .headline{
  padding:0;
  margin:0;
  line-height:1.2;
}

.borderleft{
  border-left: 1px solid #000;
  padding-left: 40px;
}

.wp-block-social-links .wp-social-link svg {
    height: 2em;
    width: 2em;
}

.blogcard{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 20px;
    padding: 20px;
}

h3.wp-block-post-title {
    font-size: 25px;
}

.wp-block-post-date {
    font-size: 18px;
}

.wp-block-read-more {
    background-color: #e5352c;
    color: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 18px;
    bottom: -50px;
    position: absolute;
    font-weight: 500;
}

.blogteaserinner{
  padding: 0 20px;
}

.blogstage{
  margin-bottom:300px;
}

.blogsecondimage{
    position: absolute;
    right: 20%;
    width: 40vw;
    height: 30vh;
    top: 20vh;
    z-index: 99;
    border: 10px solid #fff;
}

.smallmargin{
  margin-bottom: 10px;
}

.getdown{
  animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(2);
    }

    100% {
        transform: scale(0.95);
    }
}

.scrollmargintop{
  scroll-margin-top: 200px;
}

#BTimelineBlock-1 .timeline .timeline__content label {
    font-weight: 900!important;
}

.sticky{
  top:120px;
  position:sticky;
}

#sidebarwrap{
    position: fixed;
    left: 0;
    z-index: 99;
    bottom: 10%;
    width: 300px;
    background: #111;
    padding: 20px;
    padding-left: 25px;
    padding-top: 30px;
    color: #fff;
    transition: all 1s;
}

#sidebar{
  position:relative;
  padding-top: 10px;
}

#sidebar li{list-style-type:none;}

#sidebar a {
    font-size:18px;
    color: #ccc;
}

#sidebar .current-menu-item a{
  font-weight:500;
  color: #fff;
}

#sidebar .current-menu-item img{
  transition: all 0.4s;
  transform: scale(1.5);
  margin-right: 10px;
}

div#close {
    position: absolute;
    right: 0;
    top: 0;
    height: auto;
    width: 60px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

div#open {    
    position: absolute;
    right: -50px;
    height: 60px;
    width: 50px;
    background-color: #111;
    text-align: center;
    padding-top: 10px;
    display:none;
    cursor: pointer;
}

div#close svg, div#open svg{
  fill:#fff;
  width: 50px;
  height:50px;
}

.quote h4 {
    font-size:100px;
    font-weight: 100;
    line-height: 1.2;
    margin-top: 5%;
    margin-bottom:50px;
}

#leistungen .wp-block-cover .wp-block-cover__image-background{
  transition: all 1s;
}

#leistungen .wp-block-cover:hover .wp-block-cover__image-background{
  transform: scale(1.1);
}

.teaserlogo img {
    width: 70%;
    height:auto;
}

.banner h3{
    font-family: "Manrope", serif;
    font-size: 100px;
    font-weight: 100;
    line-height: 1.2;
    margin-top: 50px;
    margin-bottom: 50px;
}

.wp-block-image {
    margin: 0;
}

#navbar .current-menu-item a{
    padding-bottom:5px;
    border-bottom: 2px solid #fff;
}

#header.small #navbar .current-menu-item a{
    border-bottom: 2px solid #111;
}


@media(max-width:1800px){
  div#open{display:block; padding: 10px 0 0;}
  div#close{display:none;}

  #sidebarwrap{left: -300px; bottom:84px!important;}
}

@media(max-width:1300px){
  #leistungen .alignwide {max-width: 100%;}
}


@media(max-width:1100px){
    .wp-block-columns:where(:not(.alignfull)) {max-width: 100%!important;}
}

@media(max-width:900px){
  .lwhite{width:70%!important;}
  img.lwhite{margin-top:17px!important;}

  .wp-block-spacer {
      height: 5vw !important;
      max-height: 5rem;
  }

  .wp-block-group-is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
    padding: 0 20px;
  }

    :where(.wp-block-group.has-background) {
        padding: 20px !important;
    }

  #leistungen .wp-block-spacer{height:10px!important;}
  footer .borderleft {border-left: 0px;padding-left: 0px;}

  h1{font-size:30px;}
  h2{font-size:25px;}
  h3{font-size:20px;}

  .stage figure{width: 70%;}
  .stage p{font-size:25px!important; padding-bottom:150px;}

  #personen .wp-block-cover{min-height: 50vh!important;}
  #personen .wp-block-cover img{object-position: 72% 41%;height: 50vh;}
  #personen .wp-block-group:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:100%;}

  .quote h4 {font-size: 35px;line-height: 1.4;}

  .blogsecondimage{display:none;}
  .blogstage {margin-bottom: 20px}

  .quote{max-height:40vh!important;min-height: 0vh !important;}

  .is-layout-flow > .alignright {float: left; margin-inline-start: 0;}

  .sublogo img{height:100px!important;}

  .reversedirection{flex-direction: column-reverse;}

  .leistunglogo{width:70vw;padding-bottom:10vh;}
}

/* Jubiläum Website */

.headline strong{
  font-weight:100;
}

#leistungen h2{
    border: 1px solid #fff;
    width: 80%;
    padding: 20px 0;
}

/* Event als Overlay */
/* #event{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
} */

#event, #print, #foto, #pr {
  display: none;
  min-height: 100vh;
  padding-top:200px;
}

.overlayfixed{
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}



#eventshow, #eventhide,
#printshow, #printhide,
#fotoshow, #fotohide,
#prshow, #prhide{cursor:pointer;}

.esab__container > .wp-block-esab-accordion-child {
    border: 1px solid #ccc;
}

#multi-step-form.fw-large-container .fw-progress-bar .fw-progress-step:after {
    height: 1px;
    top: -42px;
}

#multi-step-form.fw-large-container .fw-progress-bar-container {
    margin-bottom: 55px;
}

.fw-txt-ellipsis{
    display: none !important;
}

#multi-step-form .fw-step-part-title {
    padding-bottom: 30px;
    font-size: 22px;
    font-weight: 600;
}

#multi-step-form.fw-large-container .fw-progress-bar .fw-progress-step {
    width: 10%;
}

#multi-step-form.fw-large-container .fw-progress-bar .fw-progress-step.fw-visited:after {
    height: 5px;
    top: -45px;
}

.leistungcover{
    width: 50vw;
    position: absolute;
    position:fixed;
    top: 100px;
    bottom: 0;
}

.wp-block-gb-for-slick-slider-slick-slider.arrow-border-style-circle .slick-prev, 
.wp-block-gb-for-slick-slider-slick-slider.arrow-border-style-circle .slick-next {
    border: 1px solid #000000;
}

.wp-block-gb-for-slick-slider-slick-slider.arrow-border-style-circle .slick-prev:before, 
.wp-block-gb-for-slick-slider-slick-slider.arrow-border-style-circle .slick-next:before {
    color: #111 !important;
}

.wp-block-gb-for-slick-slider-slick-slider .slick-prev {
    left: -100px !important;
}

.wp-block-gb-for-slick-slider-slick-slider .slick-next {
    right: -100px !important;
}

.slick-prev, .slick-next {
    left: auto;
    right: 100px !important;
    top: 50%;
    padding:0!important;
}

.leistungmore{
    position: absolute;
    padding: 10px;
    width: 60%;
    background: #0000005e;
    color:#fff;
}

.border-left {
    border-left: 1px solid #cb9e79;
    padding-left: 70px;
}

/* Bürgerstiftung */

.spendenbtn{
    background-color: #061e26;
    background: #fcb904;
    padding: 5px 20px 10px 20px !important;
    border-radius: 30px;
    margin-left: 20px;
}

.spendenbtn a{
    color: #fff !important;
    font-weight: 600 !important;
}

#teaser .wp-block-cover{
  border-radius:20px;
}

#news .wp-block-cover, #news .newsgroup{
  border-radius:20px;
  border-bottom: 1px solid #fcb904;
}

.mailicon .icon-container{
    margin-top: -100px;
    padding: 20px;
    width: 140px!important;
    border-radius: 50%;
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}
.icon-scroll {
    position: absolute;
    width: 40px;
    height: 70px;
    bottom: 20px;
    box-shadow: inset 0 0 0 1px #fff;
    border-radius: 25px;
}
.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}


/* img.lwhite{
    width: auto!important;
    height: 400px;
} */

#hero h2 strong{
  font-weight:800!important;
}

#hero h2 mark{
    z-index: 1;
    position: relative;
}

#hero h2 mark::before{
    content: '';
    position: absolute;
    top: 62px;
    left: -4px;
    right: 0;
    height: 40px;
    width: 300px;
    background-color: #e5352c;
    /* transform: rotate(-1.5deg); */
    z-index: -1;
    /* border-radius: 100px; */
}

/* #team strong{
      border-bottom: 5px dashed #CF2D2F;
} */

#clown img{
    position: absolute;
    width: 600px;
    right: 0;
}

/* #navbar, #desktopmenu{display:none;} */

#bignav .wp-block-cover{padding:0!important;}

#menurows .wp-block-cover:hover .wp-block-cover__image-background{
  opacity:0!important;
}

#multi-step-form{
    padding: 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

#multi-step-form .fw-step-part {
    background: #f9f9f9 none repeat scroll 0 0;
}

#socialicons{
    margin-left: auto !important;
    margin-right: auto !important;
    width: 233px;
}

/* #multi-step-form:before {
    content: "";
    position: absolute;
    top: -100px;
    width: 5px;
    height: 200px;
    z-index: -99;
    background-color: #e5352c;
    left: calc(50%);
} */

#multi-step-form .fw-wizard-buttons button, #multi-step-form .fw-wizard-buttons .fw-btn {
    height: 50px;
    padding: 0 27px;
    font-size: 16px;
    border-radius: 50px;
    color: #111!important;
    border: 1px solid #111!important;
}

#multi-step-form .fw-progress-bar .fw-progress-step.fw-active:before {
    width: 90px !important;
    height: 90px !important;
    line-height: 82px !important;
    top: -90px !important;
}

#header.small #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {color:#111;}

#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, 
  #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #111;
    padding-bottom: 20px;
    font-weight:500;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-item.mega-icon-top > a.mega-menu-link:before {
    text-align: left;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-item a.mega-menu-link:before {
  color:#e5362c;
  font-size:70px;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-item.mega-icon-top > a.mega-menu-link:before {
    text-align: left;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    text-align: left;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    text-align: left;
}

#mega-menu-wrap-header-menu .material-symbols-outlined{
    font-size: 100px;
    color: #e5362c;
}

.mega-title-below {
  padding-bottom: 20px;
}


.mega-title-below:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #444;
    position: absolute;
    bottom: 10px;
    left: 0;
}

.about-menu .mega-sub-menu .mega-menu-link:after{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #444;
    position: absolute;
    bottom: 10px;
    left: 0;
}

.portfolio-menu .mega-sub-menu{
  padding-top:20px!important;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: 0 10px;
}

/* Mobile */

@media only screen and (max-width: 1150px) {
    #mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu {width:100vw;}
    #mega-menu-wrap-header-menu .mega-menu-toggle{background-color:transparent;}
    #mega-menu-wrap-header-menu .mega-menu-toggle ~ button.mega-close:before {font-size: 50px;}
    #mega-menu-wrap-header-menu .mega-menu-toggle.mega-menu-open ~ button.mega-close {left: auto; right: 24px; top:37px;}
    #mega-menu-wrap-header-menu .mega-menu-toggle.mega-menu-open + #mega-menu-header-menu {padding: 50px;}
}

.interessiert{
  margin-bottom:0;
}

.squarebefore:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #e5352c;
    left: -50px;  
    bottom: -50px;
    z-index: 0;
}

/* Header Alternative */

#header {
    height: 100px;
    background: transparent;
    display: grid;
    place-items: center;
}

#navbar {
    position: absolute;
    top: 23px;
    left: 35vw;
    margin-right: auto;
    width: auto;
    height: 40px;
    z-index: 999;
}

.blogbtn, .kontaktbtn{
    position: absolute!important;
    padding: 0px 23px!important;
    border-radius: 20px!important;
    margin-left: 20px !important;
}

.blogbtn{right: 150px!important; background-color: #fff!important;border: 1px solid #222 !important;}
.kontaktbtn{ background-color: #e5352c!important;right:0!important;}

.blogbtn a{color: #111!important;}
.kontaktbtn a{color: #fff!important;}

a.mega-menu-link[aria-current="page"]{
  font-weight:700!important;
}

/* .kontaktbtn{
    position: absolute !important;
    right: 20px !important;
} */

@media(min-width:900px){
  /* weißer bg, schrift menü dunkel */
  .page-id-791 #header,
  .page-id-794 #header,
  .page-id-822 #header,
  .single-post #header{ 
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }

  .page-id-791 #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
  .page-id-794 #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
  .page-id-822 #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
  .single-post #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link{
      color: #111;
  }
}

/* Portfolio Filter */
/* Pojekt Filter */
  
  #sortbuttons{
    /* text-align: center; */
    list-style-type: none;
    margin: 0;
    margin-bottom: 80px;
    padding: 0;
  }
  
  #sortbuttons li{
    display: inline-block;
  }
  
  #sortbuttons  .btn-custom{
    font-size: 22px;
    font-style: normal;
    font-weight: 100;
    font-family: "Roboto Flex", sans-serif !important;;
    background-color: #222;
    border-radius: 50px;
    padding: 15px 30px;
    color: #fff;
  }
  
 #sortbuttons  .btn-custom.active{
    font-weight:800;
    background-color: #e5362c;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

  #projekte-teaser{
    display: flex;
    flex-wrap: wrap;
    border: 10px solid #fff;
  }
  
  #projekte-teaser .projectItem{
    width: 25%;
    margin-left: 0!important;
    margin-right: 0 !important;
    overflow: hidden;
  }

  .projectText{
    display:none;
  }

  .projectItemOverlay{
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
  }

  .projectItemBackground{
    background-size: cover;
    background-position: center;
    transition: all 1s;
    width: 100%;
    height: 100%;
  }


  .projectItemInner{
    height: 450px;
  }

  .projectItem:hover .projectItemBackground {
    transform: scale(1.1);
}

  .projectItemInnerText{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px 0 15px;
    width: fit-content;
    text-align: left;
  }

  .projectItemInner p{
    text-transform:uppercase;
    font-weight: 200;
  }

  .projectItemInner p, .projectItemInner h2, .projectItemInner a{
    font-family: "Roboto Flex", sans-serif !important;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    hyphens: none;
  }

  .wp-block-cover img{
    transition: all 1s;
  }

  #leistungen-teaser .wp-block-cover:hover img{
    transform: scale(1.1);
}

/* h3.wp-block-accordion-heading {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
} */

.wp-block-accordion-item {
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
    color: #666;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title{
      color: #e5342b;
}

.wp-block-accordion-heading__toggle-icon {
    font-size: 45px;
    color: #555;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    color: #e5342b;
}

#mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-item.mega-icon-top > a.mega-menu-link:before {
    margin: 0 0 20px 0;
}


/* Flip Cards */
.flip-card {
  background-color: transparent;
  width: 300px; /* Bigger size */
  height: 450px;; /* Square for your 500x500 images */
  /* perspective: 1000px; */
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d; 
  border: 1px solid #fff;
}
/* .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  cursor:pointer;
} */

.flip-card:hover {
  cursor:pointer;
}

.flip-card:hover .projectItemOverlay {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Flip Card drehen */
/* .flip-card.highlight .flip-card-inner{
  transform: rotateY(180deg);
} */


.productoverlay{
    display: none;
    opacity: 0;
    width: 60vw;
    height: auto;
    min-height: 660px;
    z-index: 99999;
    padding: 20px;
    position: fixed;
    top: 13vh;
    left: 20vw;
    overflow:hidden;
    background-color: #e5352c;
}

@media(max-width:1400px){
  .productoverlay{
    width: 80vw;
    left:10vw;
  }
}

.productoverlay-inner{
  width: 100%;
}

.productBackground {
    width: 45%;
    height: 75vh;
    background-size: cover;
    background-position: center;
    float: left;
}

.productBackground {
    width: 50%;
    height: 60vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.productText{
    width: 40%;
    margin-left: 20px;
    top: 10%;
    position: absolute;
    left: 50%;
}

.productText h2{
  font-size:40px;
}

.productText h2, .productText p{
  color:#fff;
}

.productClose{
  position:absolute;
  right:20px;
  top:20px;
}

/* Flip Card Pop-Up */
.flip-card.highlight .productoverlay{
  display: block;
  opacity:1;
}

.flip-card:hover .projectItemInnerText {
    left: 0;
    background-color: #e5352c;
}

.flip-card .cardmore{
  opacity:0;
    transition: all 1s;
    float: left;
    color: #fff;
    border-top: 1px solid #fff;
    margin-top: 10px;
    padding-top: 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card:hover .cardmore{
  opacity:1;
}

.flip-card .material-symbols-outlined{
  font-size:60px;
  color: #fff;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front img, .flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures no distortion */
}
.flip-card-back {
  transform: rotateY(180deg);
  background-color: #e5352c;
  color: #fff;
}

.flip-card-backcontent{
    width: 80%;
    margin: 0 auto;
    padding-top: 10%;
}

.flip-card-backcontent p{
  font-size: 19px;
}

.timeline-nav-button {
    background-color: #e53228!important;
    border: none!important;
}

@media(max-width:900px){
    #mega-menu-wrap-header-menu #mega-menu-header-menu{
      padding-top:100px!important;
    }

    #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {
    height: 46px;
    font-size: 21px;
  }
}

#team .wp-block-cover{
    border-radius: 50%;
}

#phoneCloseText{
    position: absolute;
    top: -12px;
    right: 54px;
    margin: 21px 18px 18px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    width: 133px;
    background-color: rgb(51 51 51);
    display: none;
    z-index: 1;
    padding: 10px;
    border-radius: 20px;
}

p{
  hyphens: none!important;
}


/* Änderungen Overlay-Box */

.productoverlay {
    display: none;
    opacity: 0;
    width: 50vw;
    height: auto;
    min-height: 60vh;
    z-index: 99999;
    padding: 20px;
    position: fixed;
    top: 13vh;
    left: 25vw;
    overflow: hidden;
    background-color: #e5352c;
}

.productoverlay-inner {
    width: 100%;
}

.productBackground {
    width: 40%;
    height: calc(100% - 60px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 20px;
    padding-bottom: 20px;
}

.productText {
    width: 40%;
    margin-left: 20px;
    top: 10%;
    position: absolute;
    left: 50%;
}
.productText p{
  font-size:18px;
}
.productText h2 {
    font-size: 30px;
}


#Desktop-Inhalt{display:block;}
#Mobiler-Inhalt{display:none;}


/* Tablet */

@media(max-width:1300px){
  #mega-menu-wrap-header-menu{margin-left: -100px;}
}

@media(max-width:1150px){
  #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {
          color: #fff;
          font-size: 30px;
          padding: 10px 0;
          font-weight: 100;
      }

  #header.small #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link {
      color: #fff;
  }

    .kontaktbtn, .blogbtn {
  position:relative!important;
  border-radius:0!important;
  padding:0!important;
  margin-left:0!important;
  }

  .blogbtn{right: 0px!important; background-color: transparent!important;border: 0!important;}
  .blogbtn a {color: #fff !important;}
  .kontaktbtn{ background-color: transparent!important;right:0!important;}


  #hero{min-height:60vh!important;}
  #hero h2{font-size: 55px!important;font-weight: 500 !important;}
  #hero h2 mark::before {top: 35%;height: 42px;width: 100%;}
  #hero h3{font-size:18px!important;margin-top:150px;}

  .arrows_container{display:none;}
}

@media(max-width:900px){
  .pagespace{
    min-height:200px!important;
  }
}

/* Mobile General */

@media(max-width:768px){


  :where(.wp-block-columns.is-layout-flex) {
      gap: 0.5em!important;
  }

  #logo, #logo-dark {
    top: 0px!important;
    left: 0px!important;
    width: 147px!important;
}

#header.small #logo{left: 22px !important;}
#header.small img.lwhite {margin-top:0!important;}
#header.small .lwhite {width: 60% !important;}


p, ul, li {font-size: 18px!important;}
h1{font-size: 25px!important;}

#hero{min-height:60vh!important;}
#hero h2{font-size: 25px!important;font-weight: 500 !important;}
#hero h2 mark::before {top: 12%;height: 34px;width:110%;}
#hero h3{font-size:18px!important;margin-top:150px;}

#leistungen-teaser .wp-block-cover{
  min-height: 30vh!important;
}

#kontaktbanner .wp-block-cover{min-height:35vh!important;}

.slick-dots {display:none!important;}
.squarebefore:before {bottom: -20px;}

.redumov{display:none;}

h3.wp-block-post-title {font-size: 22px;margin-bottom: 20px;
}
.wp-block-read-more{
    padding: 10px;
    bottom: -30px;
    right: 0;
}

}

/* Über uns */
@media(max-width:768px){
  #quote p{font-size: 28px!important;}

  .teamtreppe{min-height:50vh!important;}
  .teamtext{font-size:20px!important;}
  #teammitglieder img{
      width: 250px!important;
      height: 250px!important;
  }
  #teammitglieder .kreativkollegen img{
      width: auto!important;
      height: auto!important;
  }
}

/* Mobile Leistungen */
@media(max-width:768px){
  #benefits .items-justified-center{
    justify-content: left!important;
  }
}


/* Über uns */
@media(max-width:768px){
  #Desktop-Inhalt{display:none;}
  #Mobiler-Inhalt{display:block;}
}

/* Mobile Portfolio */
@media(max-width:1500px){
    .productText {
      width: 46%;
      margin-left: 0;
      left:46%;
  }
}

@media(max-width:1100px){
  #projekte-teaser .projectItem {
    flex: 50%;
  }
  .productoverlay {
      width: 80vw;
      left: 10vw;
  }
}

@media(max-width:768px){
  #sortbuttons { margin-bottom: 0;}

  #sortbuttons li {
    display: block;
    height: 50px;
  }

  #sortbuttons .btn-custom {
    font-size: 18px;
    padding: 12px 30px;
  }

  #displaygif{display:none;}

  .flip-card {
      height: 40vh;
      margin-bottom: 9px;
      padding: 5px;
  }

  .productoverlay {
        width: 100vw;
        left: 0;
        height: 100vh;
        top: 0;
        padding: 0;
    }

  .productBackground {
        width: calc(100% - 20px);
        height: 40%;
        margin: 10px;
        left: 0;
        top: 0;
  }

  .productText {
      width: 90%;
      margin-left: 0;
      left: 20px;
      top: 47%;
  }
  .productText h2 {
    font-size: 25px;
  }
  .productText p {
    font-size: 15px!important;
  }
  .productText .icon-container{
    width:50px!important;
  }
}