#footer_wrapper {
	background-color: var(--delsana_button_grey);
	padding:5vh 0;
}


footer{
	container-type: inline-size;
	container-name: footer_container;
}

.footer_layout {
	display: grid;
	grid-template-columns: 1fr auto;
	font-size: clamp(.7rem, 1.5vw, .8em);
	gap:20px;
}
.footer_nav_box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.footer_logo img {
	width:clamp(160px, 30vw,80%);
}
.footer_layout ul,
.footer_layout li,
.footer_layout a {
	list-style:none;
	padding:0px;
	text-indent: 0;
	text-decoration: none;	
	transition:all .5s ease;
}
.footer_layout a {
	color:white;
}
.footer_layout a:hover {
	color:red;
}



.footer_nav_box .footer_product_nav .navi_headline:after {
	transition:all .5s ease;
}
.footer_nav_box .footer_product_nav.active .navi_headline:after {
	transform: rotate(45deg);	
}
.footer_nav_box .footer_product_nav:hover .navi_headline:after {
	transform: rotate(270deg);	
}

.navi_element_list {
	gap: .5vh;
}
.navi_element {
	text-transform:uppercase;
	-font-size:1rem;
	width:100%;
	display: flex;
}
.navi_element:hover {
	background-color:#ffffff20;
}
.navi_element:hover a{
	color:var(--delsana_blue);
}
.navi_element a{
	padding: .2em .6em;
	border: 1px solid #ffffff50;
	width:100%;
}

/*   FOOTER   */
.footer-top-link {
	text-indent: -999em;
}
.footer-top-link:after {
	font: 1.06667em / 1 "RockSolid Icons";
	content: "\e01a";
	-webkit-font-smoothing: antialiased;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 1.0625em;
	background-color: var(--delsana_background_darkgrey);
}



.footer_column .footer_siegel{
	width:60%;
}
.footer_column .footer_siegel .footer_img{
	width:100%;
	_max-width:180px;
}
.copyright {
	margin-top:0vh;
	padding:2vh 0;
}


/*                 container queries                */

@container footer_container (min-width: 200px) {
	.footer_layout {
		grid-template-columns: 1fr ;
		grid-template-rows: 1fr auto ;
	}
	.footer_nav_box {
		_grid-template-columns: repeat(auto-fit, minmax(30ch,1fr));
		grid-template-columns:1fr;
		gap:10px;
	}
	.footer_nav_box .footer_product_nav ul {
		display: none;
	}
	.footer_nav_box .footer_product_nav.active ul {
		display: grid;
	}
	.footer_nav_box .footer_product_nav .navi_headline {
		position: relative;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ffffff50;
		margin-bottom: .2rem;
		padding-bottom: 0.2rem;
		-font-size:1rem;
		text-transform:uppercase;
		font-weight:400;
	}
	.footer_column .footer_siegel{
		width:75%;
		margin-top:2vh;
	}
	
	.footer_delsana_info,
	.footer_fp_info {
		text-align: center!important;
		justify-items: center;
	}
	.copyright div {
		text-align:center;
	}
	.page-footer .page_section.copyright {
		flex-direction: row;
		_white-space: pre;
		flex-wrap: wrap;
	}	
}


@container footer_container (min-width: 800px) {
	.footer_layout {
	}
	.footer_address {
		display: grid;
		grid-template-columns: 160px auto auto;
		padding-bottom:.5rem;
		margin-bottom:.5rem;
		border-bottom: 1px solid #ffffff50;
		gap:.5vh;
	}
	.footer_nav_box {
		grid-template-columns: repeat(auto-fit, minmax(25ch,1fr));
		_grid-template-columns:1fr;
	}
	.footer_nav_box .footer_product_nav ul {
		display: grid;
	}
	.footer_nav_box .footer_product_nav .navi_headline {
		border-bottom: 0px solid #ffffff50;
	}
	.footer_nav_box .footer_product_nav .navi_headline:after {
		display: none;
	}
	.navi_text p {
		margin-top:0px;
	}
	.copyright div {
		text-align:center;
	}
	.page-footer .page_section.copyright {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	
}

@container footer_container (min-width: 1150px) {
	.footer_layout {
		grid-template-columns: 2fr 6fr;
		grid-template-rows: 1fr ;
	}
	.footer_address {
		display: grid;
		grid-template-columns: 1fr;
		padding-bottom:0rem;
		margin-bottom:0rem;
		border-bottom: 0px solid #ffffff50;
	}
	.footer_column .footer_siegel{
		width:60%;
	}
	.footer_column:has(.footer_siegel){
		justify-items: end;
		align-content: end;
	}
	.copyright div {
		text-align:center;
	}
	.page-footer .page_section.copyright {
		flex-direction: row;
		flex-wrap: nowrap;
	}
.footer_fp_info {
		text-align: left!important;
		justify-items: center;
		padding: 0!important;
		padding-left:1ch!important;
	}
	.footer_delsana_info {
		text-align: right!important;
		justify-items: center;
		padding: 0!important;
	}
	
}