#masthead{
	width: 100%;
	top: 0px;
	position: absolute;

}

.scrolled #masthead{
	position: fixed;

}





#masthead{
	height: 160px; 

}

#mini_logo{
	display: none;
	z-index: 100;
}

@keyframes mastheadScrolled{
	from { height: 160px; }
    to   {  height: 70px; }
}

	

.scrolled #masthead{
	background: rgba(0, 116, 125, 1);
	padding-top: 0px;
	animation-name: mastheadScrolled;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;

}


.scrolled #masthead  #menu-mainmenu2 a, 
.scrolled #masthead  #menu-mainmenu a{
	text-shadow: none;
	color: #fff;
}
.scrolled #masthead .primary-navigation-wrapper{
	top: -5px;
    position: relative;
}

   



@keyframes logoScrolled{
	from { width: 180px; }
    to   {  width: 40px; }
}


#logo{
	width: 180px;
	height: 180px;
	display: block;
	position: relative;
	
}
.scrolled #masthead #logo{
	animation-name: logoScrolled;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes logoScrolled{
	from { width: 180px; height: 180px;}
    to   {  width: 40px; height: 60px;}
}

#logo img{
	display: block;
	width: 100%;
}

@keyframes biglogoScrolled{
	from { width: 100%; }
    to   {  width: 0%; }
}

.scrolled #logo{
	margin-left: 15px;
	margin-right: 15px;
}

.scrolled #masthead .desktop-logo{
	display: block;
	position: absolute;
	animation-name: biglogoScrolled;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
}


@keyframes vaseScrolled{
	from { width: 68px;  left: 32%; top: 25%;}
    to   {  width: 40px; left: 0%; top: 0%;}
}

#logo .vase{
	position: absolute;
	left: 32%;
	top: 25%;
	width: 68px;
}

.scrolled #masthead .vase{
	animation-name: vaseScrolled;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}



#logo .vase img{
	width: 100%;
}


h1.wp-block-post-title{
	color: #000 !important;
}



h1.hyphens,
h2.hyphens,
h3.hyphens,
h4.hyphens,
h5.hyphens,
h6.hyphens{
	hyphens: auto;
}
#menu-mainmenu2 a, #menu-mainmenu a{
	text-shadow: 0 0 10px #FAEBDC;
}

.leistungcarousel .box{
	overflow: hidden;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper{
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}


/*--- Navigation ---*/


#additional-top-menu{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 100%;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	padding-top: 20px;
	justify-content: center;
}
#additional-top-menu ul li a{
	font-weight: normal;
	display: block;
	line-height: 100%;
	font-size: 14px;
	padding-left: 15px;
	padding-right: 15px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: uppercase;
	letter-spacing: 4px;
}
#additional-top-menu ul li:last-child a{
	border-right: none;
}
#additional-top-menu ul li a{
	border-right: 1px solid #fff;
}



.toggle-menu {
	right: 15px;
	top: 15px;
	width: 40px;
	height: 25px;
	position: absolute;
	cursor: pointer;
	transition: 0.5s;
	display: none;
}

.toggle-menu .stroke-1,
.toggle-menu .stroke-2,
.toggle-menu .stroke-3 {
	height: 2px;
	width: 100%;
	background-color: #fff;
	position: absolute;
	transition: 0.5s;
	border-radius: 9999px;
}

.toggle-menu .stroke-1 {	
	top: 0px;
}
.toggle-menu .stroke-2 {	
	top: 50%;
	transform: translateY(-50%);
	width: 80%;
}
.toggle-menu:hover .stroke-2{
	width: 100%;
}

.toggle-menu .stroke-3 {
	bottom: 0px;
}




.close{
	color: #fff;
	border: 3px solid #fff;
	border-radius: 9999px;
	padding: 10px;
	line-height: 100%;
	width: 40px;
	height: 40px;
	text-align: center;
	text-shadow: 3px 3px rgba(0,0,0,1);
	margin: auto auto;
	cursor: pointer;
	position: fixed;
	margin-bottom: 20px;
	right: 30px;
	top: 25px;
	display: none;
	z-index: 1;
	
}
.close:after{
	content: "";
	display: block;
	height: 50%;
	width: 50%;
	position: absolute;
	background-color: #fff;
	-webkit-mask-image: url(images/close-nav.svg);
    mask-image: url(images/close-nav.svg);
	-webkit-mask-size: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); 
}

@keyframes rotateClose{
	from {  transform: rotate(0deg);}
    to   {  transform: rotate(270deg);}
}
.close.rotate{
	animation-name: rotateClose;
	animation-duration: 1s;
}
.close .close-content{
	position: absolute;
	left: 50%; 
	top: 50%;
	transform: translate(-50%, -50%);
	text-indent: -9999px;
}


#primary-navigation-left,
#primary-navigation-right{
	max-width: 550px;
}



#menu-mainmenu{
	justify-content: flex-end;
	padding: 20px 20px 17px 20px;
	display: block;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding-right: 0px;
}
#menu-mainmenu2{
	padding: 20px 20px 17px 20px;
	padding-left: 0px;
	display: block;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#menu-mainmenu2,
#menu-mainmenu{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


#menu-mainmenu2 a,
#menu-mainmenu a{
	font-family: Open Sans;
	font-size: 25px;
	padding-left: 20px;
	padding-right: 20px;
	color: #111;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 15px;
	font-weight: 500;
}



#menu-footer ul{
	display: block;
	background: red;
	
	
}
#menu-footer ul li{
	display: block;
}

#menu-footer ul li a{
	border-top: 1px solid #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	background: red;
}

.section-content .menu-footer-container #menu-footer li{
	display: block;
	padding-left: 0px !important;
}
.section-content .menu-footer-container li a{
	display: block;
	margin-bottom: 10px;
	padding-left: 0px !important;
	display: flex;
	align-items: center; 
}
.section-content .menu-footer-container li a:before{
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	background: #fff;
	margin-right: 10px;
	-webkit-mask-image: url(images/arrow-right.svg);
	mask-image: url(images/arrow-right.svg);
}

.section-content .menu-footer-container li a:hover{
	color: #278B8E !important;
}
.section-content .menu-footer-container li a:hover:before{
	background: #278B8E;
}



#block-8 .item:last-child{
	border-right: none;
}
#block-8 table tr{
	
}
#block-8 table td{
	padding-top: 10px;
	padding-bottom: 10px;
}



@keyframes hoverLetter{
	0%  { letter-spacing: 1px;}
	50% { letter-spacing: 3px;  }
	100% {  letter-spacing: 1px; }
}




#primary-navigation ul li .sub-menu{
	width: 100%;
	display: none;
}
#primary-navigation ul li .sub-menu a{
	text-shadow: none;
	padding: 6px 0 6px 0;
	color: #fff;
	text-shadow: none;
	letter-spacing: 3px;
	font-size: 22px;
	-webkit-text-stroke: 0;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 120%;
}



#primary-navigation ul li .sub-menu li:last-child{
	margin-bottom: 0px;
}
#primary-navigation .toggle-subemenu{

	position: relative;
	width: 30px;
	height: 30px;
	/*
	background: #fff;
	-webkit-mask: url(images/down-arrow.svg) center center;
    mask: url(images/down-arrow.svg) center center;
	-webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
	*/
		top: 40px;
	cursor: pointer;
	
}

@keyframes togglelinerotate{
	from{height: 100%;}
	to{height: 0;}
}
@keyframes fillline1{
	from{height: 0%;}
	to{height: 100%;}
}
@keyframes fillline2{
	from{width: 0%;}
	to{width: 100%;}
}

#primary-navigation .toggle-subemenu .line1{
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	width: 2px;
	height: 90%;
	transform: translate(-50%, -50%);
	position: relative;
}



#primary-navigation .toggle-subemenu.active .line1{
	animation: togglelinerotate 0.3s;
	animation-fill-mode: forwards;

}
#primary-navigation .toggle-subemenu .line2{
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	height: 2px;
	width: 90%;
	transform: translate(-50%, -50%);
}



#primary-navigation .toggle-subemenu.active{
	transform: rotate(-180deg);
}


.primary-navigation-call{
	color: #fff;
	text-align: center;
	margin-top: 40px;
	letter-spacing: 5px;
	text-transform: uppercase;
}
.primary-navigation-call a{
	color: #fff;
}
.primary-navigation-call a:hover{
	color: #FF6700;
}

#top{
	background: #222;
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
#top li{
	display: inline-block;
	padding-right: 10px;
	padding-left: 10px;
	border-right: 1px solid #fff;
	line-height: 100%;
}
#top li:last-child{
	border-right: none;
}
#top a{
	color: #fff;
	display: inline-block;
	line-height: 100%;
	letter-spacing: 2px;
	text-transform: uppercase;
	
}

#headnavigation{
	height: 100px;
}



.nav-bgvideo{
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0px;
	 object-fit: cover;
	opacity: 0.7;
	 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	mix-blend-mode: multiply;
}


.swiper-button-prev, .swiper-button-next{
	width: 60px;
	height: 60px;
}
.swiper-container-rtl .swiper-button-next{
	  
	  
	
	
}

.swiper-button-prev,
.swiper-button-next{
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 50px;
	height: 50px;
}

.swiper-button-prev{
	background: blue;
	-webkit-mask-image:  url(images/arrow-left.svg);
	mask-image: url(images/arrow-left.svg);
}
.swiper-button-next{
	background: red;
	-webkit-mask-image:  url(images/arrow-right.svg);
	mask-image: url(images/arrow-right.svg);
}

.swiper-button-prev:after, .swiper-button-next:after{
	display: none;
}


@keyframes bookingButtonColorchange{
	from { background-color: #278B8E; }
    to   {  background-color: #F4A496; }
}


#menu-mainmenu2 .bookingbutton a{
	background-color: #278B8E;
	padding: 10px 20px 10px 17px;
	border-radius: 999px;
	text-shadow: none !important;
	display: flex;
	position: relative;
	box-shadow: 3px 3px #F4A597;
	font-weight: 400;
	color: #fff;
	margin-left: 25px;
	font-family: Open Sans;
	font-size: 14px;
	transition: all 0.3s;
}
#menu-mainmenu2 .bookingbutton a:hover{
	background-color: #F4A597;
	box-shadow: 3px 3px #278B8E;
}


#menu-mainmenu2 .bookingbutton a:before{
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	background: pink;
	margin-right: 15px;
	background: url(images/icon-booking.svg) no-repeat;
	background-size: contain;
}
 
 .scrolled #menu-mainmenu2 .bookingbutton a{
	animation-name: bookingButtonColorchange;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


#mini_logo{
	width: 70px;
	height: auto;
	position: absolute;
	left: 10px;
	top: 10px;
}

#mini_logo img{
	width: 100%;
}


.header-logo-left #logo, .header-logo-right #logo{
	background: #fff;
	margin: auto auto;
	margin-top: -7px;
}
.header-logo-left #logo img, .header-logo-right #logo img{
	padding-left: 20px;
	padding-right: 20px;
	
}
.header-logo-left #logo, .header-logo-right #logo{
	height: 110px  !important;
}



.slider {
  height: 60px;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;

}


/*  IMPORTANT CODE BELOW */


.slide-track2 {
  width: calc(355px * 15);
  display: flex;
  animation: scroll2 15s linear infinite;
  justify-content: space-between;
}

.slide {
  width: 355px;
  height: 60px;
	padding-left: 20px;
	padding-right: 20px;
  display: grid;
  place-items: center;
  transition:0.5s;
  cursor:pointer;
}
.slide img{
	width: 100%;
	display: block;

}
/*
.slide:hover{
  transform:scale(0.8)
}*/


@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-355px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-255px * 5));
  }
}


.primary-navigation-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#f9ecdd+0,f9ecdd+100&1+0,0+98 */
background: linear-gradient(to bottom,  rgba(249,236,221,1) 0%,rgba(249,236,221,0) 98%,rgba(249,236,221,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.column {
	display: flex;
	flex-wrap: wrap;
}

.content.columns_1 .column {
	width: 100%;
}
.content.columns_2 .column {
	width: 50%;
}
.content.columns_3 .column {
	width: 33.33%;
}

.diensleistung-box .item-content{
	display: flex;
	flex-wrap: wrap;
}

.diensleistung-box .item:nth-child(even) .svg {
	margin-left: auto;
}

.diensleistung-box .boxspacer{
	width: calc(50% - 60px);

}


.diensleistung-box .nummer{
	width: 120px;
	text-align: center;
	position: relative;
	font-weight: 700;
	color: #278B8E !important;
	position: relative;
	background: url(images/pen-line-1.png) no-repeat right 37px top;
	background-size: 20% 100%;
	opacity: 0.6;
}
.diensleistung-box .item:nth-child(even) .nummer{
	background: url(images/pen-line-2.png) no-repeat left 37px top;
	background-size: 20% 100%;
}








.diensleistung-box .textwrapper{
	width: calc(50% - 60px);
}

.diensleistung-box .image.spaltenbild{
	padding-bottom: 30px;
}
.diensleistung-box .image{
	margin-bottom: 30px;
	overflow: hidden;
}
.diensleistung-box .image img {
	width: 60px; 
	height: 60px;
}


.diensleistung-box .item:nth-child(even) .image{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.diensleistung-box .item:nth-child(odd) .preis{
	text-align: left;
}

.diensleistung-box .item:nth-child(even) .textwrapper{
	order: 1;
	text-align: right;
}


.diensleistung-box .item:nth-child(even) .text .aufzaehlung ul li{
	padding-left: 7px;
	padding-right: 45px !important;
}
.diensleistung-box .item:nth-child(even) .text ul li:before {
	right: 10px;
	left: auto;
	transform: rotate(180deg);
}

.diensleistung-box .item:nth-child(even) .aufzaehlung-button{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	
}

.diensleistung-box .item:nth-child(even) .nummer{
	order: 2;
}
.diensleistung-box .item:nth-child(even) .boxspacer{
	order: 3;
}

.diensleistung-box .item:nth-child(even) .aufzaehlung-button span.plus{
	order: 2;
}

.diensleistung-box .text .aufzaehlung  ul li{
	background: rgba(255,255,255,0.4);
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 45px !important;
	padding-right: 10px;
}
.diensleistung-box .text .aufzaehlung{
	display: none;
}


.footer_contact_column{
	max-width: 350px;
}
.footer_opening_column{
	flex-grow: 2;
}
.footer_opening_column table{
	width: 320px;
}
.footer_opening_column table{
	width: 320px;
}
.footer_opening_column table td{
	border-top: 1px solid rgba(255,255,255,0.3);
}
.footer_opening_column table tr:last-child td{
	border-bottom: 1px solid rgba(255,255,255,0.3);
}



.amelia-app-booking .el-input-number:before {
  content: "Personenzahl";
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #555;
  margin: 4px 0 8px 4px;
}


.am-icon-users + .am-fs__bringing-content-text:after{
	content: "Personenzahl wählen";
}

.am-fs-sb__step:has(.am-icon-users-plus) .am-fs-sb__step-heading:after{
	content: "Personenzahl";
}


.button_all_projects {
  transform: scale(0.9);
  opacity: 0.8;
  transition: transform 0.5s ease, opacity 0.4s ease;
  will-change: transform, opacity;
}

.button_all_projects.is-inview {
  transform: scale(1);
  opacity: 1;
}

@media screen and (max-width: 768px) {


	
  .slide-track {
    width: calc(80px * 20);
  }

  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}


#socialmedia-box{
	justify-content: center;
}


.text-mit-bild-box .spaltennummer{
	display: flex;
	flex-wrap: wrap;
}
.text-mit-bild-box .nummer{
	font-size: 74px;
	line-height: 100%;
	width: 65px;
	margin-top: -26px;
	font-family: Open Sans Bold;
	color: #F0C526;
}
.text-mit-bild-box .spaltennummer .textcontainer{
	width: calc(100% - 65px);
}

.nummer{
	display: block !important;
	
}

.nummer[data-aos^="fade"][data-aos^="fade"] {
	opacity: 1.0 !important;
}


.carousel-box .flexibleheight img{
	object-fit: contain !important;
}


.header-logo-left #logo{
	left: 0px;
}


#colophon .content{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 40px;
	padding-right: 40px;
}
#colophon .footer-logo-nav{
	width: calc(100% - 700px);
	margin-bottom: 40px;
}

#colophon .width100{
	width: 100%;
}

 
  
#colophon .footer-logo img{
	width: 240px;
} 


#colophon #menu-footer{
	justify-content: left;
}

#colophon .footer-nav-menu{
	font-size: 20px;
}
#colophon .footer-nav-menu li{
	margin-bottom: 20px;
	width: 100%;
}
#colophon .footer-nav-menu{
	columns: 1;
	max-width: 400px;
}
#colophon .footer-nav-menu a{
	color: #fff;
	line-height: 130%;
}
#colophon ul li{
	padding-left: 0px;
	padding-right: 0px;
}

h1{
	/*
	background: -webkit-linear-gradient(#C42D6C, #ED842D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
}



h1 .anim:nth-child(odd){
	position: relative;
	top: -30px;
	opacity: 0;
	animation: slideinposition 0.2s linear forwards; 
}
h1 .anim:nth-child(even){
	position: relative;
	top: 30px;
	opacity: 0;
	animation: slideinposition 0.2s linear forwards; 
}


@keyframes slideinposition {
	to { 
		top: 0px;
		opacity: 1;
		
	}
}


.icon-on-the-left .item .item-content{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.icon-on-the-left .text {
	width: calc(100% - 90px);
	padding-left: 40px;
}
.icon-on-the-left .spaltenbild{
	margin-top: 0px !important;
}





.gradienttitel h1,
.gradienttitel h2,
.gradienttitel h3,
.gradienttitel h4,
.gradienttitel h5,
.gradienttitel h6{
	
}


/*
@keyframes textclip {
	to { 
		background-position: left center;
		
	}
}
@keyframes scaler {
	to { 
		transform: scale(1);
		
	}
}*/

.wpcf7-acceptance .wpcf7-list-item-label{
	margin-bottom: 0px !important;
}




.marquee .contItem { 
	display:inline-block; 
	vertical-align:top; 
	padding:20px; 
	white-space:normal;
}
.marquee .contItem img{
	object-fit:contain;
} 


.single .section-content{
	padding-left: 30px;
	padding-right: 30px;
}

.single .single-referenzbilder-nav .spaltenbild {
    padding-top: 60%;
}
.single .single-referenzbilder-nav .item-content, 
.single .single-referenzbilder-nav .spaltenbild {
    height: 100%;
}


.single .single-referenzbilder-nav .section-content{
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
}


.single-referenzbilder-nav .item{
	width: 25%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 40px;
	
}
.single-referenzbilder-nav .flex-wrap{
	margin-left: -20px;
	margin-right: -20px;
} 


.single-referenzbilder-nav .text {
	left: 0px;
	top: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b9157e+0,f29024+100 */
	background: linear-gradient(to right,  rgba(185,21,126,0.95) 0%,rgba(242,144,36,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	align-items: center;
	justify-content: center;
	display: none;

}
.single-referenzbilder-nav .text strong{
	font-family: Rostack !important;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.1;
}

.single-referenzbilder-nav .item{
	border-radius: 1em;
	overflow: hidden;
}

.single-referenzbilder-nav img{
	position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
	border-radius: 10px;
}
    

.single-referenzbilder-nav .box:hover .text{
	display: block;
}

.single-referenzbilder-nav  .text .text-content {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}
.single-referenzbilder-nav .text .text-content strong{
	max-width: 400px;
	padding-left: 20px;
	padding: 25px 20px;
	right: 0px;
	bottom: 0px;
	position: relative;
	font-weight: normal;
	font-size: 30px;
	max-width: calc(100% - 60px);
	letter-spacing: 1px;
}

.single-referenzbilder-nav strong:before { 
	content: ""; 
	position: absolute; 
	top: -2px; 
	left: -2px; 
	width: 0; 
	height: 0; 
	background: transparent; 
	border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:before { 
	animation: borderanimate 0.5s linear forwards; 
} 
.single-referenzbilder-nav strong:after { 
	content: ""; 
	position: absolute; 
	top: -2px; 
	left: -2px; 
	width: 0; 
	height: 0; 
	background: transparent; 
	border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:after { 
	animation: borderanimate2 0.5s linear forwards; 
} 

.single-projekte .content{
	max-width: 1500px;
	margin: auto auto;
}

.single-projekte .item-content a{
	overflow: hidden;
	display: block;
}

.single-projekte .item-content{
	overflow: hidden;
	border-radius: 10px;
}
.single-header-wrapper{
	position: relative;
}
.single-header-wrapper:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%);
	transform: none !important;
	
}
.sh-title,
.sh-image{
	width: 50%;
}
.sh-title{
	padding-right: 50px;
}
.sh-title h1{
	display: block;
	width: 100%;
}
.sh-title h2{
	font-size: 25px !important;
	display: block;
	width: 100%;
}

.sh-image{
	width: 50%;
	padding-top: 50%;
	border-radius: 10px;
	position: absolute;
	right: 0px;
	overflow: hidden;
}
.sh-image img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	object-fit: contain;
}
.sh-button{
	background: #fff;
	display: block;
	padding: 10px 25px;
	border-radius: 9999px;
	color: #000;
}
	



.spalten-links-box a{
	transition: all 0.5s;
}


@keyframes arrowSlide{
	from { left: 0;}
    to   {  left: 12px; }
}


.spalten-links-box a:hover .arrow-wrapper .arrow{
	animation-name: arrowSlide;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.spalten-links-box .arrow-wrapper{
	width: 50px;
	height: 50px;
	display: block;
	position: relative;
	transition: all 0.5s;
}
.spalten-links-box .arrow-wrapper .circle{
	display: block;
	width: 35px;
	height: 35px;
	border-radius: 9999px;
	border: 1px solid #D2525B;
	align-self: flex-end;
	position: relative;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.spalten-links-box .arrow-wrapper .arrow{
	mask-image: url(images/right-arrow.svg);
	-webkit-mask-image: url(images/right-arrow.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background: #D2525B;
	position: absolute;
	display: block;
	width: 25px;
	height: 25px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.5s;

}
.spalten-links-box.icon-on-the-left .text{
	padding-left: 30px;
}

.spalten-links-box.icon-on-the-left .text{
	width: calc(100% - 120px)
}

.spalten-links-box.icon-on-the-left .item .item-content{
	align-items: center;
}




.hide{
	display: none;
}


@media(max-width: 1500px){

	/*
	.dienstleistungbox .section-content .spaltenbild{
		max-width: 500px;
		margin: auto auto;
		width: 100% !important;
		max-width: 1000px  !important;
		display: flex;
		justify-content: center;
	}
	
	.dienstleistungbox.icon-on-the-left .text{
		width: 100% !important;
		padding-left: 0px;
	}
	.dienstleistungbox.icon-on-the-left svg{
		max-width: 100px;
		margin: auto auto;
		margin-bottom: 25px;
	}*/
}

@media(max-width: 1200px){
	

	
	
	.swiper-button-prev, .swiper-button-next{
		width: 50px;
		height: 50px;
	}
	
	.dienstleistungbox h3{
		text-align: center;
	}
	.dienstleistungbox{
		text-align: center;
	}
	.dienstleistungbox .item{
		max-width: 800px;
		margin: auto auto;
	}
	
	.icon-on-the-left .text{
		width: 100%;
		padding-left: 0px;
	}
	.icon-on-the-left .text{
		padding-top: 20px;
	}
	.projekte-box .spalten-titel{
		padding: 25px 20px;
	}
	.single-referenzbilder-nav .item{
		width: 50%;
	}

	
}

#colophon .content{
	padding-top: 20px;
}


#footer-navigation #menu-law{
	display: flex;
	flex-wrap: wrap;	
	justify-content: center;
}
#footer-navigation #menu-law a{
	display: block;
	padding-left: 10px;
	padding-right: 10px;
}
#footer-navigation #menu-law li:first-child a{
	padding-left: 0px;
}
#footer-navigation #menu-law li:last-child a{
	padding-right: 0px;
}

.data-policy h2,
.imprint h2{
	font-size: 22px;
	letter-spacing: 1px;
	font-family: Open Sans;
	hyphens: auto;
	color: #288B8E;
}
.data-policy h3,
.imprint h3{
	font-size: 18px;
	font-family: Open Sans;
	hyphens: auto;
	color: #288B8E;
}

.overflowhidden{
	overflow: hidden;
}
.aboutbox .item{
	position: relative;
}
.aboutbox .item:after{
	content: "";
	background: url(images/line.svg) no-repeat;
	background-size: contain;
	width: 10px;
	height: 55px;
	position: absolute;
	right: 0px;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.aboutbox .spalten-box .item{
	padding-bottom: 45px !important;
}

.aboutbox.spalten-box .item{
	padding-bottom: 80px !important;
}


/* Hide scrollbar for Chrome, Safari and Opera */
textarea::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
textarea {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  resize: none;
}


@keyframes slidetextarea{
	from { height: 84px;}
    to   {  height: 300px; }
}
.close.rotate{
	animation-name: rotateClose;
	animation-duration: 1s;
}

.kontaktformular-box input[type="text"],
.kontaktformular-box input[type="email"],
.kontaktformular-box input[type="tel"],
.kontaktformular-box textarea{
	transition: all 0.8s;
}



.opening-contact-box table td{
	padding-top: 10px;
	padding-bottom: 10px;
}

.contactform-help span[data-name="your-message"]:before{
	
}

.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea{
	 -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea::-webkit-scrollbar {
  display: none;
}
.kontaktformular-box .flex-wrap{
	margin-left: -15px;
	margin-right: -15px;
}
.kontaktformular-box input[type="submit"]{
	cursor: pointer;
}

.kontaktformular-box .wpcf7 .wpcf7-acceptance input[type="checkbox"]{
	width: 20px;
	height: 20px;
	border: none;
	
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance .wpcf7-list-item{
	width: 100%;
	display: block;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance label{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	
}

.kontaktformular-box .wpcf7 .wpcf7-acceptance  .wpcf7-list-item-label{
	width: calc(100% - 30px);
	display: block;
}
.kontaktformular-box .wpcf7-not-valid-tip{
	font-size: 15px;
	color: #F62D73;
	padding-top: 5px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	font-size: 16px;
}





.kontaktformular-box .button-fa{
	position: relative;
	max-width: 200px;
	margin: auto auto;
	
}
.kontaktformular-box .button-fa input[type="submit"]{
	display: flex;
    align-items: center;
    height: 60px;
    transition: all 0.5s;
    padding-left: 30px;
    padding-right: 80px;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 100%;
	border-radius: 9999px;
	background-image: url(images/right-arrow.svg);
	background-repeat: no-repeat;
	background-size: 30px auto;
	background-position: right 25px center;
	transition: all 0.3s;
}

.kontaktformular-box .button-fa input[type="submit"]:hover{
	background-position: right 140px center;
	padding-left: 80px;
}



.exzellenteswebdesign .text-content{
	max-width: 600px;
}
.gridgalerie-box.custommockupgrid  .image-wrapper{
	grid-auto-rows: minmax(50vh, auto)
}






.contactform-help textarea,
.contactform-help input[type="text"],
.contactform-help input[type="email"]{
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-image: linear-gradient(to right, #EC8C39, #F53270) 1;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 70px;
	position: relative;
}

form .width50,
form .width100{
	margin-right: 15px;
	margin-left: 15px;
}
form .width50{
	width: calc(50% - 30px);
}
form .width100{
	width: calc(100% - 30px);
}



.contactinfobox .titel{
	font-size: 150px;
	line-height: 80%;
}








.minspacer,
.minspacer80{
	height: 80px;
}


.aboutbox .item:last-child:after{
	content: "";
	display: none;
}

.leistungcarousel .content{
	padding-left: 50px;
	padding-right: 50px;
}
.leistungcarousel .text-detail h2{
	font-size: 100px;
	font-size: 5vw;
}




.blur1px{
	filter: blur(1px);	
}


.dienstleistungbox {
	border-bottom: 1px solid #000;
}

.projekte-box .section-content .content{
	padding-left: 40px;
	padding-right: 40px;
}


.projektnavigation{
	padding-left: 15px;
	display: flex;
	flex-wrap: wrap;
}
.projektnavigation .nav-links{
	display: flex;
	flex-wrap: wrap;
}

.projektnavigation .arrow-left,
.projektnavigation .arrow-right{
	background: #fff;
	padding: 10px 10px;
	line-height: 100%;
	display: block;
	transition: all 0.3s;
	/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#bf2374+0,f08d26+100 */
}

.projektnavigation a .arrow-left ,
.projektnavigation a .arrow-right {
	color: #000;
}


.projektnavigation .arrow-right{
	margin-right: 4px;
}
.projektnavigation a:hover .arrow-left,
.projektnavigation a:hover .arrow-right{
	background: none;
	box-shadow: inset 0 0 0 2px #fff;
	color: #fff;
}




.linebetween .section-content:before{
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 100%;
	background: #333;
	left: 50%;
}

.linebetween .section-content .image {
	opacity: 1 !important;
}

.h1title{
	z-index: 50;
	position: relative;
	
}

.h1title h1{
	max-width: 550px;
}

.box-title .marked{
	-webkit-text-stroke-width: 0;
	-webkit-text-fill-color: #fff;
}

.archive h1{
	font-size: 110px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	-webkit-text-fill-color: transparent;
	text-align: center;
}


.exzellenteswebdesign{
	z-index: 10;
	position: relative;
}

.spaltenbild svg{
	width: 100%; 
	height: auto;
}

.single-leistungen h1{
	display: block;
	text-align: left;
	font-size: 60px;
	margin-bottom: 30px;
	-webkit-text-stroke-width: 0.5px; 
	-webkit-text-stroke-color: #fff; 
	color: transparent;
	font-family: Rostack;
	letter-spacing: 3px;
	line-height: 80% !important;
	text-align: left;
}




.servicedescription_header{
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.servicedescription_header .servicedescription_image{
	position: relative;
}
.servicedescription_header img{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 60%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
.servicedescription_header .servicedescription_text{
	padding-top: 120px;
	padding-bottom: 120px;
	padding-left: 50%;
	z-index: 1;
	
}
.servicedescription_text_content{
	background: #000;
	padding: 10%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */
	background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 10px;
}

.servicedescription_text h1{
	font-size: 50px;
	line-height: 90%;
}
.servicedescription_text h2{
	font-size: 30px;
}
.servicedescription_text a{
	background: #fff;
	padding: 20px 30px;
	font-family: Rostack;
	display: block;
	color: #000;
	border-radius: 9999px;
	letter-spacing: 1px;
	line-height: 100%;
	text-align: center;
}


.single #angebotanfordern{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */
	background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.single-leistungen-nav ul{
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(4, 1fr);
}
.single-leistungen-nav ul li{
	display: flex;
	flex-wrap: wrap;	
	border: 3px solid #fff;
	transition: all 0.3s;
	border-radius: 5px;
	width: 100%;
}

.single-leistungen-nav ul li strong{
	width: calc(100% - 180px);
	display: block;
	transition: all 0.3s;
	position: relative;
	left: 0px;
	display: flex;
	align-items: flex-end;
	line-height: 130%;
	color: #fff;
	font-weight: normal;
	bottom: 0px;
	width: 100%;
	z-index: 1;
	font-size: 17px;
	padding: 6px 20px 8px 20px;
	letter-spacing: 1px;
}

.single-leistungen-nav ul li a{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 3px;
	color: #333;
	font-size: 20px;
	position: relative;
	border-radius: 8px;
	width: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,1+100 */
	overflow: hidden;
}



.single-leistungen-nav ul li strong span{
	display: block;

}

.single-leistungen #angebotanfordern input[type="text"],
.single-leistungen #angebotanfordern input[type="email"]{
	padding: 17px 40px 17px 80px;
	background: none;
	border-bottom: 3px solid #fff;
	
}
.single-leistungen #angebotanfordern textarea{
	border-radius: 10px;
	padding: 20px 40px;
	min-height: 130px;
}

.single-leistungen #angebotanfordern form .width50, 
.single-leistungen #angebotanfordern form .width100{
	margin-bottom: 20px;
}

.single-leistungen .basic_columns_box li{
	width: 33.33%;
}

.leistungen_header{
	background: linear-gradient(135deg, #c02474 1%, #f08c26 100%);
	padding-top: 80px;
	padding-bottom: 200px;
}
   
.leistungen_header h1{
	font-size: 150px;
	color: #ffffff;
}
.leistungen_header h2{
	font-family: Cyber Brush !important;
	color: #ffffff;
    font-size: 40px;
    line-height: 1.0;
    margin-bottom: 40px;
}

.leistungen_images_wrapper{
	background: #111;
}

.leistungen_images_wrapper ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -30px;
	margin-right: -30px;
}
.leistungen_images_wrapper .item{
	width: calc(33.33% - 40px);
	position: relative;
	margin-left: 20px;
	margin-right: 20px;
	
}
.leistungen_images_wrapper .item a{
	display: block;
	width: 100%;
	padding-top: 100%;	
	overflow: hidden;
	border-radius: 5px;
}
.leistungen_images_wrapper .item img{
	position: absolute;
	width: 100%;
	height: 100%;	
	object-fit: cover;
	top: 0px;
	left: 0px;
	border-radius: 5px;
}

.flex_block_columns{
	display: flex;
	flex-wrap: wrap;
}

.flex_block_columns h2,
.flex_block_columns h3,
.flex_block_columns h4,
.flex_block_columns h5,
.flex_block_columns h6{
	font-family: Rostack;
	font-size: 35px;
	font-weight: normal;
}

.flex_block_columns{
	margin-left: -20px;
	margin-right: -20px;
}

.flex_block_columns li{
	padding-left: 20px;
	padding-right: 20px;
}
.flex_block_columns.columns_1 li{
	width: 100%;
}
.flex_block_columns.columns_2 li{
	width: 50%;
}
.flex_block_columns.columns_3 li{
	width: 33.33%;
}
.flex_block_columns.columns_4 li{
	width: 25%;
}
.flex_block_columns.columns_5 li{
	width: 20%;
}
.flex_block_columns.columns_6 li{
	width: 12.5%;
}

#breadcrumbs{
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 60px;
	
}
#breadcrumbs a{
	color: #fff;
	
}





.dl_wrapper .dl_item{
	border-bottom: 1px solid rgba(255,255,255,0.4);
	padding-bottom: 20px;
	padding-top: 20px;
}
.dl_wrapper .dl_item h3{
	line-height: 100%;
	margin-bottom: 0px;
}

.leistungen img{
	border-radius: 10px;
}



.textundblocks-box .tub_blocks_text{
	width: 35%;
	padding-right: 30px;
}
.textundblocks-box .tub_blocks_wrapper{
	width: 65%;
}
.textundblocks-box .tub_blocks_wrapper .item-content{
	border-radius: 10px !important;
}

.textundblocks-box .tub_blocks_wrapper .item{
	padding: 40px;
	border-radius: 20px;
	/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#eb8f36+0,ef5f53+100 */
	background: linear-gradient(to right,  #eb8f36 0%,#ef5f53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	width: calc(50% - 25px);
}
.textundblocks-box .tub_blocks_wrapper .item:last-child{
	width: 100%;
}
.textundblocks-box .tub_blocks_wrapper .item .image{
	max-width: 60px;
	margin-bottom: 20px;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
	font-size: 40px;
	font-family: Rostack;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 3px;
}
.textundblocks-box .tub_blocks_wrapper .item{
	font-size: 24px;
}

.textundblocks-box .tub_blocks_text .titlecontent{
	font-size: 100px;
	font-family: Rostack;
	line-height: 80%;
	font-weight: 400;
	letter-spacing: 2px;
	padding-right: 20px;
}

.textundblocks-box .tub_blocks_wrapper{
	grid-gap: 50px;
}
.textundblocks-box .tub_blocks_wrapper .item{
	display: flex;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
	align-self: flex-end;
}
.textundblocks-box .tub_blocks_wrapper .item p{
	margin-bottom: 0px;
}
.textundblocks-box .tub_blocks_wrapper a{
	color: #fff;
	padding-right: 50px;
	background: url(images/long-arrow-right.svg) no-repeat;
	background-size: 35px auto;
	background-position: right 18px;
	transition: all 0.3s;
}
.textundblocks-box .tub_blocks_wrapper a:hover{
	background-position: left 18px;
	padding-left: 50px;
	padding-right: 0px;
}






#more-leistungen{
	background: #111;
}

.brlbs-cmpnt-dialog-entrance-description{
	height: 200px !important;
	overflow-y: scroll;
}


.icon-on-the-left.spalten-links-box {
	display: none;
}

.divider-in-the-middle .section-content{
	position: relative;
}
.divider-in-the-middle .section-content:before{
	content: "";
	position: absolute;
	display: block;
	width: 3px;
	height: 100%;
	background: #000;
	left: 50%;
}
.divider-in-the-middle video{
	opacity: 0.5;
}

.box-more-text{
	position: relative;
}




.spalten-box  .item.swiper-slide .spaltenbild{
	margin-bottom: 0px;
}





.wpcf7-spinner{
	position: absolute;
}


.page-id-4513 #content{
	overflow: inherit;
}
.page-id-4513 section{
	top: 0px;
}

.diensleistung-box .svg{
	width: 70px;
	margin-bottom: 20px;
}
.diensleistung-box .svg svg{
	width: 100%;
	height: auto;
}


.diensleistung-box .nummer{
	font-size: 50px;
	line-height: 100%;
	color: #000;
}




.fi_tabelle td{
	border-top: 1px solid #ccc;
}
.fi_tabelle td:first-child{
	font-weight: 700;
}
.fi_tabelle td:last-child{
	padding-left: 30px;
}
.fi_tabelle tr:last-child td{
	border-bottom: 1px solid #ccc;
}

.flexible-content-aufzahlung .item-aufzahlung{
	padding-bottom: 0px;
}




.aktuelles-box  .item.no-image .text{
	padding-left: 0px;
	width: 100%;
}

.aktuelles-box .item-content.box{
	display: flex;
	flex-wrap: wrap;
}
.aktuelles-box .item,
.aktuelles-box .item-content{
	border-radius: 5px;
}
.aktuelles-box .image{
	width: 40%;
}
.aktuelles-box .text{
	width: 60%;
	padding-left: 30px;
}


#socialmedia-footer-box{
	display: flex;
	flex-wrap: wrap;
}
#socialmedia-footer-box a{
	width: 25px;
	display: block;
	margin-left: 15px;
}
#colophon .content{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}


.wpcf7-radio .wpcf7-list-item label{
	border: 2px solid #278B8E;
	padding: 5px 10px;
	border-radius: 5px;
	margin-right: 15px;
	cursor: pointer;
}

.spalten-mit-icon-box .moretext{
	display: none;
}
.spalten-mit-icon-box .image.spaltenbild{
	margin-top: 0px !important;
}

.scrolled .primary-navigation-wrapper{
	background: transparent;
}


.spalten-mit-icon-box .moretext_button{
	border: none; 
	padding: 5px 5px 7px 5px;
	color: #fff;
	background-color: #ddd;
	border-radius: 9999px;
	display: flex;
	flex-wrap: wrap;
	padding-left: 15px;
	padding-right: 10px;
	font-size: 14px;
	border: 2px solid #278B8E;
	color: #278B8E;
	background: none;
	font-weight: 500;
	font-family: Open Sans;
	align-items: center;
	cursor: pointer;
	margin-top: 7px;
}
.spalten-mit-icon-box .moretext_button.active:after{
	transform: rotate(180deg);
}

.spalten-mit-icon-box .moretext_button:after{
	width: 15px;
	height: 15px;
	content: "";
	display: block; 
	margin-left: 8px;
	-webkit-mask: url(images/arrow-down.svg); 
	mask: url(images/arrow-down.svg); 
	mask-size: contain; 
	mask-position: center bottom;
	background-color: #278B8E;
	position: relative;
	top: 1px;
	
	
}

.spalten-mit-icon-box  .moretext {
	margin-top: 10px;
}

.footer-2 .icb-3{
	
}


[data-aos="fade-up"] {
  transform: translateY(50px); /* Standard ist 100px → verkürzt! */
}
[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
}


.button-right .item-content.box .text-content{
	display: flex;
	flex-wrap: wrap;
}
.button-right .item-content.box .text-content .preis{
	width: 50px;
	flex-grow: 2;
	text-align: left;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #666;
}
.button-right .item-content.box .text-content .spalten-titel {
	margin-bottom: 0px !important;
}

.button-right .item-content.box .text-content .moretext_button {
	margin-top: 0px !important;
}

#flexibler-inhalt-block_def747cb31526e82e2c0bd69d0d58640  table td{
	padding-top: 10px;
	padding-bottom: 10px;
}

.button-right .item-content.box .text-content{
	padding-right: 170px;
}
.button-right .item-content.box .text-content .text-detail{
	width: 100%;
	display: block;
	padding-top: 6px;
}

.button-right .item-content.box .text-content .moretext_button{
	position: absolute;
	right: 30px;
	top: 20px;
}


@media(max-width: 1400px){
	.single-leistungen h1 span{
		font-size: 100px;
	}
	
	.textundblocks-box .tub_blocks_text{
		width: 100%;
		padding-right: 0px;
	}

	.textundblocks-box .tub_blocks_text .titlecontent{
		text-align: center;
		font-size: 120px;
		padding-right: 0px;
		margin-bottom: 50px;
	}
	.textundblocks-box .tub_blocks_wrapper{
		width: 100%;
		max-width: 850px;
		margin: auto auto;
	}
	.contactinfobox .titel{
		font-size: 80px;
	}
	
	.contactinfobox .titel br{
		display: none;
		

	}
	
	
}



@media(max-width: 1300px){
	.flex_block_columns.columns_3 li{
		width: 50%;
	}
	#menu-mainmenu2 a, #menu-mainmenu a{
		padding-left: 10px;
		padding-right: 10px;
	}
	#logo {
		width: 120px;
		height: 120px;
		display: block;
		position: relative;
	}
	#logo .vase {
		position: absolute;
		left: 32%;
		top: 25%;
		width: 44px;
	}
}


@media(max-width: 1200px){
	#logo{
		width: 90px;
	}
	#menu-mainmenu2 .bookingbutton a{
		margin-left: 15px;
	}
	#menu-mainmenu2 a, #menu-mainmenu a{
		font-size: 14px;
	}
	#logo{
		height: 90px;
	}
	#logo .vase{
		width: 35px;
	}
	#primary-navigation-left, #primary-navigation-right{
		width: 445px;
	}
}


@media(max-width: 1100px){
	
	
	.kontaktformular-box .button-fa input[type="submit"]{
		height: 50px;
		font-size: 18px;
		padding-left: 20px;
		padding-right: 50px;
	}
	
	
	.footer-logo img{
		width: 100px;
	}
	.footer-logo-nav{
		margin: auto auto;
		margin-top: -20px;
	}
	
	.footer-logo-nav{
			display: none;
	}
	
}
@media(max-width: 1024px){
	
	.button-right.spalten-mit-icon-box  .item{
		margin-bottom: 10px;
		
	}
	
	.table_first_column .item-content{
		padding-bottom: 0 !important;
	}
	.table_first_column table tr:last-child td{
		border-bottom: none; 
	}
	.table_second_column .item-content{
		padding-top: 0 !important;
	}

	
	.content.columns_2 .column{
		width: 100%;
	}
	
	
	.section-content{
		padding-left: 50px;
		padding-right: 50px;
	}
	

	
	
	
	.single-leistungen h1{
		font-size: 50px;
		max-width: 600px;
	}
	.single-leistungen-nav ul{
		grid-gap: 17px;
	}
	.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
		width: 130px;
		height: 130px;
	}


	.single-leistungen-nav ul li:nth-child(2) strong, .single-leistungen-nav ul li:nth-child(3) strong, .single-leistungen-nav ul li:nth-child(4) strong{
		font-size: 17px;
		padding-top: 10px;
		padding-bottom: 10px;
		width: calc(100% - 130px);
	}
	.single-leistungen-nav ul li:nth-child(1) strong{
		font-size: 17px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.section-content .single-leistungen-nav ul li:nth-child(1), 
	.section-content .single-leistungen-nav ul li:nth-child(2), 
	.section-content .single-leistungen-nav ul li:nth-child(3), 
	.section-content .single-leistungen-nav ul li:nth-child(4){
		padding-left: 0px;
	}
	
	.single-leistungen-nav ul li:nth-child(1){
		grid-row: 1 / 3;
	}
	.single-leistungen-nav ul li:nth-child(2){
		grid-row: 1 / 2;
	}
	.single-leistungen-nav ul li:nth-child(3){
		grid-row: 2 / 3;
	}
	.single-leistungen-nav ul li:nth-child(4){
		grid-column: 1 / 3; 
		grid-row: 3 / 4;
	}
	
	
	
	.single-referenzbilder-nav .flex-wrap{
		margin-left: -10px;
		margin-right: -10px;
	}
	.single-referenzbilder-nav .item{
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 20px;
	}	
		
	.h1title{
		margin-bottom: -15px !important;
	}

	
	.aboutbox .item:after{
		content: "";
		background: #fff;
		width: 1px;
		height: 60px;
		position: absolute;
		right: 0px;
		bottom: 25px;
		left: 50%;
	}
	
	.projektheader_titel h1{
		font-size: 35px;
		letter-spacing: 3px;
	}
	.projekttitleinfo{
		font-size: 18px;
	}
	.projektheader_description{
		font-size: 18px;
	}


.spacer250{
		height: 100px;
	}
	
	
	#mini_logo{
		display: block;
	}
	
		
	.scrolled #masthead,
	#masthead{
		height: 90px;
		/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#288b8e+0,288b8e+100&1+59,0+100 */

		background: transparent;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		animation-name: none;
	}
	
	.content.columns_3 .column{
		width: 100%;
	}
	
	#primary-navigation-left, #primary-navigation-right{
		width: 100%;
	}
	#menu-mainmenu2 .bookingbutton a{
		margin-left: 0px;
		margin-top: 30px;
		background-color: rgb(244, 164, 150);
	}
	
	#menu-mainmenu,
	#menu-mainmenu2,
	#primary-navigation-left, #primary-navigation-right{
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#menu-mainmenu2 a, #menu-mainmenu a{
		display:block;
		width: 100%;
		padding: 20px;
		color: #fff;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	#menu-mainmenu2 a:hover, #menu-mainmenu a:hover{
		color: #fff;
	}
	.toggle-menu{
		display: block;
		background: #288B8E;
		width: 50px;
		height: 50px;
		padding: 13px 10px;
		border-radius: 3px;
	}
	
	.toggle-menu-inner{
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.close{
		background: #288B8E;
		width: 50px;
		height: 50px;
		padding: 12px 10px;
		z-index: 1000;
	}

	.scrolled #masthead .primary-navigation-wrapper,
	.primary-navigation-wrapper{
		display: none;
		position: fixed;
		width: 100%;
		height: 100vh;
		background: #288B8E;
		top: 0px;
		width: 400px;
		right: 0px;
		padding: 20px 30px 20px 30px;
		animation:inherit;
		align-items: flex-start;
		flex-direction: column;
	}
	
	.primary-navigation-wrapper #logo{
		display: none;
	}
	#menu-mainmenu2, #menu-mainmenu{
		display: block;
		width: 100%;
	}
	#menu-mainmenu2 li, 
	#menu-mainmenu li{
		display: block;
		width: 100%;
	}
	

}


@media(max-width: 1000px){
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper{
		display: block;
	}
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item{
		width: 100%;
		margin-bottom: 20px;
	}
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item .item-content{
		width: 100%;
	}
}




@media(max-width: 920px){
	.aktuelles-box .text{
		width: 100%; 
		padding-left: 0px;
	}
	.aktuelles-box .image{
		width: 100%; 
		margin-bottom: 20px !important;
	}
	.aktuelles-box .section-content .content{
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	
	
	.aktuelles-box .content {
		max-width: 650px;
	}
	.swiper-button-prev, .swiper-button-next{
		width: 30px;
		height: 30px;
	}
	
		
	
	.contactform-help span[data-name="your-phone"]:before, 
	.contactform-help span[data-name="your-company"]:before, 
	.contactform-help span[data-name="your-name"]:before, 
	.contactform-help span[data-name="your-email"]:before, 
	.contactform-help span[data-name="your-message"]:before{
		width: 35px;
		height: 35px;
	}
	.contactform-help h2 .titel{
		-webkit-text-stroke-width: 0.5px;
	}
	.contactform-help textarea, 
	.contactform-help input[type="tel"], 
	.contactform-help input[type="text"], 
	.contactform-help input[type="email"]{
		padding-top: 10px;
		padding-bottom: 10px;
	}

	






	.servicedescription_header img{
		width: 100% !important;
		display: block !important; 
	}
	
	.servicedescription_header .servicedescription_text{
		padding-top: 0px;
		padding-left: 0px;
	}
	.single-leistungen-nav ul li:nth-child(1) strong{
		font-size: 15px;
	}
	.single-leistungen-nav ul li:nth-child(2) strong, 
	.single-leistungen-nav ul li:nth-child(3) strong, 
	.single-leistungen-nav ul li:nth-child(4) strong{
		padding: 10px 15px;
		width: calc(100% - 100px);
		font-size: 15px;
	}
	.single-leistungen-nav ul li:nth-child(2):hover img,
	.single-leistungen-nav ul li:nth-child(3):hover img,
	.single-leistungen-nav ul li:nth-child(4):hover img{
		width: 80px;
	}
	
}


@media(max-width: 768px){
	
	.diensleistung-box .nummer{
		width: 60px;
	}
.diensleistung-box .textwrapper {
    width: calc(50% - 30px);
}
.diensleistung-box .boxspacer {
    width: calc(50% - 30px);
}
	
	.section-content{
		padding-left: 40px;
		padding-right: 40px;
	}
	
		
	.scrolled #masthead .primary-navigation-wrapper, .primary-navigation-wrapper{
		width: 100%;
	}
	
	
	
	.swiper-button-prev{
		left: 0px;
	}
	.swiper-button-next{
		right: 0px;
	}

	.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
		width: 100px;
		height: 100px;
	}
	

	.flex_block_columns.columns_2 li,
	.flex_block_columns.columns_3 li,
	.flex_block_columns.columns_4 li,
	.flex_block_columns.columns_5 li,
	.flex_block_columns.columns_6 li{
		width: 100%;
	}

	
	.h1title{
		text-align: center;
		max-width: 400px;
		margin: auto auto;
		margin-bottom: 0px;
		padding-bottom: 50px;
	}
	.exzellenteswebdesign {
		padding-top: 40px;
	}

	
	


	.dienstleistungbox .section-content{
		max-width: 500px;
		margin: auto auto;
	}
	.dienstleistungbox .section-content h3,
	.dienstleistungbox .section-content .text{
		text-align: center;
	}
	
	.contactform-help span[data-name="your-company"]:before, 
	.contactform-help span[data-name="your-phone"]:before, 
	.contactform-help span[data-name="your-name"]:before, 
	.contactform-help span[data-name="your-email"]:before, 
	.contactform-help span[data-name="your-message"]:before{
		width: 40px;
		height: 40px;
	}
	.contactform-help span[data-name="your-phone"]:before, 
	.contactform-help span[data-name="your-company"]:before, 
	.contactform-help span[data-name="your-name"]:before, 
	.contactform-help span[data-name="your-email"]:before, 
	.contactform-help span[data-name="your-message"]:before{
		top: 0px;
		left: 0;
	}
		
	.contactform-help textarea, 
	.contactform-help input[type="text"], 
	.contactform-help input[type="tel"], 
	.contactform-help input[type="email"]{
		padding-left: 70px;
	}
	.kontaktformular-box form .width100{
		margin-bottom: 0px;
	}
	

	.exzellenteswebdesign .text-content{
		max-width: 500px;
		margin: auto auto;
		text-align: center;
	}
	
	.projektheader_titel h1{
		font-size: 35px;
	}

	.marquee .contItem{
		padding: 15px;
	}
	

	
}

@media(max-width: 720px){
	.contactinfobox .titel br{
		display: block;
	}
	.contactinfobox .titel{
		font-size: 120px;
	}
	.textundblocks-box .tub_blocks_text .titlecontent{
		margin-bottom: -40px;
	}

	
}


@media(max-width: 700px){
	.button-right .item-content.box .text-content{
		padding-right: 0px;
	}
	.button-right .item-content.box .text-content .text-detail{
		width: 100%;
		display: block;
		padding-top: 6px;
		padding-bottom: 7px;
	}

	.button-right .item-content.box .text-content .moretext_button{
		position: relative;
		right: inherit;
		top: inherit;
	}

}



@media (hover: hover) {
	#primary-navigation ul li a:hover{
		color:  #FF6700;
		text-shadow: none;
		animation-duration: 0.5s;
		animation-name: hoverLetter;
		-webkit-text-stroke: 0px;
		color: #FF6700;
	}

	#primary-navigation ul li a:hover {
		color: #D82A64;
		text-shadow: none;
		color: rgba(0,0,0,0);

	}
	#primary-navigation ul li li a:hover {
		color: #fff;
	}
}


@media(max-width: 650px){
	.diensleistung-box .item-content{
		display: block;
	}
	form .width50{
		width: calc(100% - 30px);
	}
	.diensleistung-box .nummer{
		width: 2px;
		height: 50px;
		background: #278B8E;
		display: block; 
		margin: auto auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.diensleistung-box .textwrapper{
		width: 100%;
		text-align: center;
	}
	.diensleistung-box  .text-content{
		text-align: center;
	}
	.diensleistung-box .image img{
		margin: auto auto;
	}
}





@media(max-width: 550px){
	
	.section-content{
		padding-left: 35px;
		padding-right: 35px;
	}
}


@media(max-width: 480px){
		
	.button-right.spalten-mit-icon-box .image{
		width: 100%;
		padding-bottom: 20px;
	} 
	.button-right.spalten-mit-icon-box .image img{
		width: 70px;
		margin: auto auto;
	} 
	.button-right.spalten-mit-icon-box .text-content{
		justify-content: center;
	}
	.button-right .item-content.box .text-content .preis{
		flex-grow: inherit;
		min-width: 70px;
	}

	.button-right.spalten-mit-icon-box .text{
		width: 100%;
		padding-left: 0px;
		text-align: center;
	}
		
	#colophon .content{
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.header-box .text-wrapper{
		padding-top: 130px;
	}
	.section-content{
		padding-left: 25px;
		padding-right: 25px;
	}
	.must-have-box .item-content .text .text-content{
		padding: 30px;
	}
	.must-have-box .item-content .text{
		width: calc(100% - 48px) !important;
	}
	
	
	.textundblocks-box .tub_blocks_wrapper a{
		background-position: right 15px;
	}
	
	.textundblocks-box .tub_blocks_wrapper .item{
		padding: 30px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .image{
		max-width: 50px;
		margin-bottom: 10px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
		font-size: 30px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .text-detail{
		font-size: 20px;
	}
	
	.contactinfobox .titel{
		font-size: 100px;
	}
	.textundblocks-box .tub_blocks_text .titlecontent{
		margin-bottom: -32px;
	}
	
	#primary-navigation .toggle-subemenu{
		top: 30px;
		margin-left: 0px;
	}

	.single-referenzbilder-nav .text .text-content strong{
		hyphens: auto;
	}
	
	.gridgalerie-box .image-wrapper .image:first-child{
		padding-top: 150%;
	}
	.gridgalerie-box .image-wrapper .image:nth-child(4){
		padding-top: 50%;
	}
	
	
	.galerie-box.bunnyimage .spaltenbild{
		padding-top: 100% !important;
	}

	.nav-logo,
	#logo{
		padding-left: 5px;
		width: 60px;
	}
	.close,
	.toggle-menu{
		top: 10px;
		right: 10px;
	}
	#primary-navigation ul li  a{
		font-size: 60px !important;
	}
	#primary-navigation ul li li a{
		font-size: 22px !important;
		letter-spacing: 1px !important;
	}
	.primary-navigation-call{
		font-size: 14px;
		letter-spacing: 1px;
	}
	.marquee .contItem{
		padding: 10px;
	}
	.primary-navigation-wrapper{
		padding-top: 55px;
	}
}

@media(max-width: 420px){
	
	#primary-navigation ul li a{
		font-size: 50px !important;
	}
	#primary-navigation ul li li a{
		font-size: 18px !important;
	}
	.primary-navigation-wrapper{
		padding-left: 20px;
		padding-right: 20px;
	}
	#primary-navigation .toggle-subemenu{
		width: 20px;
		height: 20px;
	}
}

@media(max-width: 380px){
	#colophon .content{
		display: block;
	}
	#colophon #footer-navigation{
		margin-bottom: 12px;
	}
	#colophon #socialmedia-footer-box{
		justify-content: center;
	}
}
@media(max-width: 350px){
	#primary-navigation ul li a{
		font-size: 40px;
		padding-top: 18px;
		padding-bottom: 18px;
	}
}