@import url('../../_layout/layout.css');

html 	{	width: 100.0%; scroll-behavior: smooth; scroll-padding-top: 7.50em; }
body 	{	width: 100.0%; --spa: clamp(1.00em, 5.00vw, 5.00em); }

*, :before 	{	box-sizing: border-box; margin: 0; padding: 0; border: 0; border-style: solid; }
	hr		{	width: 100.0%; display: block; margin: 1.00em 0; border-bottom-width: 2px; }
	table 	{ 	width: 100.0%; border-collapse: collapse; border-spacing: 0; 
				td		{	position: relative; height: 1.50em; 
				 + td	{	padding-left: 1.00em; }}}
			 
header, .menu, article, footer 					{	position: relative; display: block; width: 100.0%; overflow: hidden; }
:is(header, .menu, section, footer > div) > * 	{	width: 90.00vw; max-width: 80.00em; margin: 0 auto; }

						 main, article.detail 	{	min-height: calc(100.0dvh - 12.50em); }

/*	=================================
		Layout
	================================= */

header	{ 	display: grid; overflow: hidden; 
			> div 			{ 	height: auto; padding: 1.00em 0; display: flex; gap: 10.00em calc(var(--spa) / 2); flex-flow: row wrap; justify-content: flex-start;
				> * 		{ 	flex: 1 1 40.00%; min-width: 24.00em; } 
			&:has(.brand) 	{ 	height: 7.00em; 
				> .brand 	{ 	height: 4.00em; display: grid; place-content: center start; padding-left: 6.00em; line-height: 1.50; 
								background: url(../img/Logo_Hilfsmittel-Vermietung_24_inv.svg) no-repeat left center; background-size: contain;
					> span 	{ 	display: inline-block; font-size: 0.85em; }}
				> div 		{ 	line-height: 1.50; 
					 span 	{ 	display: inline-block; font-size: 0.85em; width: 10.00em; }}}}}

nav 	{	position: fixed; top: 0; right: 0; z-index: 5; width: 0; height: 100.0%; overflow: hidden; 
			> div		{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; padding: 2.50em;  
				> a		{	display: block; padding: 0.50em 0; }}}			

.menu 	{	position: sticky; top: 0; z-index: 4;
			> div 				{ 	height: 3.50em; padding-top: 0.50em; display: flex; gap: 10.00em calc(var(--spa) / 2); flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; flex-direction: row-reverse; overflow: hidden;	
			&:has(> span > a) 	{ 	padding-top: 0.50em; > span { 	margin-top: 0; justify-content: flex-start; }}	
				> .btn 			{ 	height: 2.50em; background-color: var(--white); color: var(--dark); 
									&:hover 	{ 	background-color: var(--acc); color: white; }}  
				> span 			{ 	min-width: calc(50.00% - (var(--spa) / 4)); margin-top: 0.625em; padding-right: 4.00em; display: flex; justify-content: flex-end; gap: 1.00em; align-content: center; align-items: center;
					> a 		{ 	height: 2.50em; padding: 0 1.00em; display: inline-grid; place-content: center; border-radius: 3.00em; box-shadow: inset 0 0 0 2px white;
									&[href^="produkte_mecklenburg-vorpommern.html"]:after 	{	content: 'Mecklenburg-Vorpommern'; }
									&[href^="produkte_ostholstein.html"]:after 				{	content: 'Ostholstein'; }}
					> a.on  	{ 	background-color: white; color: var(--dark); border-width: 0; }}}}

footer	{	> :first-child 	{ 	padding: calc(var(--spa) / 2) 0; background-color: var(--gray); 								
				> div 		{ 	display: grid; gap: calc(var(--spa) / 2) 0;  display: flex; flex-flow: row wrap; justify-content: space-between; 
					> span	{ 	margin-top: 0; }
					> div 	{ 	flex: 0 0 auto; overflow: hidden;  
								> a 		{ 	margin-top: 0.50em; padding: 0.375em 0.75em; border-radius: 3.00em; background-color: var(--acc); color: white; }
								> table 	{ 	margin-top: 1.00em; td:first-child { width: 1.00em; }}}}
				& + div 	{ 	padding: calc(var(--spa) / 2) 0; background-color: var(--dark); 
								* 			{ 	color: white; }}}}

				body:not(:has(.swiper)) 	{ 	footer > div > div > * 	{ 	font-size: 0.90em; }}				

section {	padding: var(--spa) 0; 
			> div 		{ 	display: flex; gap: calc(var(--spa) / 2); flex-flow: row wrap; justify-content: space-between;  
				> *	 	{ 	flex: 1 1 40.00%; min-width: 20.00em; }}

			&#teasers 	{ 	padding-bottom: 0; 
							> div 			{ 	> * 	{  	border-radius: 0.50em; overflow: hidden;   
								h1 > span	{ 	 }
								figure 		{ 	aspect-ratio: 16/9; border-radius: 0; }
								.btn 		{ 	margin-top: 2.00em; place-self: end; }
								
							&:nth-child(1) > div 	{ 	display: grid; gap: 1.50em; grid-template-columns: 4.00em auto; place-items: center start; max-width: 32.00em; 
														> p > span 		{	display: inline-block; margin-bottom: 0.125em; font-size: 1.50em; line-height: 1.2;  color: var(--acc); }  
														+ div 			{	 margin-top: 1.50em; }
														&:before 		{ 	font-family: icongo; font-size: 2.00em;   
																			width: 100.0%; aspect-ratio: 1; display: inline-grid; place-content: center; border-radius: 0.50em; 
																			background-color: var(--white); color: var(--dark); box-shadow: inset 0 0 0 2.5px var(--dark); }
														&:nth-child(3):before 	{ 	content: 'local_shipping'; }
														&:nth-child(4):before 	{ 	content: 'euro'; }
														&:nth-child(5):before 	{ 	content: 'accessible_forward'; }}
															
							&:nth-child(n+2) 	{	background-color: var(--white); /* border-width: 2px; */
									> div 		{ 	display: grid; padding: calc(var(--spa) / 2); }}
							&:nth-child(2) 		{	border-top-right-radius:    2.50em; }
							&:nth-child(3) 		{	border-bottom-left-radius:  2.50em; }
							&:nth-child(4) 		{	border-bottom-right-radius: 2.50em; }}}
						}
								
			&#partners 	{ 	background-color: var(--white); 
							> div	{ 	display: block; columns: 4 12.50em; gap: calc(var(--spa) / 2); column-fill: balance;     
										> div				{ 	min-width: unset; break-inside: avoid; 
										&:not(:last-child) 	{ 	margin-bottom: calc(var(--spa) / 2); }
											> div 	{ 	margin-top: 1.00em; border-top-width: 1px;  
												 a 	{ 	display: inline-grid; width: 100.0%; margin-top: 0; padding: 0.50em 0; border-bottom-width: 1px; }}}}
						}
			
			&#faq 		{ 	background-color: var(--white); padding-top: 0;
							> div	{ 	display: block; columns: 2 30.00em; gap: calc(var(--spa) / 2); column-fill: balance-all;   
										> * 		{ 	margin-bottom: calc(var(--spa) / 2); break-inside: avoid; }
										details 	{ 	padding: 1.50em; border-radius: 0.50em; border-width: 1px; background-color: var(--light); }}
						}
						
			&.legal		{	> div:has(> div + div) > div:first-child 	{ 	flex: 0 0 20.00em; }}
			
		}

/* --- Products und Details --- */	
	
.list		{ 	padding-top: 1.00em; background-color: var(--gray);
				> div			{ 	display: grid; gap: 1.00em; grid-template-columns: repeat(auto-fill, minmax(15.00em, 1fr)); 
					> * 		{ 	min-width: 10.00em;}
 					.filter		{ 	grid-column: 1 / -1; display: flex; gap: 1.00em; flex-flow: row wrap; justify-content: flex-end; 
						> label			{	flex: 0 0 auto; height: 2.50em; gap: 0.50em; display: inline-flex; 
							&:before	{ 	display: inline-grid; place-items: center; height: 100.0%; aspect-ratio: 1/1; border-radius: 100.0%; opacity: 0.50; font-family: icongo; background-color: var(--dark); color: var(--white); } 	
							&:after		{ 	display: inline-grid; place-items: center; height: 100.0%; }
							&[for=fah]:before	{ 	content: 'accessible_forward'; } 	&[for=fah]:after	{ 	content: 'Fahren'; }
							&[for=geh]:before	{ 	content: 'assist_walker'; } 		&[for=geh]:after	{ 	content: 'Gehen';  }
							&[for=sit]:before	{ 	content: 'chair_alt'; } 			&[for=sit]:after	{ 	content: 'Sitzen'; }
							&[for=lie]:before	{ 	content: 'hotel'; } 				&[for=lie]:after	{ 	content: 'Liegen'; }
							&[for=alle]:before	{ 	content: 'apps'; } 					&[for=alle]:after	{ 	content: 'Alle';   }
							&:hover:before		{ 	opacity: 1; }}}
	
				.box  	{	> h1 	{  	font-size: 1.50em; }
							> a 	{ 	margin: 1.00em 1.50em 0 0; padding: 0.375em 0.75em; border-radius: 3.00em; background-color: var(--acc); color: white;
								+ a { 	margin: 0.50em 0 1.00em 0; }}}
			}}

.detail 	{ 	background-color: var(--light); 
				> div 				{ 	gap: var(--spa); 
					> figure 		{ 	border-width: 1px; 
						&:before 	{	content: 'Abbildung ähnlich'; position: absolute; bottom: 0; right: 0; padding: 0.50em; scale: 0.85; opacity: 0.50; z-index: 2; }}
					> div:has(h1) 	{ 	table 	{ 	margin-bottom: 2.50em; 	
							td 		{ 	padding-bottom: 1.00em; vertical-align: top; }
										tr:has(.price) td 	{ 	padding-top: 1.00em; border-top-width: 2px; 
													& + td 	{ 	vertical-align: bottom; text-align: right; border-top-width: 2px; }}
										tr:last-child td 	{ 	padding-bottom: 0; }}}}}
										
/*	=================================
		Elemente
	================================= */
			
.pro 	{	position: relative; display: block; height: 100.0%; padding-bottom: 4.00em; border-radius: 0.50em; border-width: 0; background-color: var(--white); overflow: hidden; 
			&:before 	{	position: absolute; z-index: 2; top: 0.125em; right: 0.125em; opacity: 0.75; font-family: icongo; font-size: 2.50em; color: var(--cta); }
			&:after 	{	position: absolute; z-index: 2; bottom: 0.375em; right: 0.375em; font-family: icongo; font-size: 1.75em; color: var(--cta); content: 'east'; }
			> figure			{	border-radius: 0; }
			> :is(p, ul)		{	margin: 1.00em 10.00% 0; 
				&.title			{ 	font-size: 1.125em; line-height: 1.25; hyphens: none; }
				&:last-child	{	position: absolute; width: auto; bottom: 1.00em; left: 0; > span + span  { margin-left: 1.00em; }}}}
		
			.pro[href^="pro/012"]:before, .pro[href^="pro/013"]:before,	.pro[href^="pro/015"]:before,
			.pro[href^="pro/016"]:before, .pro[href^="pro/017"]:before, .pro[href^="pro/018"]:before,
			.pro[href^="pro/019"]:before, .pro[href^="pro/020"]:before,	.pro[href^="pro/021"]:before,
			.pro[href^="pro/022"]:before, .pro[href^="pro/023"]:before, .pro[href^="pro/024"]:before,
			.pro[href^="pro/025"]:before, .pro[href^="pro/026"]:before,	.pro[href^="pro/027"]:before  	{	content: 'offline_bolt'; }
		
figure 	{ 	position: relative; background: url(../img/Logo_Hilfsmittel-Vermietung_24_inv.svg) no-repeat center; background-size: 25.00%; border-radius: 0.50em; overflow: hidden; 
			 > :is(img, video)	{ 	display: block; width: 100.0%; height: 100.0%; object-position: 50.00% 50.00%; object-fit: cover; }
				&:has(video)	{ 	aspect-ratio: 16/9; }
				&:has(img)		{ 	aspect-ratio: 1; }
			> figcaption 		{ 	position: absolute; z-index: 2; bottom: 1.00em; left: 1.00em; scale: 0.85; transform-origin: 0 100.0%; color: white; }}
			
			.lazyImage img  		{ 	opacity: 1; transform: scale(1); transition: opacity .5s, transform .5s; }
			.lazyImageWaiting img 	{ 	opacity: 0; transform: scale(0); transition: none; }

.btn	{ 	height: 3.00em; padding-left: 1.50em; display: inline-grid; grid-template-columns: auto 3.50em; place-items: center; border-radius: 3.00em; background-color: var(--acc); color: white;  
			&.cta			{	background-color: var(--cta); }
			&:after 		{	content: 'east'; scale: 1.5; font-family: icongo; }
			&:hover			{	background-color: var(--dark); }}

		button.btn:after 	{	content: 'send';}

.ico 	{	width: 2.50em; aspect-ratio: 1/1; display: grid; place-items: center;  
			&.hh			{	position: fixed; z-index: 6; top: 0.50em; right: 5.00vw; color: white; }			
			&:before		{	content: 'mood'; scale: 2.0; font-family: icongo; }
			&.back:before	{	content: 'west'; }
			&.hh:before		{	content: 'menu_open'; scale: 2.50; }}
		
a:is([href^="mailto:"], [href^="tel:"], [href^="http"]) 
		{	position: relative; display: inline-grid; grid-template-columns: 1.50em auto; place-items: start;
			& + a 						{ 	margin-top: 1.00em; }
			&:before					{	font-family: icongo; }
			&[href^="mailto:"]:before	{	content: 'mail_outline'; }
			&[href^="tel:"]:before		{	content: 'phone'; }
			&[href^="http"]:before		{	content: 'launch'; }}
		
details	{  	summary::-webkit-details-marker, summary::marker 	{ 	content: none; display: none; }
			summary 		{ 	position: relative; padding-right: 2.50em; list-style: none; 
				&:before	{ 	content: "add"; font-family: 'icongo'; position: absolute; top: 0.25em; right: 0; width: 1.25em; aspect-ratio: 1; margin-top: -0.25em; display: inline-grid; place-content: center; border-radius: 100.00%; 
								background-color: var(--dark); color: white ; scale: 1.25; opacity: 0.25; }}
			> div 			{ 	padding-top: 1.00em; max-height: 0; overflow: hidden; }
			&[open] 		{ 	summary:before	{ 	transform: rotate(-45deg); opacity: 1;}
								> div 			{ 	max-height: 20.00em; }}
		}
		
.toplink 	{	position: fixed; z-index: 6; bottom: -0.50em; right: calc(50.00% - 3.00em); width: 6.00em; height: 3.00em; display: none; place-content: center; text-align: center; border-radius: 6.00em 6.00em 0 0;
				background-color: rgb(from var(--dark) r g b / 50.00%); color: white; backdrop-filter: blur(0.80em);			
				&:before 	{	content: 'TOP'; }}

/*	=================================
		Form
	================================= */
	
select, input, textarea	{	appearance:	none; -webkit-appearance: none; -moz-appearance: none; }	
	*:focus 			{	outline: -webkit-focus-ring-color auto 0; outline: none; }
	*:-moz-focusring 	{	outline: 0; }
	::placeholder	 	{	opacity: 0.50; }
input[type=radio], 
input[type=checkbox] 	{	display: none; }
input, textarea, select { 	width: 100.0%; padding: 0 1.00em; border-width: 2px; border-radius: 0.25em; border-width: 1px; background-color: var(--white); }
input, select 			{ 	height: 3.00em; }
textarea 				{ 	height: 9.00em; padding: 1.00em; resize: vertical; }
button 					{ 	background: transparent; }

:is(input, textarea):focus 	{ 	border-width: 2px; border-color: var(--acc); }

form 	{	width: 100.0%; display: flex; gap: 0 2.00em; padding: 2.00em; flex-flow: row wrap; justify-content: space-between; border-radius: 0.50em; border-width: 1px; background-color: var(--gray); 
			> div		{	flex: 1 1 240px; display: flex; gap: 1.00em 0; flex-flow: column wrap; justify-content: space-between; 
			 	> span 	{	display: grid; place-items: end; }
				> .btn 	{	margin-top: 0.50em; }
				table tr 	{ 	> td			{	position: relative; width: 50.00%; }
								& + tr > td 	{	padding-top: 0.25em; }
								> td:has(input[name="produkt"]):before 	
												{	content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background: transparent; }}
			.hidden-field 	{ 	display: none; visibility: hidden; }}}

/* --- Checkers --- */

input.check + label						{	position: relative; display: inline-block; height: 1.50em; padding: 0.125em 1.50em 0 2.00em; }
input.check + label:before				{	content: ''; position: absolute; top: 0; left: 0; height: 1.50em; aspect-ratio: 1 / 1; border-width: 0.125em; }
input.check[type=radio] + label:before	{	border-radius: 100.0%; }
input.check:checked + label:before		{	border-radius: 0; left: 0.50em; height: 1.25em; aspect-ratio: 0.5 /1.0; transform: rotate(45deg); border-width: 0 0.25em 0.25em 0; background-color: transparent; }		
		
/*	=================================
		Effekte / Funktion
	================================= */

.pro:hover 	{	z-index: 2; box-shadow: 0 3.00em var(--spa) -1.00em rgb(from var(--dark) r g b / 25.00%); }

.nav-on 	{	position: fixed; 
	 nav	{	position: fixed; width: min(100.0%, 27.50em); box-shadow: 0 0 100.00vw 100.0vw rgb(from var(--dark) r g b / 50.00%); }
	.ico.hh {	scale: -1 1; color: var(--dark); }}

	 nav, details > div 	{	transition: all 300ms ease-in-out 0ms; }

/* --- Filters --- */

#fah:checked  ~ .filter > label[for=fah]:before,	
#geh:checked  ~ .filter > label[for=geh]:before,	
#sit:checked  ~ .filter > label[for=sit]:before,	
#lie:checked  ~ .filter > label[for=lie]:before,	
#alle:checked ~ .filter > label[for=alle]:before	{ 	background-color: var(--acc); opacity: 1.00; } 	

#fah:checked  ~ .pro:not(.fah),
#geh:checked  ~ .pro:not(.geh),
#sit:checked  ~ .pro:not(.sit),
#lie:checked  ~ .pro:not(.lie)		{	display: none;  }
#alle:checked ~ .pro  				{	display: block; }

			 .detail form	{	padding: 0 2.00em; max-height: 0; border-width: 0;overflow: hidden; }
	.form-on .detail form	{	padding: 2.00em; max-height: 1000em; }
	.form-on .toggle-form	{	display: none; }

/*	=================================
		Mobile
	================================= */

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

	body 	{	--spa: clamp(5.00em, 10.00vw, 10.00em); }
	
	.menu > div > span > a[href^="produkte_mecklenburg-vorpommern.html"]:after  {	content: 'M-V'; }
	.menu > div > span > a[href^="produkte_ostholstein.html"]:after 			{	content: 'OH';  }
		
	.list > div .filter label:after	{ 	display: none; }
}
					
/*	=================================
		Klaro! Consent-Banner
	================================= */

.klaro
{
	--green1: var(--cta); 	/* BG Btn YES */ 
	--green2: var(--acc);
	--green3: var(--acc);
	--blue1:  var(--acc);
	--blue2:  var(--acc);
	--dark1:  var(--dark); 	/* BG Banner */  

	--border-radius: 		0.50em;
	--font-family: 			inherit;
	--title-font-family:	inherit;
	--button-text-color: 	#ffffff;
	--notice-max-width: 	min(100.0%,36.00em);
	--notice-right:  		2.00em;
	--notice-bottom: 		2.00em;

	.cookie-notice 	{ 	padding: 		1.50em 2.00em !important; }  
	.cn-body > p	{ 	text-wrap: 		unset; }
	.cn-ok 			{ 	padding-top: 	1.00em; }
	.cm-btn 		{	font-weight:	600; padding: 0.750em 1.50em !important; margin-left: 1.00em !important; border-radius: 6.00em !important; }
	.cm-link 		{	opacity: 		1.00; }
	li > *			{	padding-left: 	2.00em !important; }
}

/*	=================================
		END
	================================= */