/*  mobile mod filter  */

#filter_anwendungen:has(li.active) .filter_lable:before,
#filter_hersteller:has(li.active) .filter_lable:before,
#filter_leuchtentyp:has(li.active) .filter_lable:before,
#filter_montageart:has(li.active) .filter_lable:before{
	content: '';
	background: url(/files/images/delsana/icons/filter_icon.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	right: 30px;
	position: absolute;
}


/* --------------------- markenseite ---- */

.marken_box {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
	_grid-auto-flow: column;
	gap:2em;
	border-bottom: 1px solid #000;
	padding-bottom:5vh!important;
}
.marken_box:last-child{
	_border-bottom: 0px solid #000;
}
.marken_box .image_container {
	_max-width: 80%;
}
.marken_box .marken_box_item.logo_box {
	_padding:4vh 0;
}
.marken_box .marken_box_item.logo_box .image_container img{
	max-height: 120px;
	margin-bottom:2vh;
}
.page_section:has(.marken_box) {
	padding-top:0px!important;
}
.page_section:has(.marken_box) :first-child {
	_padding-top:1vh!important;
}
.page_section:has(.marken_box):last-child {
	border:0px!important;
}


#produkt_highlights {
	padding:2vh 0px 2vh 0px;
}

.intro_produkte_container {
	display:flex;
	flex-direction:column;
	padding-top:0px;
}
@container product_ausgabe_container (min-width: 200px) {
	.product_liste{
		gap:var(--listen_gap);
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

}
@container product_ausgabe_container (min-width: 800px) {
	.product_liste{
		gap:var(--listen_gap);
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

}

.product_image {
	background-color: var(--placeholer_color);
}
.product_box {
	margin-bottom: 2vh;
}
.product_box a {
	text-decoration:none;
	color: var(--text_color);
}
.product_box a:hover {
	color: var(--mid_grey_background);
}

.product_box .product_image{
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	padding:0px;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	transition: all .4s ease-in-out;
	border: 1px solid #00000020;
}
.product_box .product_image:hover{
	_border-radius: 30px;
	transition: all .4s ease-in-out;
	margin-top:-1vh;
}
.product_box .product_image img {
	position: absolute;
	top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
}
.product_box .product_image .label {
	background-color:var(--delsana_button_grey);
	position: absolute;
	width:clamp(20px,3vw, 30px);
	height:clamp(20px,3vw, 30px);
	aspect-ratio:1/1;
	display: flex;
	left:2vw;
	align-items: center;
	justify-content: center;
	transition: all.3s ease;
	top:0px;
	align-items: center;
	justify-items: center;
	justify-content: center;
	z-index: 2;
}
.product_box .product_image .label:before {
	width: calc(clamp(20px,3vw, 30px)* .8);
	height: calc(clamp(20px,3vw, 30px)* .8);
	background-color:#fff;
	margin:0px;
	padding:0px;
}
.product_text .product_name,
.product_text a .product_name {
	font-size: clamp(1rem, 2.5vw, 2rem);
	font-weight:300;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1.1em;
	margin-top:.5vh;
}
.product_text .product_tags,
.product_text a .product_tags {
	font-size: clamp(.75rem, 1.4vw, 1.2rem);
	font-weight:300;
	line-height: 1.2em;
	text-decoration:none;
	margin-top:.3vh;
}

/*         PRODUKT FILTER     */

.product_finder {
	container-type: inline-size;
	container-name: product_finder_container;
	background-color: var(--delsana_background_lightgrey);
}
.product_ausgabe {
	container-type: inline-size;
	container-name: product_ausgabe_container;
	background-color: #fff;
}

.filter_content {
	padding-top:4vh;
}
.filter_content_liste {
	
}
.filter_content_liste.grid_liste {
	gap:.5em;
	_grid-auto-flow: column;
}
.filter_content_liste.main_filter {
	padding:0;
	margin:0;
	padding-bottom:1vh;
	margin-bottom:1vh;
	border-bottom: 1px solid var(--delsana_button_grey);	
}
.filter_content_liste .filter_object {
	padding: var(--button_padding_big);
	background-color: var(--delsana_button_lightgrey);
	display: inline;
	overflow: clip;
	color:#000;
	transition: all .4s ease;
	cursor:pointer;
	position: relative;
	display:flex;
	justify-content: flex-start;
	align-items: center;
	font-weight:400;
	
}
.filter_content_liste .filter_object.active,
.filter_content_liste .filter_object:hover {
	background-color: var(--delsana_button_grey);
	color:#fff;
	text-decoration:none;
}
.filter_content_liste .filter_object.active:before,
.filter_content_liste .filter_object:hover:before {
	background-color: #fff;
	transition:all 1.5s ease;

	
}

@container product_finder_container (min-width: 200px) {
	 .filter_content .filter_content_liste.grid_liste {
		 gap:.2em;
		 grid-auto-flow: row;
		 grid-template-columns: auto;
	 }
}
@container product_finder_container (min-width: 600px) {
	 .filter_content .filter_content_liste.grid_liste {
		 gap:.5em;
		grid-auto-flow: column;
	 }
}



/*   Product-Filter Lvl 2 */

.filter_content_level2 {
	container-type: inline-size;
	container-name: product_finder_lvl2_container;
	padding: 2vh 0;
	padding-bottom:4vh;
}

.filter_content_level2 {
	
}
.filter_content_level2 .filter_content_liste {
	display: grid;
	column-gap:1.5em;
	grid-template-columns: repeat(4, 1fr);
}

.filter_content_level2 .filter_content_liste .filter_lable {
	font-size: calc(var(--body_font_size));
	text-transform:uppercase;
	font-weight: 400;
	display: flex;
	position: relative;
	align-items:center;
}

.filter_content_level2 .filter_content_liste ul{
	margin:0;
	padding:0;
	display: grid;
	gap:5px;
	margin-top:2vh;	
}
.filter_content_level2 .filter_content_liste li {
	position: relative;
	list-style:none;
	background-color: var(--delsana_button_lightgrey);
	padding: var(--button_padding_small);
	font-size: clamp(.62rem, 1.7vw, .8rem);
	cursor: pointer;
	transition: all .4s ease;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-items: flex-end;
}
.filter_content_level2 .filter_content_liste li a {
	color:#000;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:400;	
}
.filter_content_level2 .filter_content_liste li:hover  {
	color:#fff;
	background-color: #204d7e!important;
	transition:all .5s ease-in-out;
}

.filter_content_level2 .filter_content_liste li.active{
	background-color: var(--delsana_button_grey);
	color:#fff;
}
.filter_content_level2 .filter_content_liste li:after{
	transform: rotate(45deg);
	transition:all .2s ease;
	opacity: .5;
	background-color:#000;
}
.filter_content_level2 .filter_content_liste li:hover:after,
.filter_content_level2 .filter_content_liste li.active:after{
	transform: rotate(180deg);
	opacity: 1;
	background-color:#fff;
	width:calc(var(--body_font_size));
	height:calc(var(--body_font_size));
}
@container product_finder_lvl2_container (min-width: 200px) {	 
	 .filter_content_level2 .filter_content_liste,
	 .filter_content_level2 .grid_liste {
		 display: grid;
		 column-gap:0;
		 grid-template-columns: repeat(1, 1fr);
		 gap:0;
	 }
	 .filter_content_level2 .filter_content_liste .filter_box {
		  margin-bottom:.3vh;
		  padding-bottom:.3vh;
		  border-bottom: 1px solid var(--delsana_button_grey);	
		  column-gap: 0;  
	 } 
	 .filter_content_level2 .filter_content_liste .filter_box .filter_lable.select-lable{
		 padding:5px 0px;
	 }
	 .filter_content_level2 .filter_content_liste .filter_box .filter_lable.select-lable:after {
		 background-color: #000;
		 width:calc(var(--body_font_size)*1.2);
		 height:calc(var(--body_font_size)*1.2);
		 transform:rotate(45deg);
	 }
	 .filter_content_level2 .filter_content_liste .filter_box ul{
		display:none;
	 }
	 .filter_content_level2 .filter_content_liste .filter_box.active ul{
		display:grid;
		grid-template-columns: repeat(1, 1fr);
	}
}
@container product_finder_lvl2_container (min-width: 600px) {	 
	.filter_content_level2 .filter_content_liste,
	 .filter_content_level2 .grid_liste {
		 display: grid;
		 column-gap:.5em;
		 grid-template-columns: repeat(4, 1fr);
		 gap:.5em;
	 }
	 .filter_content_level2 .filter_content_liste .filter_box ul{
		  display:grid;
	   }
	   
	   .filter_content_level2 .filter_content_liste .filter_box{
		 border:0px;
	  }
	  .filter_content_level2 .filter_content_liste .filter_box .filter_lable.select-lable:after {
		   display:none;
	   }
	  
}



/* ---------------------------------------------  Product Details  --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------ */



/* ----------    HEADER ---------*/

#product_header_container .feature_content.product .product_name .hero_subheadline {
	border-bottom:1px solid white;
	font-size: clamp(1.0em, 3vw, 1.3em);
	line-height: 1em;
	margin-bottom: 1vh;
	padding-bottom: 1vh;
	color:#ffffff50;
}
#product_header_container .feature_content.product .product_name .hero_headline {
	font-size: clamp(1.7rem, 4vw, 3rem);
	margin: 0;
	padding-bottom: 2vh;
}
/* ----------    PAGE ---------*/

.page_nav {
	container-type: inline-size;
	container-name: page_nav_container;
	padding:0px;
	background-color: var(--delsana_background_darkgrey);
	_height:10px;
	color:#fff;
	
	position: sticky;
	_margin-top:50px;
	offset-position: 50px;
	z-index:2;
	_margin-top:var(--page_nav_height);
	top:var(--page_nav_height)-50px;
	@supports (animation-timeline: view()) {
		top: 0rem;
		backdrop-filter: blur(0.35rem);
		animation: stickyNav linear forwards;
		animation-timeline: view();
		animation-range-start: calc(100vh + 5vh);
		animation-range-end: calc(
		  100vh + 5vh + 200px
		);
	  }
}

.page_nav .page_nav_inner {
	display: flex;
	flex-direction:columns;
	width:100%;
	justify-content: space-between;
}
.page_nav .page_nav_inner .nav_elements,
.page_nav .page_nav_inner .back_element {
	display: flex;
	flex-direction: row;
	gap:2vw;
}
.page_nav .page_nav_inner .back_element {
	justify-content: end;
}
.page_nav .page_nav_inner .nav_elements,
.page_nav .page_nav_inner .back_element {
	padding: .5vh 0;
}


.page_nav .page_nav_inner .nav_elements .nav_element,
.page_nav .page_nav_inner .back_element {
	text-transform:uppercase;
	color:#fff;
	font-size: calc(var(--fliesstext)*.8);
	
}
.page_nav .page_nav_inner .nav_elements .nav_element a,
.page_nav .page_nav_inner .back_element a{
	text-transform:uppercase;
	color:#fff;
	font-size: calc(var(--fliesstext)*.8);
	text-decoration: none;
}

.page_nav .page_nav_inner a:hover{
	font-weight:400;
}
	
@keyframes stickyNav {
	0%,
	100% {
	  --_headerWidth: fit-content;
	  --_logoDisplay: var(--_logoAfterAnimation);
	}
  
	100% {
	  top: 80px;
  	}
  }
@container page_nav_container (min-width: 100px) {
	  .page_nav .page_nav_inner {
		  display:none;
	  }
}
@container page_nav_container (min-width: 600px) {
	  .page_nav .page_nav_inner {
		  display:flex;
	  }
}

#detail_intro {
	container-type: inline-size;
	container-name: detail_intro_container;
}

.product_detail_intro_container {}
.product_features {}
.product_features.grid_liste {}

.spalten_element.featured_image {}
.spalten_element.product_content {}

.spalten_element.product_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0vh 0px;
}

.spalten_element .titel.underline{
	border-bottom: 1px solid #00000050;
	margin-bottom:1vh;
	padding-bottom:1vh;
	box-sizing: content-box;
}
.spalten_element.product_content h3 {
	padding:2vh 0;
}
.product_features {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.product_separator {
}
.product_separator>div {
	border-bottom:1px solid #00000050;
}
.spalten_element.featured_image,
.spalten_element.featured_image .ce_image{
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	_justify-content: center;
}
.spalten_element.featured_image .ce_image .image_container, .product_content  .ce_image .image_container {
	display: flex;
}

.spalten_element.featured_image .ce_image .image_container img {
	display: block;
	_width: 100%;
	height: auto;
	max-width: 640px;
	_aspect-ratio: 1/1;
	margin: 0px auto;
}

.product_feature_icon figure.image_container  {
	max-width:80px;
}
.product_feature_icon figure.image_container img {
	_width:100%;
}

@container detail_intro_container (min-width: 200px) {
	.featured_image {
		order:1;
	}
	.product_content {
		order:2;
	}
	.spalten_element.product_content {
		margin-bottom:2vh;
		padding-bottom:2vh;
		border-bottom: 0px solid red;
	}
	.product_features {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}
@container detail_intro_container (min-width: 500px) {
	.product_features {
		grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	}
}
@container detail_intro_container (min-width: 800px) {
	.featured_image {
		order:initial;
	}
	.product_content {
		order:initial;
	}
	.product_features {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

/* ---------------------------------------------  Product Tech Data  --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------ */

#detail_data {
	container-type: inline-size;
	container-name: product_detai_data_container;
	
}
.product_detail_data_container {
	margin-top:4vh;
}

.product_detail_data_container .tech_logos {
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap:1rem;
}

.product_detail_data_container .tech_table_container {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap:2rem;
}

.tech_table,
.tech_plans {
	padding: 3vh 0 1vh 0;
}
.tech_plans_container {
	
}

.tech_plans_container .titel,
.tech_table .titel {
	margin-bottom:.5rem;
	padding-bottom:.5rem;
	border-bottom:1px solid #000000;
}

.tech_table_row {
	display:grid;
	margin-bottom:.5rem;
	padding-bottom:.5rem;
	border-bottom:1px solid #00000050;
}
.tech_table_row:last-child {
	border:1px;
}

.tech_table_row .tech_table_column:first-child {
	font-weight:400;
	color: var(--delsana_blue);
}

.product_detail_data_container .navigation {
	padding: 20px 0;
	gap:.5rem;
}


@container product_detai_data_container (min-width: 200px) {
	.tech_table_row {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.tech_plans {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}
@container product_detai_data_container (min-width: 400px) {
	.tech_table_row {
		grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
		grid-template-rows: 1fr;
	}
}



















/* ---------------------------------------------  Product Slider  --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------ */

.slider-container {
  position: relative;
  overflow: hidden;
  background-color:#000;
  width:100%;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
  width:100vw;
}

.slide {
  flex: 0 0 100%;
  position: relative;
}

.image-container {
  width: 100%;
  
}

.text-container {
  text-align: center;
  position: absolute;
  color:#fff;
  top:3vh;
  right:5vw;
  display: flex;
}

.navigation {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.nav-item {
  cursor: pointer;
  margin: 0 5px;
}

a.ancor {
	
}

.page_section.einsatz_container {
	margin-top:4vh!important;
}