html	{	-webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility; font-feature-settings: "liga"; }
body	{	width: 100.0%; min-width: 375px; height: 100.0%; scroll-behavior: smooth; scroll-padding-top: 5.00em; background-color: var(--light); font-size: clamp(14px, 1.3333vmin, 20px); font-family: sofo-400; line-height: 1.2; }

*, :before		{	margin: 0; padding: 0; box-sizing: border-box; transition: all 150ms ease-in-out 0ms; border: 0 solid var(--border); color: var(--dark); }
		hr		{	display: block; width: 100.0%; grid-column: 1 / -1; margin: 1.00em auto; border-top-width: 1px; }
		a		{	text-decoration: none; }
img, svg, video { 	display: block; width: 100.0%; height: auto; }

/* flex-direction: row-reverse; */

main	{ 	padding: 0 var(--spa-h) var(--spa-v); display: grid; gap: var(--spa-v); width: min(100.0%, 80.00em); margin: 0 auto; background-color: var(--white);
			
				header 		{ 	position: sticky; z-index: 3; top: 0; width: 100.0%; height: 5.00em; border-bottom-width: 1px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: center; overflow: hidden; backdrop-filter: blur(8px); 
								> * 						{ 	z-index: 2; }
								&:before  					{ 	content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: var(--white); opacity: 0.8; }							
								> a[href^="index.html"]  	{ 	height: 100.0%; display: flex; place-items: center; > img { width: auto; height: 72.00%; }}}
								
				article 	{ 	display: flex; flex-flow: row wrap; justify-content: space-between; gap: var(--gap);    
								> div 	{ 	flex: 1 1 20.00em; display: flex; gap: 1.00em; flex-flow: column wrap; justify-content: center; 
								+ div 	{ 	flex: 1 1 40.00em; }}

				
					&.intro 	{ 	background-color: var(--white); > div 	{ 	padding-bottom: var(--spa-v); position: relative; justify-content: space-between; }
									
									> div:nth-child(2) 		{ 	padding: 0; border-radius: 2.00em 2.00em 2.00em 0; overflow: hidden; 
											> .tuevn 		{ 	position: absolute; top: 0; right: 2.00em; width: 10.00em; > span { display: block; margin-top: 0.50em; color: white; }}
											> *:is(.btn)	{ 	position: absolute; bottom: 2.00em; left: 2.00em; }}
											
									> div:nth-child(n+3) 	{ 	padding: 2.00em; border-width: 1px; border-radius: 1.00em; background-color: var(--light); 
												> .open 	{ 	display: grid; gap: 0.25em 1.00em; grid-template-columns: 1fr 7.50em; }}
					
									> div:nth-child(3)  	{ 	flex: 1 1 25.00em; }
									> div:nth-child(4)  	{ 	flex: 1 1 15.00em; }
									> div:nth-child(5)  	{ 	flex: 1 1 15.00em; }
								}										
						
					&:has(section)	{ 	display: grid; grid-template-columns: repeat(auto-fill, minmax(20.00em, 1fr));  
					
										> div 	{ 	justify-content: space-between;   
					 
										section 		{ 	position: relative; height: 17.50em; padding: 2.00em 2.00em 5.00em; border-radius: 1.00em; 
															background-image: linear-gradient(-6deg, var(--white), var(--acc-2) 100.0%); cursor: pointer; border-width: 1px; border-color: var(--acc-2); 
									
															&:hover { 	box-shadow: 0 1.00em 2.00em 0 rgba(000 000 000 / 0.125); }
															> p   	{ 	font-size: 0.95em; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
												> .ico 	{ 	position: absolute; bottom: 1.00em; right: 1.00em; }
										
										&.box-on  		{ 	height: auto; > p 	{ 	-webkit-line-clamp: 100; } 
															> .ico 	{ 	rotate: 45deg; }}}}
											
							> div:nth-child(2) section 	{ 	background-image: 		url(../img/HU-Plakette.svg); 
															background-repeat: 		no-repeat; 
															background-position: 	bottom -7.50em left 2.50em; 
															background-color: 		var(--acc-3); 							
															background-size: 		112.5%; 
															
															> p 				{ 	font-family: sofo-500; } 
															> *, > .ico:before 	{ 	color: white; }}}
			}}
				
footer	{ 	font-size: 0.85em; width: min(100.0%, 80.00em); margin: 0 auto; padding: var(--spa-v) var(--spa-h); display: flex; gap: var(--gap); flex-flow: row wrap; justify-content: space-around; align-content: flex-start; align-items: flex-start; overflow: hidden; border-color: var(--light);

			> div 	{ 	flex: 0 0 auto; display: grid; place-content: end start; }
				
				.sm	 	{ 	margin-top: 1.00em; display: flex; gap: 1.00em;  
					> a	{ 	border-radius: 0; opacity: 0.50; background: transparent;
							&:before 	{ content: none; } 
							&:hover 	{ opacity: 1; }}}
			 
			> div:has(a[href*="legal.html"]) 	{ 	padding-bottom: 5.00em; flex: 0 0 100.0%; gap: 2.00em; grid-template-columns: 1fr; place-content: center;  
													> span 	{ 	text-align: center; 
																> a 	{ 	margin: 0 1.00em; }}} 
			
			a:has(img[src="resources/img/Logo_Rezaeian.svg"])		{ 	display: inline-block; width: 15.00em; } 
			span:has(img[src="resources/img/Logo_TUEV-NORD.svg"])	{ 	display: inline-flex; width: 10.00em; margin: 0 0 0 1.00em; padding: 0.75em 1.00em; opacity: 1.00; background-color: var(--tuev); }} 


nav 	{	position: fixed; display: none; z-index: 4; bottom: 0; left: 0; width: 100.0%; height: 0; overflow: hidden; border-top-width: 1px; backdrop-filter: blur(8px); 
			&:before 	{ 	position: absolute; bottom: 0; left: 0; width: 100.0%; height: 100.0%; content: ''; background: white; opacity: 0.8; }
			
			> div 	{ 	position: absolute; bottom: 0; left: 0; width: 100.0%; height: 5.00em; padding: 0 var(--spa-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center;  
						> .hh 			{ 	height: 100.0%; z-index: 2; aspect-ratio: 1; display: grid; place-content: center; margin-right: -1.50em;	
							&:before 	{ 	content: 'menu'; font-family: icongo; font-size: 2.50em; }}

			+ div 	{ 	position: absolute; bottom: 0; left: 0; width: 100.0%; height: 0; display: grid; place-content: center;overflow: hidden; 
						> div	{ 	height: 100.0%;  padding: 5.00em 0; 
									> a 		{ 	display: block; padding: 0.75em 0; font-family: sofo-500; font-size: 1.25em; line-height: 1.50em; 
										+ a 	{ 	border-top-width: 2px; }}
		}}}}
		
		body:has(.nav-on) 	{ 	> nav 					 	{ 	height: 100.0dvh; 	}
								> nav > div > .hh:before 	{ 	content: 'cancel'; 	}
								> nav > div > .btn			{ 	opacity: 0.00; 		}
								> nav > div + div			{ 	height: 100.0%; 	}}

/* --- Legal + Thank --- */

.legal 	{ 	display: flex; gap: var(--spa-v); flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; overflow: hidden; 
			> div 					{ flex: 1 1 30.00em; overflow: hidden; 
				> :is(h1, h2, h3) 	{ 	font-size: 1.00em; font-family: sofo-500; color: var(--dark); }
				> p 				{ 	font-size: 0.85em; color: var(--dark); max-width: none; }}}

.thank 	{ 	width: auto;  margin: 0 auto; text-align: center; > .btn 	{ margin-top: 2.00em; }}

/* --- Elemente --- */

figure 	{ 	position: relative; display: block; width: 100.0%; aspect-ratio: 1/1; border-radius: 1.00em; overflow: hidden; background-color: var(--acc-1); 
			background-image: url(../img/Logo_Rezaeian_inv.svg); background-repeat: no-repeat; background-position: center; background-size: 50.00% auto;
			> :is(img, video)  { 	width: 100.0%; height: 100.0%; object-position: 50.00% 50.00%; object-fit: cover; }}

.lazyImage img 			{ 	opacity:1; transform: scale(1); transition: opacity .5s, transform .5s; }
.lazyImageWaiting img 	{ 	opacity:0; transform: scale(0); transition: none; }

.ico 	{  width: 3.00em; aspect-ratio: 1; display: grid; place-content: center; &:before 	{ 	content: 'add_circle'; font-family: 'icongo'; font-size: 2.50em; color: var(--acc-3); }}

.btn 	{ 	height: 3.00em; padding: 0 2.00em 0 1.00em; display: inline-grid; grid-template-columns: 2.50em 1fr; place-items: center start; background-color: white; box-shadow: inset 0 0 0 2px var(--cta); border-radius: 0.25em;
			&:before 	{ 	content: 'phone'; font-family: 'icongo'; color: var(--cta); scale: 1.75; transform-origin: 0 50.00%; }
			*			{ 	font-family: sofo-700; color: var(--cta); }

			&[href^="index.html"]:before 		{ 	content: 'west'; }
			&[href^="mailto:"]:before 			{ 	content: 'send'; }
			&[type="submit"]:before 			{ 	content: 'send'; }
			&[href^="https://maps.app"]:before 	{ 	content: 'turn_right'; }

			&.cta 		{ 	margin-top: 1.00em; background-color: var(--tuev); font-size: 1.25em; border-radius: 3.00em; box-shadow: unset; *, &:before { color: white; }}
		}

:is(.btn, a[href^="https://wa.me/"]):hover 	{ 	box-shadow: inset 0 0 0 10.00em var(--dark); *, &:before { color: white; }}		
			
/* --- Contact-Btns --- */

#contact 	{ 	 width: 100.0%; margin-top: 0; display: grid; gap: 0.50em 1.00em; grid-template-columns: repeat(auto-fill, minmax(10.00em, 1fr)); }
		
	a.link:is([href^="tel:"], [href^="https://wa.me/"], [href^="mailto:"])
		{ 	height: 2.50em; display: inline-grid; grid-template-columns: 2.50em 1fr; place-items: center start; color: var(--acc-3); border-radius: 0.50em;		
		
				> span  	{ 	font-family: sofo-700; color: var(--acc-3); }
				&:before	{  	font-family: icongo; color: var(--acc-3); }

			&[href^="tel:"] 			{	&[href*="tel:+49261"]:before	{ 	font-size: 2.00em; content: 'phone'; }
											&[href*="tel:+49152"]:before	{ 	font-size: 1.85em; content: 'phone_iphone'; }}
	
			&[href^="mailto:"] 			{	&:before	{  	content: 'mail_outline'; font-size: 2.00em; font-family: icongo; color: var(--acc-3); }}
	
			&[href^="https://wa.me/"] 	{ 	padding: 0 1.50em 0 0.50em; background-color: #25D366; 
											> span  	{ 	font-family: sofo-700; color: white; }
											&:before	{ 	content: ''; display: block; height: 72.00%; aspect-ratio: 1; background: url(../img/sm/Logo_WhatsApp.svg) no-repeat left center; background-size: cover; }}}

/*	=================================
		Typo
	================================= */
		
label, a,
button		{ 	cursor: pointer; }
strong	 	{ 	font-family: 'sofo-500'; font-weight: normal; }
small 		{ 	font-size: 0.85em; }
em 			{ 	white-space: nowrap; font-style: inherit; }
	
h1, h2, h3 	{ 	grid-column: 1 / -1; line-height: 1.00; font-style: normal; font-weight: normal; }
		h1	{ 	font-family: sofo-head; font-size: 4.00em; color: var(--acc-3); > span 	{ font-family: sofo-400; font-size: 50.00%; display: block; margin-top: 1.00em; line-height: 1.25; }}
		h2	{ 	font-family: sofo-head; font-size: 2.00em; color: var(--acc-3); line-height: 1.2; max-width: 25.00em; }
		h3	{ 	font-family: sofo-head; font-size: 1.25em; color: var(--acc-3); line-height: 1.2; }
		
		p 		{ 	line-height: 1.5; hyphens: auto; max-width: 50.00em; }
		p > a	{ 	font-family: sofo-500; color: var(--acc-3);  color: var(--cta);  }
	
h1 + p,
h2 + p,
h3 + p,
p + * 		{ 	margin-top: 1.00em; }

@font-face 	{ 	font-family: 'sofo-400'; 	src: url('../fonts/aptos/aptos.woff')			format('woff'); }	 
@font-face 	{ 	font-family: 'sofo-500'; 	src: url('../fonts/aptos/aptos-semibold.woff') 	format('woff'); }	 
@font-face 	{ 	font-family: 'sofo-700'; 	src: url('../fonts/aptos/aptos-bold.woff') 		format('woff'); }	 
@font-face 	{ 	font-family: 'sofo-800'; 	src: url('../fonts/aptos/aptos-extrabold.woff') format('woff'); }	 
@font-face 	{ 	font-family: 'sofo-900'; 	src: url('../fonts/aptos/aptos-black.woff') 	format('woff'); }	 

@font-face 	{ 	font-family: 'sofo-head'; 	src: url('../fonts/din-pro/dinpro-black.woff2') 	format('woff2'); }	 

@font-face 	{   font-family: 'icongo'; 		src: url('../fonts/icongo/material-symbols-sharp.woff2') format('woff2'); 			  	
											font-variation-settings: 	'FILL' 1,
																		'wght' 300,
																		'GRAD' 0,
																		'opsz' 24; }																		
/*	=================================
		Styles
	================================= */

body 	{	--spa-v: 	5.00vmin; --spa-h: 5.00vmin; --gap: 2.50vmin;	

			--cta:		rgba(003 062 084 / 1.000); /* #033e8b */
			--acc-1: 	rgba(223 231 233 / 1.000); /* #dfe7e9 */ 
			--acc-2:	rgba(194 226 237 / 1.000); /* #c2e2ed */
			--acc-3:	rgba(079 119 145 / 1.000); /* #4f7791 */
			
			--white:  	rgba(255 255 255 / 1.000); 
			--light: 	rgba(249 249 249 / 1.000); /* #f9f9f9 */ 
			--dark:  	rgba(048 048 048 / 1.000); /* #303030 */
			--border: 	rgba(223 231 233 / 1.000); /* #dfe7e9 */ 				
			--tuev: 	rgba(010 039 212 / 1.000); /* #001ed2 */ }

* 					{	accent-color: var(--cta); caret-color: var(--cta); }
a, em, small     	{	color: inherit; }
::marker          	{	color: var(--cta-3); }
::-moz-selection  	{	background-color: var(--tuev); color: white; }
::selection       	{	background-color: var(--tuev); color: white; }

@media (prefers-color-scheme: dark) 
		{ body		{
			--acc-1: 	rgba(048 048 048 / 1.000);  
			--acc-2:	rgba(079 119 145 / 1.000); 
			--acc-3:	rgba(079 119 145 / 1.000); 
			
			--white:  	rgba(000 000 000 / 1.000); 
			--light: 	rgba(048 048 048 / 1.000); 
			--dark:  	rgba(249 249 249 / 1.000); 
			--border: 	transparent; 
			
			a.link:is([href^="tel:"], [href^="mailto:"]):before,
			a.link:is([href^="tel:"], [href^="mailto:"]) *,
			h1, h2, h3 					{ color: rgba(194 226 237 / 1.000) }
			a:has(img[src$="svg"])		{ 	filter: invert(1); } 
		}}
						
/*	=================================
		Layout
	================================= 
	
	*	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.10) !important; } 
	*	{	background-color: 	rgba(000,000,000,0.05) 					!important; } 
	div	{	background-color: 	rgba(255,000,000,0.05) 					!important; } 
	div	{	background-image: 	none				 					!important; } 
	*	{	color: 				rgba(000,000,000,1.0) 					!important; } 
	img	{	box-shadow: 		inset 0 0 0 1px  rgba(000,000,000,0.40) !important; } 

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