/* //////////////////////////////////// ALLGEMEIN //////////////////////////////////// */
html {
	box-sizing: border-box;
	width: 100%;
	overflow-x: hidden;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body{
	font-family: "itc-officina-sans-pro", sans-serif;
	color: #1E2529;
	margin: 0px;
	line-height: 1.6;
	font-size: 1.25rem;
	scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 2.5rem;
	color: #1E2529;
	margin: 0 auto 40px;	
	line-height: 1.2;
}
div p{
	margin: 0px 0px 15px 0px;
}
div p:last-child, p:last-child{
	margin: 0 auto;
}
img, svg, video{
	max-width: 100%;
	height:auto;
}
a{
	color: #C20516;
	text-decoration: none;
}
a:active, a:hover {
	color: #c0c0c0;
}
ul{
	padding-left: 20px;
	margin: 0 auto 15px;
}
.no_scroll{
	height: 100vh;
	overflow: hidden;
}
.textcenter{
	text-align: center;
}
/* //////////////////////////////////// CONTENT //////////////////////////////////// */
.w1280{
	max-width: 1280px;
	margin: 0 auto;
	position:relative;
	padding: 0px 40px;
}
.w1024{
	max-width:1024px;
	margin:0 auto;
	position:relative;
}
.w960{
	max-width:960px;
	margin:0 auto;
	position:relative;
}
.w800{
	max-width:800px;
	margin:0 auto;
	position:relative;
}
.w700{
	max-width:700px;
	margin:0 auto;
	position:relative;
}
.margin_oben{
	margin-top: 100px;
}
.margin_unten{
	margin-bottom: 100px;
}
.margin_unten_half{
	margin-bottom: 50px;
}
.fullwidth{
	width:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center;
	position: relative;
}
.bg_padding{
	padding: 100px 0;
}
.bg_grau{
	background-color: #F3F4F4;
}
.bg_grau2{
	background-color: #8E9294;
}
/* //////////////////////////////////// Header //////////////////////////////////// */
.header{
	background-color: #1E2529;
}
.header_logo{
	position: absolute;
	left: 80px;
	top: 0;
	display: block;
	float: left;
	z-index: 11;
}
.header_rechts {
	float: right;
	margin: 45px 40px 24px 0;
	
	position: relative;
}
.menu{

}
.nav-menu{
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav-menu li{
	float: left;
	margin-right: 15px;
	cursor: pointer;
}
.nav-menu li:last-child{
	margin: 0;
}
.nav-menu li a{
	display: block;
	color: #fff;
	line-height: 1;
}
.nav-menu li a:hover{
	color: #c0c0c0;
}
.nav-menu li svg{
	display: none;
}
.nav-menu li.current_page_item a{
	color: #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
}
.nav-menu li.open_products svg, .nav-menu li.open_applications svg{
	display: inline-block;
	vertical-align: middle;
	width: 7px;
	margin-left: 5px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.nav-menu li.active svg{
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.nav-menu li .sub-menu{
	display: none;
	padding: 0;
}


/* Icon 3 */
#nav-icon3, .header_phone, .header_socials{
	display: none;
}




.suche_icon{
	position: absolute;
	right: 80px;
	top: -30px;
	z-index: 2;
	cursor: pointer;
}


.popup_suche {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: scroll;
	background-color: rgba(30, 37, 41, 0.7);
	z-index: 11;
	display: none;
	text-align: center;
	padding: 0 25px;
}


#searchform{
	position: relative;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
#searchform input[type=search]{
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	color: #1E2529;
	padding: 5px;
	border: 0;
	outline: none;
	background-image: url('https://www.seppi.com/wp-content/themes/effekt/images/suche_r.svg');
	background-size: 20px;
	background-position: left 5px center;
	background-repeat: no-repeat;
	padding-left: 35px;
	max-width: 250px;
	height: 40px;
}
.suchen_button{
	width: auto;
	overflow: hidden;
	background-color: #C20516;
	position: relative;
}
.suchen_button input{	
	border: none;
	border-radius: 0;
	position: relative;
	cursor: pointer;
	padding: 10px 20px !important;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	height: 40px;
	background-color: transparent;
	z-index: 2;
}
.suchen_button::after {
	content: '';
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	left: -5%;
	bottom: -150%;
	width: 110%;
	height: 100%;
	background-color: rgba(30, 37, 41, 0.2);
	transform: rotate(-5deg);
	z-index: 1;
}
.suchen_button:hover::after{
	bottom: -50%;
}




#languages{
	position: absolute;
	right: 0;
	top: -28px;
	line-height: 1;
}
.active_lang{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-transform: uppercase;
	color: #ffffff;
}
.active_lang:hover, .active_lang.open{
	color: #c0c0c0;
}
.active_lang span{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	font-size: 1rem;
}
.active_lang svg{
	display: inline-block;
	vertical-align: middle;
	width: 7px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.active_lang.open svg{
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.other_lang{
	position: absolute;
	display: none;
	z-index: 12;
	width: 100%;
	box-shadow: 0px 15px 40px #000000;
	background-color: #24292D;
	top: 25px;
}
.other_lang a{
	color: #ffffff;
	display: block;
	padding: 8px;
	text-align: center;
	text-transform: uppercase;
	font-size: 1rem;
}
.other_lang a:hover{
	background-color: #C20516;
	color: #fff;
}

/* //////////////////////////////////// MENU Dropdown //////////////////////////////////// */
.kat_menu{
	background-color: #F3F4F4;
	position: absolute;
	z-index: 11;
	width: 100%;
	top: 88px;
	padding: 50px 0 50px 0;
	display: none;
}
.kat_menu .w1280{
	padding: 0 80px;
}

.flex_box_menu{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px 10px;
}
.produkt_menu_box{
	text-align: center;
	position: relative;
}
.produkt_menu_box{
	width: calc(14.2% - 10px);
}
.produkt_menu_box a{
	display: block;
}
.produkt_menu_box span {
	  display: block;
	  font-weight: 600;
	  color: #1E2529;
	  text-transform: uppercase;
	  font-size: 0.8rem;
	  letter-spacing: 1px;
	  margin: 0 auto 20px;
}
.produkt_menu_box img{
	
}
.produkt_menu_box .dash{
	width: 60%;
	height: 3px;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	left: 20%;
	-webkit-transition: all ease 0.1s;
	-moz-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
.produkt_menu_box:hover .dash{
	height: 5px;
}


.anwendungen_menu{
	background-color: #F3F4F4;
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 88px;
	padding: 80px 0 30px 0;
	display: none;
}
.anwendung_menu_box{
	text-align: center;
	position: relative;
	width: calc(16.6% - 20px);
}
.anwendung_menu_box a{
	display: block;
	width: 100%;
	height: 100%;
}
.anwendung_menu_box .bild_box_menu{
		position: relative;
}
.anwendung_menu_box .bild_box_menu::after {
	content: "";
	display: block;
	padding-top: 150%; /* Das entspricht einer Höhe von 200% der Breite */
}
.anwendung_menu_box .bild_box_menu img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.bild_box_menu .overlay{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	z-index: 2;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.anwendung_menu_box a:hover .overlay{
	height: 0;
}
.anwendung_menu_box .titel_box_menu{
	display: block;
	color: #1E2529;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 1px;
	margin: 20px auto;
	padding: 0 25px;
	font-weight: 600;
}
.anwendung_menu_box a:hover .titel_box_menu{
	color: #C20516;
}


/* //////////////////////////////////// Button //////////////////////////////////// */
.button{
	display: inline-block;
	width: auto;
	overflow: hidden;
	position: relative;
	background-color: #C20516;
	cursor: pointer;
}
.button::after {
	content: '';
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	left: -5%;
	bottom: -150%;
	width: 110%;
	height: 100%;
	background-color: rgba(30, 37, 41, 0.2);
	transform: rotate(-5deg);
	z-index: 1;
}
.button a, .button span{
	display: block;
	padding: 6px 20px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	z-index: 2;
	position: relative;
	text-align: center;
}
.button:hover::after, .verlinkung_box a:hover .button::after, .video_box a:hover .button::after{
	bottom: -50%;
}


/* //////////////////////////////////// Swiper //////////////////////////////////// */
.swiper {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
	display: block;
}
.swiper_carousel, .swiper_single_carousel{
	padding: 25px 25px 0px 25px;
	box-sizing: border-box;
}
.swiper_carousel .swiper-slide, .swiper_single_carousel .swiper-slide{
	height: auto;
}

.swiper-vertical > .swiper-wrapper {
	flex-direction: column;
}
.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
}
.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}
.swiper_nav{
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
	gap: 20px;
}
.swiper_arrows{
	width: 10px;
	line-height: 0;
	cursor: pointer;
}
.swiper-pagination{
	margin: 0;
	line-height: 0;
}
.swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	border-radius: 15px;
	background-color: #1E2529;
	display: inline-block;
	vertical-align: middle;
	margin: 0 10px;
	cursor: pointer;
}
.swiper-pagination-bullet:hover, .swiper-pagination-bullet-active, .swiper-button-disabled{
	opacity: 0.5;
}
.product_range_box{
	position: relative;
	-webkit-transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	-moz-transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	-o-transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	overflow: hidden;
}
.product_range_box.active_produkt{
	opacity: 0.3;
}
.product_range_box a{
	display: block;
	padding: 0 25px 25px;
	height: 100%;
}
.product_range_box h3{
	font-size: 1rem;
	line-height: 1.3;
	/*text-transform: uppercase;*/
	letter-spacing: 1px;
	margin: 0 auto;
}
.product_range_box .dash{
	height: 5px;
	width: 80%;
	position: absolute;
	bottom: -5px;
	left: 10%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.product_range_box:hover{
	box-shadow: 0px 15px 25px rgba(0,0,0,0.3);
	margin-top: -5px;
}
.product_range_box:hover .dash{
	bottom: 0;
}


.swiper_normal .swiper-slide img{
	display: block;
}
.swiper_normal .swiper_nav{
	margin: 0;
	position: absolute;
	bottom: 30px;
	z-index: 2;
}


/* //////////////////////////////////// Home Seite //////////////////////////////////// */
.homestartbox{
	height: 550px;
}
.schraege{
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.bg_schraege{
	position: absolute;
	left:-5%;
	top:-45%;
	width:110%;
	height: 115%;
	background-color: #1E2529;
	transform:rotate(-5deg);
	z-index: -1;
}
.homestartbox .w1280{
	height: 100%;
}
.video_box {
	position: relative;
	height: calc(100% - 20px); 
	width: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	z-index: 1;
}
.video_box a{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	cursor: pointer;
}
/*.video_box video {
	position: absolute;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: inherit;
	z-index : 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}*/

.video_box video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.video_overlay{
	position: absolute;
	width: 100%;
	bottom: 50px;
	padding: 0 50px;
	z-index: 2;
	color: #ffffff;
	line-height: 1.6;
}
.video_overlay h2{
	color: #ffffff;
	margin: 0;
	font-size: 4rem;
}
.video_overlay p{
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.startbox_rechts{
	float: left;
	width: 50%;
	height: 100%;
	position: relative;
}

.verlinkung_box{
	width: calc(100% - 20px);
	height: 50%;
	z-index: 1;
	overflow: hidden;
	position: absolute;
	top: 0;
	line-height: 0;
}
.verlinkung_box a{
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.verlinkung_box img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	transition: transform 0.3s;
}
.verlinkung_overlay{
	position: absolute;
	width: auto;
	max-width: 100%;
	bottom: 0;
	top: 0;
	padding: 0 50px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.6;
}
.verlinkung_overlay h2{
	font-size: 2.3rem;
	color: #ffffff;
	margin-bottom: 20px;
}
.verlinkung_box:hover img{
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2); 
}


.video_text {
	position: absolute;
	top: 100px;
	z-index: 9;
	width: 100%;
	text-align: center;
}
.video_text.default{
	position: absolute;
}
.video_text.fixed{
	position: fixed;
}
.video_text h2{
	font-size: 8rem;
	color: #000000;
	text-transform: uppercase;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #FFFFFF;
	letter-spacing: 10px;
	line-height: 1;
	margin: 0;
}
.video_text h3{
	color: #FFFFFF;
	text-transform: uppercase;
	margin: 0;
}

.startbox_link_boxen {
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
}
.produkte_box{
	float: left;
	width: 50%;
	height: 100%;
	background-color: #ffffff;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.3);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 2;
	position: relative;
}
.produkte_box img{
	width: 250px;
}
.produkte_box span{
	display: block;
	color: #1E2529;
}
.produkte_box:hover, .myseppi_box:hover{
	margin-top: -5px;
}
.myseppi_box{
	background-color: #C20516;
	float: right;
	width: 50%;
	height: 100%;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	z-index: 2;
	position: relative;
}
.myseppi_box svg{
	display: block;
}
.myseppi_box span{
	display: block;
	color: #fff;
	margin-top: 50px;
}
.produkte_box a, .myseppi_box a{
	width: 100%;
	height: 100%;
	font-size: 1.8rem;
	font-weight: 600;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	flex-direction: column;
	padding: 50px 25px;
	cursor: pointer;
}

.otgs-development-site-front-end{
	display: none;
}


.home_content_flex_box{
	display: flex;
	align-content: flex-start;
	flex-direction: row;
	justify-content: space-between;
}
.home_content_flex_box .content_box_left{
	margin-left: 40px;
	margin-right: 0;
}
.home_content_flex_box .content_box_right{
	margin-right: 40px;
	margin-left: 0;
	padding-right: 0;
	padding-left: 40px;
}


/* Horizontal Scroll-Block */
.horizontal-section {
	position: relative;
	display: flex;
	align-items:center;
	gap: 100px;
	height: 100vh;
	overflow: hidden;
	background-color: #8E9294;
	padding-left: 100px;
	padding-right: 100px;
}

.panel{
	width: 30%;
	flex-shrink: 0;
	box-sizing: border-box;
	position: relative;
	min-height: 550px;
}
.panel::after {
	content: "";
	display: block;
	padding-top: 130%; /* Das entspricht einer Höhe von 200% der Breite */
}
.panel::before {
	content: "";
	display: block;
	background-color: rgba(30,37,41,0.4);
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
}
.panel .bild{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.panel .icon{
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 2;
	height: 60px;
}
.panel .text_box{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 2;
}
.panel .text_box h3{
	color: #fff;
	margin-bottom: 20px;
}
.panel .text_box{
	color: #fff;
	padding: 0 50px 50px 50px;
}

.qualitaetsmerkmal_icon{
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 2;
	line-height: 0;
}
.qualitaetsmerkmal_icon path{
	fill: #FFFFFF;
}
.qualitaetsmerkmal_icon svg{
	width: 150px;
}
/* //////////////////////////////////// Single Produkt-Seite //////////////////////////////////// */

/* Einleitungs Block */
.bild_box_1{
	position: relative;
	height: calc(100% - 20px); 
	width: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	z-index: 1;
}
.bild_box_3{
	width: calc(100% - 20px);
	height: 50%;
	z-index: 1;
	overflow: hidden;
	position: absolute;
	top: 0;
	line-height: 0;
}
.bild_box_1 img, .bild_box_2 img, .bild_box_3 img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.bild_box_3 video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bild_box_2{
	float: left;
	width: 50%;
	height: 100%;
	background-color: #ffffff;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.3);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 2;
	position: relative;
	line-height: 0;
}
.cat_box{
	background-color: #C20516;
	float: right;
	width: 50%;
	height: 100%;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	z-index: 2;
	position: relative;
	text-align: center;
}
.cat_box:hover{
	margin-top: -5px;
}
.cat_box a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	flex-direction: column;
	padding: 25px;
}
.cat_box .title{
	display: block;
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 20px;
	line-height: 1.2;
}
.cat_box .cat_name{
	display: block;
	color: #1E2529;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
	font-size: 1rem;
}

.button_form{
	width: 100%;
	overflow: hidden;
	position: relative;
	background-color: #C20516;
	text-align: center;
}
.submit_anfrage_angebot{
	border: none;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	vertical-align: middle;
	padding: 6px 20px !important;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 2;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	float: none;
	position: relative;
	width: 100%;
	display: block;
	line-height: 1.6;
}
.button_form::before {
	content: '';
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	left: -5%;
	bottom: -150%;
	width: 110%;
	height: 100%;
	background-color: rgba(30, 37, 41, 0.2);
	transform: rotate(-5deg);
	z-index: 1;
}
.button_form:hover::before{
	bottom: -50%;
}




/* Content Block */
.single_content_flex_box{
	display: flex;
	align-content: flex-start;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.content_box_left{
	margin-right: 40px;
	width: 45%;
}
.content_box_left .image_box{
	padding-bottom: 60%;
	width: 60%;
	position: relative;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
}
.content_box_left .image_box:first-child{
	float: right;
}
.content_box_left .image_box:last-child{
	margin-top: -10%;
	float: left;
}
.content_box_left .image_box img{
	position: absolute;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
.content_box_right{
	margin-left: 40px;
	width: 55%;
	padding-right: 40px;
}
.content_box_right h1, .content_box h1{
	margin-bottom: 20px;
}
.content_box_right h2, .content_box h2{
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.dealer_box_left{
	margin-left: 40px;
	width: 55%;
	padding-right: 40px;
}
.dealer_box_left h1{
	margin-bottom: 20px;
}
.dealer_box_left h2{
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.dealer_box_right{
	margin-left: 40px;
	margin-bottom: 40px;
	width: 45%;
}
.dealer_box_right .image_box{
	padding-bottom: 60%;
	width: 60%;
	position: relative;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
}
.dealer_box_right .image_box:first-child{
	float: right;
}
.dealer_box_right .image_box:last-child{
	margin-top: -10%;
	float: left;
}
.dealer_box_right .image_box img{
	position: absolute;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
.dealer_info{
	margin:40px 0;
}
.dealer_info p{
	margin:0;
}
.produkt_infos{
	position: relative;
	margin: 40px auto;
}
.info_box{
	position: relative;
	padding: 15px 0;
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 20px;
	flex-wrap: wrap;
}
.info_box_werkzeuge{
	flex-wrap: nowrap;
}
.info_box:last-child:after{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background: #8D9092;
}
.info_box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background: #8D9092;
}
.info_box svg{
	max-width: 30px;
}

.info_box .icon_box{
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 10px;
}
.info_box .icon_box svg{
	max-width: 35px;
	max-height: 35px;
	display: block;
	height: 25px;
}
.info_box .icon_box svg .fill_application_icon{
	fill: #000;
}

.flex_box_werkzeuge{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}
.info_box h3{
	margin: 0;
	font-weight: 300;
	text-decoration: underline;
	font-size: 1rem;
	text-transform: uppercase;
}
.info_box h3:hover{
	cursor: pointer;
	color: #cccccc;
}

.durchmesser_box{
	display: flex;
	justify-content: center;
	gap: 10px;
}

.button_box{
	display: inline-block;
}
.button_box .button{
	display: block;
	margin-bottom: 20px;
}
.button_box .button:last-child{
	margin: 0;
}

/* Produkt Applications */
.applications_flexbox{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 100px;
}
.applications_liste{
	width: 50%;
}
.applications_liste ul, .applications_liste_2 ul{
	list-style: none;
	padding: 0;
	margin: 0 0 15px 0;
}
.applications_liste ul li, .applications_liste_2 ul li {
	background-image: url('https://www.seppi.com/wp-content/themes/effekt/images/auflistung.svg');
	background-size: 20px;
	background-position: left top 8px;
	background-repeat: no-repeat;
	padding-left: 30px;
}
.applications_liste li:last-child, .applications_liste_2 li:last-child{
	margin: 0;
}

.applications_flexbox img{
	width: 50%;
}

/* Video */
#video-link img{
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
}
.video-link{
	display: block;
}
.video_logo{
	position: absolute;
	left: 40px;
	top: 0;
	width: 200px;
}
.video_playbutton{
	position: absolute;
	width: 50px;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
}

/* Velrinkungen */
.flex_box_verlinkungen{
	display: flex;
	justify-content: center;
	flex-direction: row;
	gap: 40px;
	align-items: stretch;
}
.verlinkungs_box{
	background-color: #F3F4F4;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	width: 33.33%;
	position: relative;
}
.verlinkungs_box:last-child{
	background-color: #C20516;
	color: #ffffff;
	font-size: 1.6rem;
	padding: 30px;
	cursor: pointer;
}
.verlinkungs_box a{
	display: block;
	padding: 30px;
	width: 100%;
	height: 100%;
	color: #1E2529;
	font-size: 1.6rem;
}
.verlinkungs_box span{
	display: block;
	margin-bottom: 56px;
	font-weight: 500;
}
.verlinkungs_box svg{
	width: auto;
	height: 36px;
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.verlinkungs_box a:hover, .verlinkungs_box:hover{
	background-color: #8E9294;
	color: #ffffff;
}
.verlinkungs_box a:hover .stroke_hover, .verlinkungs_box:last-child .stroke_hover{
	stroke: #ffffff;
}




/* Qualitätsmerkmale */
.flex_box_qualitatsmerkmal{
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
	flex-grow: 1;
}
.qualitatsmerkmal_box{
	background-color: #8E9294;
	width: auto;
	line-height: 0;
	border-radius: 7px;
}
.qualitatsmerkmal_box:hover{
	background-color: #707070;
	cursor: pointer;
}
.qualitatsmerkmal_box svg, .qualitatsmerkmal_box img{
	height: 70px;
	width: auto;
}





.popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: scroll;
	background-color: rgba(30, 37, 41, 0.7);
	z-index: 11;
	display: none;
	text-align: center;
	padding: 0 25px;
}
.flexbox_popup{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: calc(100% - 100px);
	margin: 50px auto;
}
#inner_popup, #inner_popup_suche{
	background-color: #ffffff;
	padding: 50px 25px;
	max-width: 600px;
	margin: 0 auto;
}
#inner_popup svg, #inner_popup img, #inner_popup_suche svg, #inner_popup_suche img{
	height: 100px;
	width: auto;
	margin-bottom: 20px;
}
.close_popup, .close_popup_suche{
	background-color: #1E2529;
	width: 40px;
	height: 40px;
	padding: 12px;
	line-height: 0;
	border-radius: 50px;
	margin-bottom: -20px;
	z-index: 2;
	cursor: pointer;
}
.close_popup:hover, .close_popup_suche:hover{
	background-color: #8E9294;
}

/* Quicklinks */
.quick_links{
	position: fixed;
	right: -70px;
	top: calc(50% - 107px);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	z-index: 2;
}
.quick_links a, .spezial_quick_link{
	background-color: #1E2529;
	width: 70px;
	height: 70px;
	text-align: center;
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #ffffff;
}
.spezial_quick_link{
	background-color: #C20516;
	margin: 0;
}
.quick_links a:hover, .spezial_quick_link:hover{
	background-color: #8E9294;
	cursor: pointer;
}


.quick_links a svg, .spezial_quick_link svg{
	width: 20px;
	height: auto;
}
.quick_links a span, .spezial_quick_link span{
	display: block;
	font-size: 0.7rem;
	margin-top: 5px;
	text-transform: uppercase;
}


.single_carousel_range{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.single_carousel_range .range_box{
	display: flex;
	align-items: center;
	gap: 0 20px;
	cursor: pointer;
}
.single_carousel_range .range_box span{
	display: block;
	color: #8E9294;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.swiper_single_carousel .swiper_arrows{
	width: 10px;
	line-height: 0;
	cursor: pointer;
	margin: 0 10px;
}


/* Produkt has child page */
.flex_box_child_produkt{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 50px;
	flex-wrap: wrap;
}
.child_produkt_box{
	width: calc(50% - 25px);
	display: flex;
	flex-direction: row;
	gap: 30px;
	align-items: center;
	position: relative;
	transition: all 0.4s ease;
}
.child_produkt_box:hover{
	cursor: pointer;
}
.child_produkt_box img{
	width: 100px;
}
.child_produkt_box h3{
	margin: 0;
	text-transform: uppercase;
	font-weight: 300;
	text-decoration: underline;
	font-size: 1.25rem;
}
.child_produkt_box:hover h3{
	color: #C20516;
}





/* //////////////////////////////////// Anwendungen //////////////////////////////////// */
.auflistung_anwendungen{
	margin-top: 50px;
}
.grid_item_anwendungen{
	width: calc(50% - 20px);
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	overflow: hidden;
	margin-bottom: 40px;
}
.grid_item_anwendungen:last-child{
	margin: 0;
}
.grid_item_anwendungen:nth-child(3){
	margin-top: 100px;
}
.grid_item_anwendungen a{
	display: block;
	position: relative;
}
.grid_item_anwendungen a::after{
	padding-top: 130%;
	content: "";
	display: block;
}
.grid_item_anwendungen a::before {
  content: "";
  display: block;
  background-color: rgba(30,37,41,0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
.grid_item_anwendungen img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	transition: transform 0.3s;
}
.grid_item_anwendungen a:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.gutter_sizer_anwendungen{
	width: 40px;
}
.grid_item_anwendungen  h2{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 2;
	color: #fff;
	padding: 0 50px 50px 50px;
	margin: 0 auto;
}
.anwendungs_icons{
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 2;
}
.anwendungs_icons svg {
	height: 30px;
	margin-right: 10px;
}
.anwendungs_icons svg:last-child{
	margin: 0;
}
.anwendungs_icons svg .fill_application_icon {

}
.startbild{
	height: 60vh;
}
.startbild img{
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: cover;
}
/* //////////////////////////////////// News //////////////////////////////////// */
.grid {
  margin-bottom: 60px;
}
.gutter-sizer{
	width: 30px;
}
.grid-item {
	width: calc(33.33% - 20px);
	margin-bottom: 30px;
	background-color: #FFFFFF;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	-webkit-transition: all ease 0.5s !important;
	-moz-transition: all ease 0.5s !important;
	transition: all ease 0.5s !important;
	opacity: 0;
    transform: translateY(20px);
}
.grid-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.grid-item:nth-child(3){
	margin-top: 60px;
}
.grid-item a, .grid-item img{
	display: block;
}
.grid-item:hover{
	margin-top: -5px;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.3);
}
.grid-item:nth-child(3):hover{
	margin-top: 55px;
}

.grid-item .news_text{
	padding: 15px 30px 70px 30px;
	text-align: left;
}
.grid-item .news_text h3{
	font-size: 1.5rem;
	font-weight: 400;
	margin-bottom: 0;
}
.grid-item .news_text .untertitel, .untertitel{
	background-color: #1E2529;
	color: #fff;
	font-size: 0.7rem;
	display: inline-block;
	padding: 0px 4px;
	margin-bottom: 10px;
	margin-right: 5px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.flex_box_bilder{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	flex-direction: row;
	flex-wrap: wrap;
}
.bild_box_galerie{
	width: calc(50% - 20px);
	position: relative;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
}
.schatten img{
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
}
.bild_box_galerie::after{
	padding-top: 100%;
	content: "";
	display: block;
}
.bild_box_galerie img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	transition: transform 0.3s;
}

.grid_buttons{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}




/* //////////////////////////////////// Sidewrapper //////////////////////////////////// */
.sidewrapper {
    width: auto;
    position: fixed;
    left: 17px;
	z-index: 9;
}

.sidewrapper nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidewrapper nav ul li {
    margin: 10px 0;
	position: relative;
	width: 3px;
	height: 25px;
	background-color: #222222;
}
.sidewrapper nav ul li.active{
	background-color: #C20516;
}
.sidewrapper nav ul li a {
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -10px;
	right: -10px;
	display: block;
	z-index: 2;
}

.sidewrapper nav ul li.active a {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


/* //////////////////////////////////// Kategorien Filter //////////////////////////////////// */
.accordion {
	display: none;
}
.kategorien_box{
	margin: 50px 0;
}
.kategorien_box .w1280{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-flow: wrap;
	gap: 10px;
}

.kat_box a, .term-filter{
	text-transform: uppercase;
	color: #1E2529;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 0.9rem;
	padding: 2px 10px;
	display: block;
	border: 2px solid #8E9294;
}
.kat_box a:hover, .kat_box.active_cat a{
	color: #ffffff;
	display: block;
}
.term-filter:hover, .term-filter.active{
	background-color: #8E9294;
	color: #ffffff;
	cursor: pointer;
}


.flex_box_filter{
	display: flex;
	align-items: center;
	padding: 25px 0;
}
.filter_box{
	text-align: center;
	margin-right: 100px;
}
.filter_box .icon_box{
	height: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.filter_box .icon_box svg{
	display: block;
	width: 40px;
}
.filter_box span.beschreibung{
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 10px;
}
.box{
	margin-top: 20px;
}
#slider-ps, #slider-width{
	margin: 0 auto 20px;
}
.slider_besch{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.slider_besch span{
	display: block;
	color: #8E9294;
	font-size: 1rem;
}




.grid-item-produkt {
	width: calc(33.33% - 20px);
	margin-bottom: 30px;
	text-align: center;
	-webkit-transition: all ease 0.3s !important;
	-moz-transition: all ease 0.3s !important;
	transition: all ease 0.3s !important;
	overflow: hidden;
}
.grid-item-produkt a{
	display: block;
	color: #1E2529;
	padding: 0 25px 50px;
}
.grid-item-produkt img{
	display: block;
}
.grid-item-produkt:hover{
	margin-top: -5px;
	box-shadow: 0px 15px 25px rgba(0,0,0,0.3);
}
.grid-item-produkt h3{
	font-size: 1.25rem;
	letter-spacing: 1px;
	margin: 0 auto 10px;
	font-weight: 500;
}
.grid-item-produkt span{
	font-size: 1rem;
	display: block;
}

.grid-item-produkt .dash{
	width: 60%;
	height: 5px;
	margin: 0 auto;
	position: absolute;
	bottom: -5px;
	left: 20%;
	-webkit-transition: all ease 0.1s;
	-moz-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
.grid-item-produkt:hover .dash{
	bottom: 0px;
}



/* //////////////////////////////////// Call-Back-Service //////////////////////////////////// */
.callback_flex{
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: flex-start;
}

.titel_icon_box{
	margin-bottom: 40px;
}
.titel_icon_box svg{
	margin-right: 20px;
	display: inline-block;
	vertical-align: middle;
}
.titel_icon_box h1{
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
}

.call_back_links{
	width: calc(100% - 440px);
}
.call_back_rechts{
	width: 300px;
	background-color: #C20516;
	overflow: hidden;
	position: relative;
}
.call_back_rechts a{
	display: block;
	padding: 30px;
	color: #ffffff;
	z-index: 2;
	position: relative;
}
.call_back_rechts h2{
	color: #ffffff;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.call_back_rechts svg{
	float: right;
	display: block;
	margin: 10px 0px 30px;
}

.call_back_rechts::after {
	content: '';
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	left: -5%;
	bottom: -150%;
	width: 110%;
	height: 100%;
	background-color: rgba(30, 37, 41, 0.2);
	transform: rotate(-5deg);
	z-index: 1;
}

.call_back_rechts:hover::after{
	bottom: -50%;
}


.submit_call_back_dealer{
	background: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	width: auto;
	border: none;
	border-radius: 0;
	position: relative;
	cursor: pointer;
	color: #C20516;
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 2;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	float: none;
}
.submit_call_back_dealer:hover{
	cursor: pointer;
	text-decoration: underline;
}



/* //////////////////////////////////// Kontaktformular //////////////////////////////////// */
.form_box{
	background-color: #ffffff;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	padding: 50px;
	width: auto;
	max-width: 650px;
	margin-top: 40px;
	overflow: hidden;
}
fieldset{
	margin: 0;
	padding: 0;
}
.form_box .schritt_titel{
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 40px;
	display: block;
}
.row{
	display: block;
	margin-bottom: 20px;
	position: relative;
	z-index: 3;
}
.row span{
	margin: 0 auto;
	display: block;
}
.row input{
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 55px;
    border: none;
	border-bottom: 2px solid #AF2B27;
    border-radius: 0;
    background-color: #F3F4F4;
    color: #1E2529;
	padding: 10px 20px;
	font-size: 1.25rem;
	font-family: "itc-officina-sans-pro", sans-serif;
}
.row select{
	display: block;
	width: 100%;
	height: 55px;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1.25rem;
	padding: 10px 20px;
	color: #1E2529;
	border: none;
	border-bottom: 2px solid #AF2B27;
    border-radius: 0;
    background-color: #F3F4F4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('https://www.seppi.com/wp-content/themes/effekt/images/arrow_select.svg');
	background-position: center right 20px;
	background-size: 12px;
	background-repeat: no-repeat;
}



.row p{
	font-size: 1rem;
}

.wpcf7-form .fieldset-cf7mls .cf7mls-btns{
	text-align: center;
	min-height: 0;
	margin: 40px auto 0;
}
.cf7mls-btns p{
	display: none;
}
.cf7mls-btns .action-button{
	width: auto;
	overflow: hidden;
	border: none;
	border-radius: 0;
	position: relative;
	background-color: #C20516;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 20px !important;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 2;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	float: none;
}
.cf7mls-btns .action-button:hover{
	opacity: 1;
}
.cf7mls-btns .action-button::after {
	content: '';
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	left: -5%;
	bottom: -150%;
	width: 110%;
	height: 100%;
	background-color: rgba(30, 37, 41, 0.2);
	transform: rotate(-5deg);
	z-index: -1;
}
.cf7mls-btns .action-button:hover::after{
	bottom: -50%;
}
.cf7mls-btns .cf7mls_next.action-button, .cf7mls-btns .cf7mls_back.action-button{
	margin: 0 auto !important;
}
.cf7mls-btns .cf7mls_back.action-button{
	margin-right: 20px !important;
}
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0;
	border: none;
	color: #fff;
	font-size: 0;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .fieldset-cf7mls-wrapper div.wpcf7-validation-errors{
	margin: 40px auto 0;
	padding: 15px;
	border: 2px solid #C20516;
	color: #C20516;
	text-align: center;
	font-size: 1rem;
}
.fieldset-cf7mls-wrapper div.wpcf7-validation-errors .wpcf7-icon-wraning{
	display: none;
}


.raido_buttons .wpcf7-list-item, .wpcf7-list-item{
	display: block;
	width: 100%;
	margin: 0 auto 20px;
}
.raido_buttons .wpcf7-list-item:last-child{
	margin: 0 auto;
}
.raido_buttons input[type="radio"] {
  display: none;
}
.raido_buttons span.wpcf7-list-item-label {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	cursor: pointer;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1.25rem;
	color: #1E2529;
	background-color: #F3F4F4;
	border-bottom: 2px solid #AF2B27;
	padding: 10px 20px;
}
.raido_buttons span.wpcf7-list-item-label:hover {
	background-color: #8E9294;
	color: #ffffff;
	background-image: url('https://www.seppi.com/wp-content/themes/effekt/images/radio_arrow.svg');
	background-size: 30px;
	background-position: center right 20px;
	background-repeat: no-repeat;
}
.raido_buttons input[type="radio"]:checked + .wpcf7-list-item-label {
  background-color: #C20516;
  color: #ffffff;
  background-image: url('https://www.seppi.com/wp-content/themes/effekt/images/radio_arrow.svg');
  background-size: 30px;
  background-position: center right 20px;
  background-repeat: no-repeat;
}

.row textarea{
	width: 100%;
	max-width: 100%;
	min-height: 200px;
	display: block;
	border: none;
	border-bottom: 2px solid #AF2B27;
	background-color: #F3F4F4;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	color: #1E2529;
	padding: 10px;
}
.privacy_titel{
	font-weight: 600;
	font-size: 1.25rem;
}




/* custom checkbox styling for contact form 7 checkbox */
.wpcf7-checkbox .wpcf7-list-item label{
	display: block;
	position: relative;
	cursor: pointer;
}
.wpcf7-checkbox .wpcf7-list-item label input[type=checkbox] {
	display: none;
}
.wpcf7-checkbox input[type=checkbox] + span:before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 0;
	height: 20px;
	width: 20px;
	top: 8px;
	left: 0px;
	border: 1px solid #1E2529;
}
.wpcf7-checkbox input[type=checkbox] + span:after {
	display: block;
	position: absolute;
	content: "\2713";
	height: 20px;
	width: 20px;
	top: 8px;
	left: 0;
	visibility: hidden;
	font-size: 1rem;
	text-align: center;
	line-height: 20px;
	color: #C20516;
}
.wpcf7-checkbox input[type=checkbox]:checked + span:before {
	background: transparent;
}
.wpcf7-checkbox input[type=checkbox]:checked + span:after {
	visibility: visible;
}
.wpcf7-list-item-label {
	margin-left: 35px;
	display: inline-block;
}

form.cf7mls input.wpcf7-form-control.wpcf7-submit {
	width: auto;
	overflow: hidden;
	border: none;
	border-radius: 0;
	position: relative;
	background-color: #C20516;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 20px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 2;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	float: none;
	margin: 0 auto;
}
.wpcf7 .wpcf7-submit:disabled{
	opacity: 0.3 !important;
}


.outer-wpcf7-response-output{
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: -110%;
	transition: all 0.3s ease;
	background-color: #fff;
	z-index: 10;
	margin: 0 auto;
	text-align: center;
}
.outer-wpcf7-response-output svg{
	margin-bottom: 40px;
}
.wpcf7 form.sent .outer-wpcf7-response-output{
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 1;
}
.wpcf7 form.sent .outer-wpcf7-response-output .wpcf7-response-output{
	font-size: 1.25rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #1E2529;
	border: none;
	transition: all 0.3s ease;
}




@keyframes drawCheckmark {
	to {
		stroke-dashoffset: 0;
	}
}
.sent .checkmark {
	stroke-dasharray: 100; /* Wird dynamisch durch JS überschrieben */
	stroke-dashoffset: 100; /* Startwert */
	animation: drawCheckmark 1.5s ease forwards;
	animation-delay: 0.5s;
}



.curriculum_box label{
	position:relative;
	left:0;
	padding: 10px;
	background:#F3F4F4;
	color:#7e8486;
	width: 100%;
	text-align:center;
	cursor:pointer;
	display: block;
	overflow: hidden;
	border-radius: 0px;
	border: none;
	border-bottom: 2px solid #AF2B27;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 300;
	font-family: "itc-officina-sans-pro", sans-serif;
	font-size: 1rem;
	transition: all 0.4s ease;
}
.curriculum_box label:hover{
	background-color: #AF2B27;
	color: #FFFFFF;
	border-color: #F3F4F4;
}
.curriculum_box .wpcf7-form-control-wrap>input{
	display: none;
}


/* //////////////////////////////////// Suche //////////////////////////////////// */
.result_gruppe{
	margin-bottom: 50px;
	padding-bottom: 50px;
	border-bottom: 1px solid #ccc;
}
.result_gruppe:last-child{
	margin: 0;
	padding: 0;
	border: none;
}
.result_gruppe h2{
	margin-bottom: 20px;
}
.search_result_box {
    font-size: 1rem;
	border: 1px solid #ddd;
    border-radius: 5px;
	margin-bottom: 20px;
}
.search_result_box:last-child{
	margin: 0;
}
.search_result_box p{
	margin-top: 10px !important;
}
.search_result_box a{
	display: block;
	padding: 15px;
	color: #1E2529
}
.search_result_box a:hover{
	background-color: #C20516;
	color: #ffffff;
}
.search_result_box a:hover h3{
	color: #ffffff;
}
.search_result_box h3 {
    margin: 0;
	font-size: 1.25rem;
	color: #C20516;
}


/* //////////////////////////////////// Footer //////////////////////////////////// */
footer{
	background-color: #1E2529;
	padding: 80px 0;
	overflow: hidden;
	color: #ffffff;
	z-index: 10;
}
footer a{
	color: #ffffff;
}
.link_boxen{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 100px;
	gap: 30px;
}
.link_box{
	width: calc(33.33% - 20px);
	text-align: center;
}
.link_box a{
	display: block;
	padding: 0 25px 20px;
	box-shadow: 0px 15px 40px #000000;
	background-color: #24292D;
}
.link_box svg{
	margin: -20px auto 5px;
}
.link_box span{
	display: block;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
}
.link_box a:hover{
	background-color: #222222;
	box-shadow: 0px 0px 180px rgba(255,255,255,0.1);
}

.certificates{
	position: absolute;
	right: 0;
	line-height: 1;
}
.certificates a{
	display: block;
}

.certificates span{
	display: inline-block;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	margin-right: 10px;
}
.certificates svg{
	display: inline-block;
	vertical-align: middle;
}


.adresse{

}
.adresse svg{
	margin-bottom: 30px;
}

.socials{
	position: absolute;
	right: 0;
	bottom: 0;
}
.socials a{
	display: block;
	line-height: 0;
	margin-bottom: 20px;
}
.socials a:hover .hover_fill, .certificates a:hover .hover_fill{
	fill: #8E9294;
}
.socials a:last-child{
	margin: 0;
}

.infos{
	margin: 40px 0 20px;
	font-size: 1rem;
	font-weight: 300;
	width: calc(100% - 100px);
}

.footer_menu{
	margin-bottom: 30px;
}
.footer_menu .nav-menu li a{
	opacity: 1;
	color: #AEB0B2;
}
.footer_menu .nav-menu li a:hover{
	opacity: 1;
	color: #ffffff;
}
.footer_menu .nav-menu li.current-menu-item a{
	color: #ffffff;
	border-bottom: 1px solid #c0c0c0;
}
.muster{
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 90%;
}

.impressum{
	font-size: 0.9rem;
	position: relative;
	z-index: 2;
	display: inline-block;
}
.impressum a, .impressum span{
	display: inline-block;
	vertical-align: middle;
}
.impressum span{
	margin: 0 5px;
}


/* Grundstil */
.menu-item {
  position: relative;
}

.menu-item > a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* Submenu ausgeblendet */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 180px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 99;
}

/* Submenu sichtbar bei Hover */
.menu-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu-Links */
.sub-menu li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
}

.sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* --- Dropdown Fix & Hover-Öffnen (konfliktsicher) --- */

/* Eltern-LIs positionieren, damit das Submenu absolut darunter liegen kann */
.header .nav-menu > li {
  position: relative; /* überschreibt das float-Layout nicht */
}

/* Submenu: display NICHT mehr none, stattdessen per opacity/visibility steuern */
.header .nav-menu > li > .sub-menu {
  display: block !important;              /* hebt die bestehende display:none-Regel auf */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;

  margin: 0;
  padding: 8px 0;                         /* etwas Innenabstand für die Liste */
  list-style: none;
  background: rgba(0,0,0,0.85);           /* schwarz, transparent */
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

  /* Animiertes Ein-/Ausblenden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;

  z-index: 999;                           /* über dem Header */
}

/* Anzeigen bei Hover auf dem Eltern-LI */
.header .nav-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu-Items */
.header .nav-menu > li > .sub-menu > li {
  float: none;                            /* falls vererbtes float Probleme macht */
}

/* Submenu-Links: weiße Schrift + Padding */
.header .nav-menu > li > .sub-menu > li > a {
  display: block;
  color: #fff !important;                 /* gegen globale a:hover-Farbe */
  padding: 10px 16px;
  line-height: 1.3;
  white-space: nowrap;                    /* keine Zeilenumbrüche im Menü */
  text-decoration: none;
  font-weight: 300;
}

/* Hover-State im Submenu */
.header .nav-menu > li > .sub-menu > li > a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
}

/* Optional: kleiner vertikaler Abstand zum Hauptmenü beim Ausklappen */
.header .nav-menu > li > .sub-menu {
  top: calc(100% + 6px);
}

/* Pfeil-Icons im Hauptmenü optional sichtbar lassen – falls gewünscht: */
.header .nav-menu > li.menu-item-has-children > a svg {
  display: inline-block;
  width: 7px;
  margin-left: 6px;
  transition: transform .2s ease;
}

/* Pfeil drehen, wenn offen */
.header .nav-menu > li.menu-item-has-children:hover > a svg {
  transform: rotate(180deg);
}
.nav-menu .sub-menu li {
  margin-right: 0;
}

/* >= 750px: Hover */
@media (min-width: 1100px) {
  	.nav-menu li.menu-item-has-children:hover > .sub-menu { display: block; }
	.nav-menu li.open_products:hover .sub-menu{
		display: none!important;
	}
	.nav-menu li.open_applications:hover .sub-menu{
		display: none!important;
	}
}

/* < 750px: Klick-Toggle */
@media (max-width: 1099.98px) {
    /* hohe Spezifität + !important gegen Theme-Regeln */
    .nav-menu > li.menu-item-has-children > .sub-menu { display: none !important; }
    .nav-menu > li.menu-item-has-children.is-open > .sub-menu { display: block !important; }
    .nav-menu li.menu-item-has-children > a { cursor: pointer; }
	.nav-menu .sub-menu li{margin: 0 auto 0;}
}





/* //////////////////////////////////// VIDEOS //////////////////////////////////// */
/* --- Filter bar --- */
.video-filter-bar {
  	display: flex;
  	flex-wrap: wrap;
 	gap: 10px;
  	margin: 0 0 20px 0;
}
.video-filter-bar button {
  	appearance: none;
  	background: #fff;
  	cursor: pointer;
  	transition: transform .05s ease, background .2s ease, border-color .2s ease;
	
	text-transform: uppercase;
	color: #1E2529;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 0.9rem;
	padding: 2px 10px;
	display: block;
	border: 2px solid #8E9294;
	font-family: "itc-officina-sans-pro", sans-serif;
  	line-height: 1.6;
}
.video-filter-bar button:hover { transform: translateY(-1px); }
.video-filter-bar button.is-active {
	color: #fff; 
	background-color: #c20516;
}

/* --- Grid Masonry (links→rechts + unterschiedliche Höhen sauber packen) --- */
.video-grid {
  	display: grid !important;
  	grid-template-columns: repeat(3, 1fr); /* 3 Spalten am Desktop */
  	--grid-gap: 30px;
  	gap: var(--grid-gap);
  	align-items: start;

  	/* Masonry: kleine Auto-Row-Höhe; JS setzt pro Card die Row-Span */
  	--row-height: 8px;            /* je kleiner, desto feiner das Raster */
  	grid-auto-rows: var(--row-height);
}

/* Karten normal fließen lassen (keine Columns mehr) */
.video-card {
  	display: block;
  	width: 100%;
  	break-inside: avoid;
  	-webkit-column-break-inside: avoid;
  	page-break-inside: avoid;
  	text-decoration: none;
  	color: inherit;
  	overflow: hidden;
  	background: #fff;
	background-color: #FFFFFF;
	box-shadow: 0px 15px 40px rgba(0,0,0,0.16);
	-webkit-transition: all ease 0.5s !important;
	-moz-transition: all ease 0.5s !important;
	transition: all ease 0.5s !important;

  	/* vom JS berechnet */
  	grid-row: span var(--row-span, 1);
}
.video-card:focus-visible {
	outline: 2px solid #c20516;
	outline-offset: 2px;
}

.video-card .thumb-wrap {
  	position: relative;
  	aspect-ratio: 16 / 9;
  	overflow: hidden;
  	background: #f3f3f3;
}
.video-card img.thumb {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	display: block;
  	transform: scale(1.001);
}
.video-card .play-overlay {
  	position: absolute;
  	inset: 0;
  	display: grid;
  	place-items: center;
  	pointer-events: none;
}
.video-card .play-overlay img,
.video-card .play-overlay svg {
  	width: 40px; 
	height: 40px; /* 40x40 Icon zentriert */
  	image-rendering: -webkit-optimize-contrast;
}
.video-card .meta {
  	padding: 15px 30px 70px 30px;
}
.video-card .title {
  	font-size: 1.5rem;
  	font-weight: 400;
  	margin-bottom: 0;
	line-height: 1.2;
	text-align: left;
}

/* Hidden state for filtering */
.video-card.is-hidden { display: none !important; }

/* --- Responsive --- */
@media (max-width: 960px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
}



.video-embed{
  width:100%;
  aspect-ratio:16/9; /* 4/3, 21/9 etc. */
}
.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.video-embed{
  position:relative;
  width:100%;
}
.video-embed::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 => 9/16*100 */
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}



/* //////////////////////////////////// CLEARFIX do not group these rules //////////////////////////////////// */
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1; /* For IE 6/7 (trigger hasLayout) */
}