/*!
Theme Name: motionconcept
Theme URI: https://www.motion-concept.de
Author: webcoon
Author URI: https://webcoon.de
Description: Theme für motionconcept
Version: 1.0.0
Tested up to: 7.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: motionconcept
*/


/*--------------------------------------------------------------
# GLOBAL
--------------------------------------------------------------*/

body {
    font-family: var(--font-family), sans-serif;
	font-weight: var(--font-weight);
	line-height: 1.5em;
	font-size: var(--font-size);
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--text-color);
	background: #000;
}

.no-scroll {
	overflow: hidden;
}

*, *:after, *:before {
	box-sizing: border-box;
}

a {
	color: var(--main-color);
	text-decoration: none;
}

p a {
	color: var(--main-color);
	text-decoration: none;
}

a:hover, p a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 15px;
}

p:last-child, p:only-child {
	margin: 0;
}

input, textarea {
	box-shadow: unset;
	outline: unset;
	color: var(--text-color);
	font-family: var(--font-family), sans-serif;
	font-weight: var(--font-weight);
	line-height: 1em;
	font-size: var(--font-size);
}

strong {
	font-weight: 600;
}

img, video {
	width: 100%;
	height: auto;
	display: block;
}

::placeholder { 
	color: var(--text-color);
	opacity: 0.8; 
}

:-ms-input-placeholder { 
	color: var(--text-color);
}

::-ms-input-placeholder { 
	color: var(--text-color);
}

.overflow-hidden, .overflow-hidden body {
	overflow: hidden;
}


#content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 15px;
}

.upc {
	text-transform: uppercase;
}

.strong {
	font-weight: 600;
}

h1, .style-h1, h5, .style-h5 {
	margin: 0;
}

.fd-c {
	flex-direction: column;
}

.subline {
	margin-bottom: 10px !important;
}

.subline * {
	text-transform: uppercase;
}

.br, .br > img, .br > picture > img {
	border-radius: 15px;
}

.gap-15 {
	gap: 15px !important;
}

a.button, .menu-item.menu-button a, .cf-senden {
	padding: 14px 25px !important;
	background: var(--main-color);
	border: 0;
	border-radius: 100px;
	transition: all .3s ease;
	width: fit-content;
	display: inline-flex;
	color: #000 !important;
	text-decoration: none !important;
	line-height: 1em;
	align-items: center;
	font-size: var(--font-size) !important;
	gap: 25px;
	font-weight: 400;
}

a.button:hover, .menu-item.menu-button a:hover, .cf-senden:hover {
	opacity: .6;
}

.underline {
	position: relative;
}

.underline-wrapper {
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 100%;
  height: 25%;
  overflow: hidden;
  pointer-events: none;
}

.button-stroke {
  width: 100%;
  height: 100%;
  max-height: 14px;
  clip-path: inset(0 100% 0 0);
  display: block;
  transition: clip-path .5s ease-out .7s;
}

.row.animated .button-stroke {
  clip-path: inset(0 0 0 0);
}

/*--------------------------------------------------------------
# ELEMENTE
--------------------------------------------------------------*/

.accordion {
	display: flex;
	flex-direction: column;
	gap: 0;	
}

.accordion .accordion-element {
	overflow: hidden;
	transition: all .3s ease;
	border-bottom: 1px solid #373737 !important;
	background: unset;
  	border-radius: 0px;
}

.accordion .accordion-element .accordion-title {
	text-transform: none;
	font-weight: 600;
	font-size: var(--font-size);
	padding: 20px 30px 20px 0;
}

.accordion-element .accordion-title::after {
	border-color: #fff;
	right: 0 !important;
}

.accordion-element .accordion-content {
	padding: 0 !important;
}


/*--------------------------------------------------------------
# CONTENT
--------------------------------------------------------------*/

.hero {
	height: 90vh;
	min-height: 450px;
	max-height: 900px;
}

.hero video {
	object-fit: cover;
  	height: 100%;
}

.hero .bg-img:after {
	content:"";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 30%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.hero .bg-img:before {
	content:"";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.hero .bg-img img {
	opacity: .6;
  	z-index: -1;
  	position: relative;
}

.scrolldown {
	max-width: 50px;
	margin: -10px auto 0;
	cursor: pointer;	
}

.link-box {
	border-radius: 15px;
  	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.link-box h3 {
	font-size: 30px;
}

.link-box img {
	min-height: 480px;
	object-fit: cover;
	opacity: .5;
	transition: all .3s ease;
}

.link-box .content, .infobox.link-box:not(.add-line) .headline {
	position: absolute;
	top: 50%;
	text-align: center;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	padding: 30px;
}

.link-box .content .line {
	width: 0;
	height: 1px;
	background: #fff;
	margin: 0 auto 10px;
	transition: all .3s ease;
}

.link-box:hover .content .line {
	width: 80%;
}

.link-box .subtitel, .link-box .text {
	color: #fff;
	opacity: 0;
	transform: translateY(20px);
	transition: all .3s ease;
}

.link-box:hover .subtitel, .link-box:hover .text {
	opacity: 1;
	transform: translateY(0px);
	transition: all .3s ease .1s;
}

.link-box:hover img {
	transform: scale(1.08);
	opacity: .2;
}

.link-box.add-line.clickable h3 {
  	hyphens: auto;
}

.infobox.text-box {
	padding: 30px;
  	border-radius: 15px;
}

.infobox.text-box .headline * {
	font-size: 24px;
}


.projekte-slider{position:relative;overflow:hidden;--slide-dur:.45s;--scale-dur:.2s}
.projekte-slider .swiper-wrapper{align-items:stretch}
@media (min-width:980px){.projekt-slider-item{box-sizing:border-box;flex:0 0 400px;width:400px}}
@media (max-width:979.98px){.projekt-slider-item{box-sizing:border-box;flex:0 0 auto;width:auto}}
.projekt-slider-item>a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:600px;text-decoration:none!important;transform-origin:center bottom;transition:transform var(--scale-dur) ease;will-change:transform}
.projekt-slider-item.swiper-slide-active>a{transform:scale(1)}
@media (max-width:767.98px){.projekt-slider-item>a{transform:none}}
.projekt-slider-item .image{position:absolute;inset:0;border-radius:15px;overflow:hidden;background:#000}
.projekt-slider-item .image img{width:100%;height:100%;object-fit:cover;opacity:.4;transition:transform .4s ease,opacity .4s ease}
.projekt-slider-item>a:hover .image img{transform:scale(1.03);opacity:.25}
.projekt-slider-item .content{opacity:0;transform:translateY(4px);position:relative;z-index:1;padding:20px;margin-bottom:0;transition:opacity .18s ease,transform .18s ease,margin .18s ease}
.projekt-slider-item:not(.swiper-slide-active) .content{transition:none;opacity:0;transform:translateY(4px);margin-bottom:0}
.projekt-slider-item.swiper-slide-active .content{opacity:1;transform:translateY(0);margin-bottom:20px;transition-delay:.1s}
@media (max-width:767.98px){.projekt-slider-item .content{transition:opacity .12s ease,transform .12s ease,margin .12s ease}.projekt-slider-item.swiper-slide-active .content{transition-delay:.06s}}
.projekt-slider-item .content .line{width:100%;height:1px;background:#fff;margin-bottom:10px}
.projekt-slider-item .content .headline *{font-size:26px}
.projekt-slider-item .content .subtitel{color:#fff}
.projekte-slider .swiper-button-next{right:15px;border-color:#fff}
.projekte-slider .swiper-button-prev{left:15px;border-color:#fff}
.projekte-slider .swiper-button-next::before,.projekte-slider .swiper-button-prev::before{border-right:1px solid #fff;border-top:1px solid #fff}
.projekte-slider .swiper-button-disabled{opacity:0;visibility:hidden;pointer-events:none}
.projekt-slider-item:last-child{margin-right:0!important}



.placeholder-video img {
	border-radius: 15px !important;
}

.embed-iframe iframe {
	border-radius: 15px !important;
	overflow: hidden;
}

.galerie-slider img {
	border-radius: 15px !important;
}

.galerie-slider-pagination {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
}



.icons.icons-list {
	flex-direction: column;
}

.icons.icons-list .icon {
	position: relative;
	text-align: left;
	gap: var(--el-spacing);
	display: grid;
  	grid-template-columns: 30px 1fr;
	max-width: unset;
}

.icons.icons-list.check .icon {
	gap: calc(var(--el-spacing) / 2);
}

.icons.icons-list.check {
	gap: 20px;
}

.icons.icons-list.icons-usp .icon {
	display: grid;
  	grid-template-columns: 70px 1fr;
}

.icons.icons-list.icons-usp ._image {
	background: #fff;
	border-radius: 100%;
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icons.icons-list ._image img {
	max-width: 35px;
  	max-height: 35px;
}

.icons.icons-list.icons-usp .icon:not(:last-child):after {
	content:"";
	left: 35px;
	top: 80px;
	border-left: 1.5px dashed #000;
	min-height: calc(100% - 30px);
	position: absolute;
	opacity: .3;
}

.icons.icons-list ._headline {
	font-size: var(--font-size);
	font-weight: 600;
}


/*--------------------------------------------------------------
# DEMO VIDEO
--------------------------------------------------------------*/

.mc-no-scroll{overflow:hidden;}

#mc-video-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:999999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
#mc-video-overlay.is-open{pointer-events:auto;}
#mc-video-overlay.is-visible{opacity:1;}

#mc-video-overlay .mc-modal{
  position:relative;
  width:calc(100vw - (clamp(16px, 2vw, 50px) * 2));
  max-width:calc(100vw - (clamp(16px, 2vw, 50px) * 2));
  max-height:calc(100vh - (clamp(16px, 2vw, 50px) * 2));
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(.96);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  will-change:transform, opacity;
}
#mc-video-overlay .mc-modal.animate-in{transform:scale(1);opacity:1;}
#mc-video-overlay .mc-modal.animate-out{transform:scale(.96);opacity:0;}

#mc-video-overlay .mc-media{
  width:100%;
  display:block;
}

#mc-video-overlay .mc-html5{
  width:100%;
  height:auto;
  max-height:calc(100vh - (clamp(16px, 2vw, 50px) * 2));
  display:block;
  background:#000;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  outline:none;
}

/* 16:9 für iFrames (Vimeo) */
.mc-embed{
  width:100%;
  display:block;
  background:#000;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  overflow:hidden;
}
.mc-embed-16x9{
  aspect-ratio:16/9;
}
.mc-embed iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}

#mc-video-overlay .mc-close{
  position:absolute;
  top:clamp(16px, 2vw, 50px);
  right:clamp(16px, 2vw, 50px);
  width:40px;
  height:40px;
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
}
#mc-video-overlay .mc-close::before,
#mc-video-overlay .mc-close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:70%;
  background:#fff;
  border-radius:1px;
  transform-origin:center;
}
#mc-video-overlay .mc-close::before{transform:translate(-50%,-50%) rotate(45deg);}
#mc-video-overlay .mc-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
#mc-video-overlay .mc-close:focus-visible{outline:2px solid #fff; outline-offset:2px;}

#mc-video-overlay{cursor:zoom-out;}
#mc-video-overlay .mc-modal,
#mc-video-overlay .mc-modal *{cursor:auto;}




/*--------------------------------------------------------------
# REVIEW
--------------------------------------------------------------*/

.reviews-row {
	border-radius: 30px;
  	overflow: hidden;
  	padding: 80px 50px;
}

.swiper-rev {
	margin-bottom: 0 !important;
}

.google-reviews-overview {
    text-align: center;
	margin-bottom: 10px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.google-reviews-overview .overall-stars {
    color: #fad407;
    display: flex;
    margin: auto;
    justify-content: center;
}

.google-reviews-overview .overall-stars .star {
    font-size: 30px;
  	line-height: 14px;
	  height: 20px;
}

.overall-review {
	display: flex;
	gap: 5px;
	align-items: center;
}

.overall-review .google {
	font-weight: 600;
	margin-left: 5px;
}

.review-stars {
    display: flex;
    color: #fad407;
    font-size: 16px;
}

.swiper-rev .swiper-slide {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.review-text {
    text-align: center;
	font-style: italic;
	font-size: 20px;
	max-width: 720px;
	margin: 0 auto 10px;
	line-height: 1.4em;
}

.review-author {
    display: flex;
    align-items: center;
    margin: 30px auto 0;
}

.review-infos {
	display: flex;
  	gap: 5px;
  	align-items: center;
}

.review-author img.review-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.review-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.review-date {
    font-size: 12px;
    color: #888;
	line-height: 1.2em;
}

.review-source {
    font-size: 12px;
    color: #888;
	line-height: 1.2em;
    margin-bottom: 10px;
}

.star-svg {
    margin-right: 2px;
	width: 16px;
	height: 16px;
	display: block;
}

.star-svg svg {
    width: 16px;
	height: 16px;
	display: block;
}

.star-svg.filled .star-path {
    fill: #FFD700;
}


.read-more {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}


.google-review-widget {
	display:flex;
	align-items:center;
	max-width:fit-content;
	margin: 0 auto 15px !important;
}

.google-review-widget > img {
	width: 35px; 
	margin-right: 10px;
}

.review-stars {
	display: flex;
	margin-right: 5px;
}

.review-widget-rating {
	display:flex;
	align-items:center;
	line-height:1em;
}

.review-widget-rating-count {
	font-size: 12px;
	color: #5f6368;
	line-height: 1em;
	margin-top: 6px;
}


.tour-slider .swiper-slide {
	background: var(--bg-color);
	border-radius: 15px;
	overflow: hidden;
	padding: 40px;
	width: 600px;
	max-width: 80vw;
}

.tour-slider .slide-inner {
	display: flex;
	flex-direction: column;
}

.tour-slider .swiper-slide ._image {
	order: 1;
	width: calc(100% + 80px);
	margin: -40px -40px 40px;
}

.tour-slider .swiper-slide ._title {
	order: 2;
}

.tour-slider .swiper-slide ._text {
	order: 2;
}

.tour-slider .swiper-slide ._title *{
	font-size: 24px;
}

.tour-slider .swiper-button-next, .tour-slider .swiper-button-prev {
	bottom: -44px;
	top: unset;
	z-index: 999;
}


/*--------------------------------------------------------------
# GRID
--------------------------------------------------------------*/

.projekte-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.projekte-filter ul li a {
	color: #fff;
	border: 1px solid #fff;
	padding: 12px 20px;
	border-radius: 100px;
	line-height: 1em;
	text-decoration: none !important;
	display: flex;
}

.projekte-filter ul li a.active, .projekte-filter ul li a:hover {
	background: var(--main-color);
	border: 1px solid var(--main-color);
	color: #000;
}

.projekte-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.projekt-item .image {
	padding-bottom: 63.3%;
}

.projekt-item .image img {
	position: absolute;
	height: 100%;
	object-fit: cover;
}


/*--------------------------------------------------------------
# PROJEKT
--------------------------------------------------------------*/

.projekt-kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.projekt-kategorie {
	border: 1px solid #777;
	color: #777;
	padding: 8px 12px;
	border-radius: 100px;
	text-decoration: none !important;
	font-size: 14px;
  	line-height: 1.2em;	
}

.projekt-kategorie:hover {
	color: var(--bg-color);
	background: #777;
}

.auszaehlung {
	margin-top: 20px;
}

.auszaehlung li {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff3;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
}

.auszaehlung li::before {
	content: "";
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZmZmZicgZD0nTTIwLjYxNCA1LjY0OWExIDEgMCAwIDEgLjA4NCAxLjQyMkwxMC4xODQgMTguNzRhMSAxIDAgMCAxLTEuNDI4LjA1OGwtNi4wODQtNS43MjdhMS4wMDggMS4wMDggMCAwIDEtLjA5LTEuMzYgMS4wMDggMS4wMDggMCAwIDEgMS40NTUtLjEyNmw0LjcyIDQuMjQ2YTEgMSAwIDAgMCAxLjQxMi0uMDc0bDkuMDQzLTEwLjAyN2ExIDEgMCAwIDEgMS40MDItLjA4MnonLz48L3N2Zz4=");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: center;
	display: flex;
	border-radius: 100%;
	margin-top: 1px;
	border: 1px solid #fff3;
}

/*--------------------------------------------------------------
# KONTAKT
--------------------------------------------------------------*/

.box {
	flex: 0 0 calc((100% / 12 * 6 - var(--spacing) * 6 / 12 * var(--gap-factor)) + var(--spacing)) !important;
	z-index:3;
	border-radius:20px
}

.icons-kontakt.icons {
	display:block
}

.icons-kontakt.icons .icon {
	display:block;
	max-width:unset;
	text-align:left;
	margin-bottom:35px;
	position:relative;
	padding-left:50px
}

.icons-kontakt.icons .icon ._image {
	position:absolute;
	left:0;
	width:30px;
	max-height:38px;
	top:50%;
	transform:translateY(-50%)
}

.icons-kontakt.icons .icon ._headline {
	font-size:var(--font-size)!important;
	font-weight:600;
	line-height:1.5em
}

.datenschutz .cf-auswahlfeld-name {
	display: none !important;
}

.contactform .datenschutz label.checkbox > .label-titel .label-name {
  font-size: 14px !important;
  line-height: 1.4em !important;
}


/*--------------------------------------------------------------
# LEISTUNGEN
--------------------------------------------------------------*/

.col.leistungen{
  --h:clamp(380px,28vw,520px);
  --sep:clamp(8px,.9vw,12px);
  --padX:clamp(16px,1vw,22px);
  --padY:clamp(16px,1vw,22px);
  --speed:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --Wactive:.40;
  --Winactive:.15;
  --lift:3rem;
  display:flex;
  gap:0px;
  align-items:stretch;
  container-type:inline-size;
  background:#000;
}

.col.leistungen>.infobox.leistung{
  position:relative;
  flex:0 0 20%;
  height:var(--h);
  overflow:hidden;
  background:#000;
  transition:flex-basis var(--speed) var(--ease);
  border-radius: 15px;
  padding: 15px;
  border:2.5px solid #000;
  cursor: pointer;
  --ov:.3;
  --delayHead:0ms;
  --delayText:0ms;
  --gl:0;
}

.col.leistungen>.infobox.leistung:last-child{ --gr:0 }

.col.leistungen>.infobox.leistung .image{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:calc(var(--Wactive) * 100cqw);
  transform:translateX(-50%);
  z-index:0;
}

.col.leistungen>.infobox.leistung .image picture,
.col.leistungen>.infobox.leistung .image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.col.leistungen>.infobox.leistung .image::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:calc(var(--Wactive) * 100cqw);
  transform:translateX(-50%);
  background:rgba(0,0,0,var(--ov));
  z-index:1;
  pointer-events:none;
  transition:background var(--speed) var(--ease);
}

.col.leistungen>.infobox.leistung .image::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:
    linear-gradient(#000,#000) right center/ var(--gr) 100% no-repeat,
    linear-gradient(#000,#000) left  center/ var(--gl) 100% no-repeat;
  z-index:2;
  pointer-events:none;
}

.col.leistungen>.infobox.leistung .headline{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:3;
  color:#fff;
  transform:translateY(0);
  opacity:1;
  transition:transform var(--speed) var(--ease),opacity 220ms var(--ease);
  transition-delay:var(--delayHead),0ms;
  pointer-events:none;
}

.col.leistungen>.infobox.leistung .headline h3{
  margin:0;
  font-size: 22px;
  line-height:1.2;
  letter-spacing:.2px;
  white-space: nowrap;
  text-align: center;
}

.col.leistungen>.infobox.leistung .text{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:3;
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 280ms var(--ease),transform 280ms var(--ease);
  transition-delay:var(--delayText),var(--delayText);
  pointer-events:none;
  text-align: center;
}

.col.leistungen>.infobox.leistung .text p{
  margin:0;
  font-size: var(--font-size);
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-height:calc(2 * 1.35em);
}

@media (min-width:981px){
	.col.leistungen:has(.infobox.leistung:hover)>.infobox.leistung{
	flex-basis:calc((100% - 4*5px) * var(--Winactive));
	--ov:.6;
	--delayHead:0ms;
	--delayText:0ms;
	}

	.col.leistungen:has(.infobox.leistung:hover)>.infobox.leistung:hover{
	flex-basis:calc((100% - 4*5px) * var(--Wactive));
	--ov:.3;
	--delayHead:calc(var(--speed)*.10);
	--delayText:var(--speed);
	}

	.col.leistungen:has(.infobox.leistung:hover)>.infobox.leistung:not(:hover) .headline{
	opacity:0;
	transform:translateY(6px);
	}

	.col.leistungen:has(.infobox.leistung:hover)>.infobox.leistung:hover .headline{
	transform:translateY(calc(-1 * var(--lift)));
	}

	.col.leistungen:has(.infobox.leistung:hover)>.infobox.leistung:hover .text{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
	}

	.col.leistungen:has(.infobox.leistung:focus-within)>.infobox.leistung{
	flex-basis:calc((100% - 4*5px) * var(--Winactive));
	--ov:.6;
	--delayHead:0ms;
	--delayText:0ms;
	}

	.col.leistungen:has(.infobox.leistung:focus-within)>.infobox.leistung:focus-within{
	flex-basis:calc((100% - 4*5px) * var(--Wactive));
	--ov:.3;
	--delayHead:calc(var(--speed)*.10);
	--delayText:var(--speed);
	}

	.col.leistungen:has(.infobox.leistung:focus-within)>.infobox.leistung:not(:focus-within) .headline{
	opacity:0;
	transform:translateY(6px);
	}

	.col.leistungen:has(.infobox.leistung:focus-within)>.infobox.leistung:focus-within .headline{
	transform:translateY(calc(-1 * var(--lift)));
	}

	.col.leistungen:has(.infobox.leistung:focus-within)>.infobox.leistung:focus-within .text{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
	}

	.col.leistungen:not(:has(.infobox.leistung:hover)):not(:has(.infobox.leistung:focus-within)) .infobox.leistung .text{
	opacity:0;
	transform:translateY(8px);
	transition:none;
	}
}

@media (max-width:980px){
  .col.leistungen>.infobox.leistung{ flex-basis:calc((100% - 5px)/2) }
  .col.leistungen > .infobox.leistung .image { width: 100%;}
  .col.leistungen > .infobox.leistung .image::after { width: 100%;}
  .col.leistungen>.infobox.leistung .headline > * {font-size: 22px;}

  .col.leistungen{ flex-direction:column }
  .col.leistungen>.infobox.leistung{
    flex:1 1 auto;
    height:clamp(320px,58vw,520px) !important;
    --ov:.3;
  }
  .col.leistungen>.infobox.leistung .headline{ transform:none; opacity:1; transition-delay:0ms; bottom: 75px; }
  .col.leistungen>.infobox.leistung .text{ opacity:1 !important; transform:none; pointer-events:auto; transition-delay:0ms }
  
}

@media (prefers-reduced-motion:reduce){
  .col.leistungen>.infobox.leistung,
  .col.leistungen>.infobox.leistung .headline,
  .col.leistungen>.infobox.leistung .text{
    transition:none;
  }
}


/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

#footer {
	margin: auto 0 0;
	color: #fff;
}

#footer a {
	color: #fff;
}

#footer .custom-logo {
	width: auto;
	max-width: 240px;
}

#footer .headline {
	margin-bottom: 20px;
}

#footer .style-h5 {
	font-family: 'main-font';
	font-size: 16px;
	font-weight: 400;
	color: var(--sub-color) !important;
	line-height: 1.3em;
	margin-bottom: 0px;
	text-transform: uppercase;
}

.socials {
	display: flex;
	gap: 15px;
}

.socials img {
	max-height: 20px;
}

.footer-row {
	display: grid !important;
	grid-template-columns: 1.5fr .8fr 1fr 1.3fr;
}

#footer ul.menu {
    list-style: none;
    padding-left: 0;
	margin: 0;
}

#footer ul.menu li {
    margin-bottom: 10px;
}

#footer ul.menu li a {
    position: relative;
    display: flex;
	align-items: center;
	gap: 15px !important;
}

#footer ul.menu li a::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7.811" height="14.121" viewBox="0 0 7.811 14.121"><path id="Vector" d="M0,0,6,6,0,12" fill="none" stroke="%23d7e3e6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>');
    width: 8px !important;
  	height: auto;
}

#menu-footer {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#menu-footer a {
	font-size: 20px;
	line-height: 1em;
}

.row.copyright {
	border-top: 1px solid #333;
	padding-top: calc(var(--spacing) / 3);
	color: var(--sub-color) !important;
}





/*--------------------------------------------------------------
# POPUP
--------------------------------------------------------------*/

.popup {
	position: fixed;
	width: 100vw;
	z-index: 9999;
  	background: #fff8;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 50px;
	display: flex;
	opacity: 0;
  	visibility: hidden;
	transition: all .2s ease .15s;
}

.popup.active {
	opacity: 1;
	visibility: visible;
	backdrop-filter: blur(2px);
	transition: all .3s ease;
}

.popup-inner {
	max-width: 600px;
	background: #fff;
	border-radius: 30px;
	padding: 50px;
	box-shadow: 0 0 40px #0003;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	outline: 0;
	margin: auto;
	transform: translateY(80px);	
	transition: transform .5s ease;
}

.popup.active .popup-inner {
	transform: translateY(0px);
}

.popup ._close {
	width: 30px;
	height: 30px;
	opacity: 1;
	cursor: pointer;
	position: absolute;
	right: 25px;
	top: 25px;
}

.popup ._close::before, .popup ._close::after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 30px;
	width: 2px;
	border-radius: 5px;
	background-color: #000;
}

.popup ._close::before {
	transform: rotate(45deg);
}

.popup ._close::after {
    transform: rotate(-45deg);
}

.popup .hidden {
	display: none !important;
}

.popup .contactform {
	margin-top: 20px;
}

.popup .headline {
	margin-bottom: 20px;
}



/*--------------------------------------------------------------
# SONSTIGES
--------------------------------------------------------------*/

#CookieBoxTextHeadline {
  	font-size: 28px !important;
}

#BorlabsCookieBox ._brlbs-h3 {
	font-family: 'sub-font' !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--main-color) !important;
	line-height: 1.3em !important;
}

#BorlabsCookieBox ._brlbs-btn {
	font-weight: 400;
	font-size: 15px !important;
	text-transform: uppercase;
	padding: 15px !important;
	line-height: 1em;
	border-radius: 0 !important;
}

#BorlabsCookieBox ._brlbs-bar-advanced ul, #BorlabsCookieBox ._brlbs-box-advanced ul {
	justify-content: flex-start !important;
	margin-top: 20px !important;
}


._brlbs-cb-googlemaps {
	margin-top: calc(-600px - var(--el-spacing));
}

._brlbs-google-maps {
	width: 100%;
	height: 600px;
}

._brlbs-google-maps ._brlbs-thumbnail {
	height: 100%;
	object-fit: cover;
	opacity: .4;
}

._brlbs-google-maps ._brlbs-caption {
	background: #94987c !important;
	color: #fff;
	max-width: 600px;
	margin: auto !important;
	right: 0;
	padding: 30px 40px !important;
}

._brlbs-google-maps ._brlbs-caption a:not(._brlbs-btn) {
	color: #fff !important;
	text-decoration: underline;
  }

._brlbs-google-maps ._brlbs-btn {
	background: #fff !important;
	border-radius: 0 !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	padding: 12px 30px !important;
	color: var(--sub-color) !important;
}

.brlbs-cmpnt-btn, .brlbs-cmpnt-font-semibold {
	font-weight: 500 !important;
}

.brlbs-cmpnt-container .brlbs-justify-between {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.overflow-auto .brlbs-mt-4 {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.datenschutz-text h3 {
	font-size: 24px;
	margin: 40px 0 20px;
}

#content .add-padding {
	padding: 100px 0 !important;
}

.datenschutz h2 {
	font-size: 28px;
	margin-top: 60px;
}

.datenschutz h3 {
	font-size: 22px;
	margin-top: 35px;
	margin-bottom: 10px;
}

.datenschutz h4 {
	font-family: var(--font-family), sans-serif;
	font-size: var(--font-size);
	font-weight: 600;
	color: var(--text-color);
	line-height: 1.3em;
	margin: 25px 0 5px;
}


/*--------------------------------------------------------------
# ERROR
--------------------------------------------------------------*/

#content > #error {
	min-height: calc(100vh - var(--header-height));
	padding: 60px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;	
}

.error-content {
	max-width: 600px;
}

.error-404 {
	font-size: 50px;
	line-height: 1.2em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.error-text {
	font-size: 30px;
	line-height: 1.2em;
	font-weight: 600;
	margin: 15px 0 20px;
}




/*--------------------------------------------------------------
# RESPONSIVE
--------------------------------------------------------------*/


@media all and (max-width: 980px) {

	.i-h-f {
		height: unset !important;
	}

	#content .box {
		margin: 0 !important;
		margin-top: calc(var(--spacing) / 2) !important;
		padding: calc(var(--spacing) / 2) !important;
		flex: auto !important;
		order: 2;
	}

	#content .box a {
		color: var(--bg-color) !important;
	}

	.contact {
		display: block !important;
	}

	.contact-link {
		justify-content: center;
		margin-bottom: 15px;
		font-size: 20px !important;
	}

	.contact-link--trenner {
		display: none;
	}

	.order-1 {
		order:1;
	}

	.order-2 {
		order:2;
	}

	.img-mw-150 {
		max-width: 150px;
	}

	.leistungen-slider .swiper-navigation {
		top: -40px;
	}

	.m-t-m {
		margin-top: calc(0.5 * var(--spacing)) !important;
	}


	.posts-grid {
		display: grid;
		grid-template-columns: 1fr;
	}

	#footer .row-4 {
		align-items: flex-start;
		gap: 30px;
	}

	.big-col-container {
		margin-left: 0;
		width: unset !important;
	}

	#footer .row-4 .big-col .row {
		display: flex;
		gap: 15px;
		flex-direction: column;
	}


	.w-bg .bg-img {
		width: calc(var(--width) + 10%);
	}

	.row.w-bg {
		width: calc(var(--width) + 10%);
	}

	.footer-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	.copyright {
		opacity: 1 !important;
		visibility: visible !important;
	}

	#newsletter {
		flex-wrap: wrap;
		background: unset;
	}

	#newsletter input {
		background: #fff;
		border-radius: 100px;
	}

	.row.copyright .footer-links {
		justify-content: center;
	}

	.m-b-0 {
		margin-bottom: 0 !important;
	}

	.full .mw {
		padding: 0 7vw;
	}
	
	.projekt-slider-item:last-child {
		margin-right: 7vw !important;
	}

	.projekt-slider-item a {
		height: 450px;
	}

	.projekt-slider-item {
		max-width: unset !important;
	}

	.m-t-a {
		margin-top: auto !important;
	}
	
	.m-b-a {
		margin-bottom: auto !important;
	}

	.hero {
		height: 75vh;
	}

	.review-text {
		font-size: 16px;
	}

	.link-box h3 {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.menu-button {
		border: 0 !important;
	}

	h4, .style-h4 {
		letter-spacing: 1px;
	}

	.footer-inner {
		padding: 10px 0 40px;
	}

	.contact-link {
		margin-bottom: 10px;
	}

	.footer-copyright--right {
		display: flex;
		justify-content: center;
		gap: 6px 30px;
		flex-wrap: wrap;
	}

	.footer-copyright--right .pflichtseiten-link {
		margin-right: 0 !important;
	}

	.footer-inner--left, .footer-copyright {
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright--hinweis {
		text-align: center;
	}

	.footer-copyright--left {
		padding-top: 15px !important;
		order: 2;
	}



	.accordion-title {
		padding-right: 30px !important;
  		line-height: var(--line-height) !important;
	}

	.accordion-title:after {
		right: 5px !important;
	}


	.icons-kontakt.icons .icon ._headline, .icons-kontakt.icons .icon ._headline a {
		font-size: 18px;
		font-weight: 400;
		line-height: 1.2em;
		color: var(--main-color);
	}

	.icons-kontakt.icons .icon ._text {
		font-size: var(--font-size);
		line-height: 1.2em;
		margin-top: 5px;
	}

	.icons-kontakt.icons .icon ._image {
		width: 20px;
		max-height: 30px;
	}

	.icons-kontakt.icons .icon {
		margin-bottom: 30px;
		padding-left: 38px;
	}

	.img-col {
		gap: 15px;
	}


	.copyright {
		gap: 15px;
	}

	.copyright .col {
		justify-content: center !important;
	}


	.popup {
		padding: 15px;
	}

	.popup-inner {
		padding: 50px 30px;
	}

	.contactform-container .step-body .cf-element {
		margin-bottom: 10px;
		width: 100%;
	}

	.label-box .cf-auswahlfeld-input {
		background: var(--grey-bg);
		width: calc(50% - 5px);
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
		margin-right: 0px;
		overflow: hidden;
	}

	.label-box .horizontal {
		justify-content: space-between;
	}

	.label-box .label-titel {
		width: 100%;
		justify-content: center;
	}

	.label-box .label-titel .label-name {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.label-img img {
		height: 100%;
		width: 70%;
		margin: auto;
		object-fit: contain;
	}

	.horizontal .cf-auswahlfeld-input {
		white-space: nowrap;
	}

	.step-foot {
		padding-top: 20px;
	}


	.projekte-container {
		grid-template-columns: 1fr;
	}


}


@media (max-width: 460px) {

	.headline * {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
	}

	.swiper-cat .title {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		font-size: 14px;
		line-height: 1.3em;
		display: block;
	}

	body {
		hyphens: auto;
	}

	.nummern {
		display: none !important;
	}

	.accordion-title {
		line-height: 1.2em !important;
		padding-left: 20px;
		padding-right: 40px !important;
	}

	.accordion-content {
		padding: 0px 20px !important;
	}

}