﻿html, body	{	width: 100.0%; height: 100.0%; } 

* 			{	list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; outline: 0; outline-style: solid; transition: all 300ms ease-in-out 0ms; }
hr			{	width: 100.0%; margin: 1.00em 0; border-bottom-width: 1px; }
img, video	{	display: block; }
video		{	cursor: pointer; outline-width: 1px; }
table		{	width: 100.0%; border-collapse: collapse; border-spacing: 0; }

main	  	{	min-height: calc(100.0% - 8.00em); }

header, main, article, section, footer  	{	position: relative; width: 100.0%; overflow: hidden; }

header > div, article > div, footer > div 	{	position: relative; width: 96.00%; max-width: 80.00em; margin: 0 auto; }

article > div > div + div 	{	margin-top: 6.00em; }

.row				{	margin: -1.00em -1.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.row > *			{	position: relative; flex: 1 1 10.00%; min-width: 20.00em; margin: 1.00em; }
.row > #imprint		{	flex: 0 0 320px; min-width: 20.00em; }
.row > *:empty		{	margin: 0 1.00em; }

/* --- Scrollbar --- */

.scroll 							{	scrollbar-width: thin; scrollbar-color: rgba(000,000,000,0.25) transparent; overflow: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar 			{	width: 6px; }
.scroll::-webkit-scrollbar-track	{	background: transparent; }
.scroll::-webkit-scrollbar-thumb	{	background-color: rgba(000,000,000,0.25); border-radius: 3px; }

/* --- Header / Footer -- */

header				{	height: 4.00em; border-bottom-width: 3px; }
header > div 		{	height: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }

footer	 			{	padding: 1.50em 0; }
footer > div 		{	height: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
footer > div span	{	height: 100.0%; margin: 0.25em 0; }
footer a + a		{	margin-left: 1.00rem; }
footer a + a:before	{	display: inline-block; margin-right: 1.00rem; content: '|';  }

/* --- Intro -- */

#intro			{	position: relative; width: 100.0%; height: 700px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; overflow: hidden; }
#intro > div 	{	flex: 1 1 400px; height: 100.0%; background-repeat: no-repeat; background-position: center; background-size: cover; order: 2; }
	
#intro:before 	{	position: absolute; z-index: 2; top: 2.00em; left: 2.00%; width: 62.00%; max-width: 260px; aspect-ratio: 16 / 9; content: ''; 
					background-image: url('../img/Logo_TUeVNORD_23_gw.svg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
	
/* --- Board -- */

#board				{	position: relative; width: 100.0%; }
#board > div 		{	position: relative; width: 96.00%; max-width: 80.00em; top: -200px; margin: 0 auto -200px; }
#board > div > div 	{	margin: 0 3.00em; padding: 3.00em 0 1.00em; }

#board > div > div > div:nth-child(1) 							{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; padding-bottom: 3.00em; /* box-shadow: inset 0 0 0 1px orange; */ }
#board > div > div > div:nth-child(1) > div						{	display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; }
#board > div > div > div:nth-child(1) > div:nth-child(1)		{	flex: 3 1 10.00%; }
#board > div > div > div:nth-child(1) > div:nth-child(1) span	{	width: 100.0%;}
#board > div > div > div:nth-child(1) > div:nth-child(2)		{	flex: 1 1 10.00%; min-width: 320px; background-repeat: no-repeat; background-position: bottom right; /* box-shadow: inset 0 0 0 1px lime; */ } 

	.menu				{	position: relative; max-height: 0; margin: 2.00em -2.00em 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; overflow: hidden; }
	.menu > div			{	position: relative; flex: 1 1 150px; margin: 0 2.00em 2.00em; }
	.menu > div:before	{	position: absolute; top: 0; right: calc(-2.00rem - 1px); width: 1px; height: 100.0%; content: ''; opacity: 0.125; }

		.menu > div > ul				{	margin-top: 1.50em; }
		.menu > div > ul > li			{	position: relative; padding: 1.00em 0 0.50em 1.50em; border-top-width: 1px; }
		.menu > div > ul > li:before	{	position: absolute; top: 1.50em; left : 0; width: 0.50em; height: 0.50em; opacity: 1.00;  }
		
					.menu .btn			{	margin: 1.50em 0; }
		
			.toggle-menu		{	position: relative; display: block; height: 3.00em; padding-right: 3.00em; display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: center; align-items: center; border-top-width: 1.5px; }
			.toggle-menu:after	{	position: absolute; top: 0; right: 0; width: 2.00em; height: 100.0%; content: ''; transform: rotate(0); 
									background-image: url('../img/picts/black/menu.svg'); background-repeat: no-repeat;  background-position: center; background-size: contain; }

			.menu-on .toggle-menu:after	{	background-image: url('../img/picts/black/menu_open.svg'); }
			.menu-on .menu				{	max-height: 150.0em; }

/* --- Article -- */

#company						{	padding: 3.00em 0; }
#company > div > span			{	display: block; width: 100.0%; }
#company > div > span + span	{	margin-top: 0.50em; }

#teaser			{	padding: 6.00em 0; }
#teaser .row	{	margin: -2.00em; }

.overview 							{	width: 100.0%; }
.overview + .overview				{	border-top-width: 1.5px; }
.overview > div						{	width: 100.0%; max-width: none; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.overview > div	> div				{	min-width: 150px; display: flex; flex-flow: row wrap; align-content: stretch; align-items: stretch; }
.overview > div > div:nth-child(1)	{	flex: 1 1 10.00%; justify-content: flex-end; 		padding: 2.50vw 5.00vw; }
.overview > div > div:nth-child(2)	{	flex: 1 1 65.00%; justify-content: space-between; 	padding: 2.00vw 4.00vw; overflow: hidden; }
.overview > div > div + div 		{	margin-top: 0; }

	.box		{	position: relative; flex: 1 1 20.00%; min-width: 12.00em; margin: 1.00vw; padding-bottom: 2.50em; border-radius: 0.25em; }
	.box:hover	{	background-color: white; box-shadow: 0 0 0 1.00em white, 0 0 0 1.10em rgba(007,024,039,0.125); }	
	.box:empty	{	max-height: 0; margin: 0 1.00vw; padding: 0; overflow: hidden; }
	.box > div > img	{	width: 100.0%; height: auto; }
	.box > div + div	{	margin-top: 1.00em; }

	.box > div:nth-child(1)		{	position: relative; border-radius: 0.25em; overflow: hidden; background-repeat: no-repeat; background-position: center left; background-size: cover; }

	.box:after			{	position: absolute; bottom: 0; right: 0em; height: 2.00em; padding-right: 2.00em; content: 'Mehr erfahren';
							display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center;  
							background: url('../img/picts/sofa/keyboard_arrow_right.svg') no-repeat center right; background-size: 1.50em; }
	.box:empty:after	{	content: none;}

	.box.teaser						{	flex: 1 1 320px; margin: 2.00em; }
	.box.teaser > img				{	margin-bottom: 1.50em; }
	.box.teaser > div + div			{	margin-top: 1.50em; }
	
#about	{	padding: 6.00em 0; }

	#asp .asp > div			{	width: 240px; height: 240px; border-radius: 100.0%; background-repeat: no-repeat; background-position: center left; background-size: cover; }
	#asp .asp > span		{	display: block; height: auto; margin-top: 1.50em; }
	#asp .asp > span:before	{	display: block; }
	#asp .asp > span:after	{	display: block; margin-top: 0.50em; }

	#partner 					{	margin-top: 6.00em; }
	#partner > *				{	margin-left: auto; margin-right: auto; }
	#partner > div				{	margin-top: 1.00em; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-end; align-items: flex-end; }
	#partner > div > span		{	position: relative; margin: 2.00em 1.00em; }
	#partner > div > span > img	{	width: 100.0%; }

		#partner span.tuev 	{	width: 12.50em; } 
		#partner span.dat 	{	width:  5.00em; }
		#partner span.bsvk 	{	width: 12.50em; }
		#partner span.clda 	{	width:  9.00em; }		
		#partner span.auda 	{	width: 13.00em; }		
		#partner span.winv 	{	width: 13.00em; } 

#news	{	padding: 6.00em 0 0; border-top-width: 1.5px; }

#news .news			{	position: relative; display: block; height: 100.0%; padding: 0 2.00em; }
#news .news:before	{	content: ''; position: absolute; top: 0; right: 0; height: 1000px; width: 1.5px; opacity: 0.125; }
#news .news img		{	width: 100.0%; height: auto; border-radius: 0.25em; }
#news .news * + *	{	display: block; height: auto; margin-top: 1.50em; }

		#news .news:after	{	content: 'Business'; position: absolute; top: 0; right: 0; height: 1.75em; padding: 0 1.50em 0.125em; 
								display: none; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
	
							#news .news.news-02:after, 
							#news .news.news-05:after,
							#news .news.news-06:after	{	display: flex; }

#contact				{	padding: 6.00em 0 3.00em; }
#contact > div 			{	overflow: visible; }
#contact > div > div	{	padding: 3.00em 0; overflow: visible; }
#contact .row 			{	margin: -2.00em; }
#contact .row > *		{	margin: 2.00em; }
#contact .row + .row	{	margin-top: 3.00em; border-top-width: 1px; }

#contact .row > form		{	flex: 0.50 1 10.00%; margin-top: -0.50em; padding: 2.00em; }
#contact .row > form > div	{	margin-top: 1.00em; }

	#contact figure	{	margin-bottom: 2.00em; }

			.map 	{	border-top-width: 0.25em; }

/* --- Tables -- */

table 		 				{	border-bottom-width: 1px; }
table tr > * 				{	padding: 0.50em 0.25em 0.50em 0.25em; text-align: left; vertical-align: top; border-top-width: 1px; }
table tr.olo > * 			{	padding-top: 0; border-top-width: 0; }
table tr > * > a			{	float: right; margin-bottom: 0.50em; }
table tr:first-child > * 	{	padding-top: 0; border-top-width: 0; }
table tr > *:first-child 	{	padding-left: 0; padding-right: 0.50em; }
table tr > td:last-child 	{	padding-right: 0; vertical-align: bottom; }

/* --- Elements -- */

.local			{	position: relative; display: block; padding-left: 2.50em; }
.local:before	{	position: absolute; top: 0; left: -0.25em; opacity: 0.50; width: 2.50em; height: 2.50em; content: ''; background: url('../img/picts/black/location_on.svg') no-repeat top left; background-size: cover; }

.vehicles				{	display: block; margin-top: 0.50em; }
.vehicles > a			{	display: inline-block; width: 3.00em; height: 3.00em; background-repeat: no-repeat; background-position: center left; background-size: contain; filter: grayscale(1.00); opacity: 0.375; }
.vehicles > a:hover		{	filter: grayscale(0.00); opacity: 1.00; }
.vehicles > a + a		{	margin-left: 0.50em; }
	.vehicles > a.pkw		{	background-image: url('../img/vehicles/pkw.svg'); 		}
	.vehicles > a.motorrad	{	background-image: url('../img/vehicles/motorrad.svg'); 	}
	.vehicles > a.wohnmobil	{	background-image: url('../img/vehicles/wohnmobil.svg'); }
	.vehicles > a.lkw		{	background-image: url('../img/vehicles/lkw.svg'); 		}
	.vehicles > a.wohnwagen	{	background-image: url('../img/vehicles/wohnwagen.svg'); }
	.vehicles > a.anhaenger	{	background-image: url('../img/vehicles/anhaenger.svg'); }

/* --- Standards -- */
	
.btn			{	display: inline-block; padding: 1.00em 2.00em; border-radius: 0.25em; }
.semibtn		{	display: inline-block; padding: 1.00em 2.00em; border-radius: 0.25em; }
.semibtn.small	{	padding: 0.50em 1.00em; }
button 			{	width: 100.0%; }

.ico		{	opacity: 0.50; display: inline-block; width: 2.50rem; height: 2.50rem; background-repeat: no-repeat; background-position: center; background-size: auto 2.00rem; }
.ico:hover	{	opacity: 1.00; }

	.ico.gallery	{	background-image: url('../img/picts/black/view_module.svg'); }
	.ico.list		{	background-image: url('../img/picts/black/view_headline.svg'); }
	.ico.mail		{	background-image: url('../img/picts/black/mail_outline.svg'); }
	.ico.pdf		{	background-image: url('../img/picts/black/cloud_download.svg'); }
	.ico.share		{	background-image: url('../img/picts/black/share.svg'); }
	.ico.setting	{	background-image: url('../img/picts/black/settings_applications.svg'); }

.link			{	position: relative; display: block; padding: 0 0 0 2.50em; }
.link + .link	{	margin-top: 1.00em; }
.link:before	{	position: absolute; top: -0.25em; left: 0; width: 1.50em; height: 1.50em; background-repeat: no-repeat; background-position: top left; background-size: cover; content: ''; }

.link.reversed 			{	padding: 0 2.50em 0 0; }
.link.reversed:before	{	left: inherit; right: 0; background-position: top right; }

		
	.link.asp:before		{	background-image: url('../img/picts/sofa/account_circle.svg'); 	}
	.link.contact:before	{	background-image: url('../img/picts/sofa/chat.svg'); 				}
	.link.date:before		{	background-image: url('../img/picts/sofa/event.svg'); 			}
	.link.ex:before			{	background-image: url('../img/picts/sofa/launch.svg'); 			}
	.link.faq:before		{	background-image: url('../img/picts/sofa/contact_support.svg'); 	}
	.link.fax:before		{	background-image: url('../img/picts/sofa/description.svg'); 		}
	.link.home:before		{	background-image: url('../img/picts/sofa/home.svg'); 		        }
	.link.job:before		{	background-image: url('../img/picts/sofa/work.svg'); 				}
	.link.mail:before		{	background-image: url('../img/picts/sofa/mail_outline.svg'); 		}
	.link.mobil:before		{	background-image: url('../img/picts/sofa/smartphone.svg'); 		}
	.link.news:before		{	background-image: url('../img/picts/sofa/fiber_new.svg'); 		}
	.link.pdf:before		{	background-image: url('../img/picts/sofa/cloud_download.svg'); 	}
	.link.price:before		{	background-image: url('../img/picts/sofa/local_offer.svg'); 		}
	.link.tel:before		{	background-image: url('../img/picts/sofa/phone.svg'); 			}
	.link.whap:before		{	background-image: url('../img/sm/Logo_WhatsApp_sofa.svg'); 				}

.txt 		{	margin-top: 		2.00em; 
				padding: 			0 2.00em; 
				border-width: 		0 1px;
				column-count:		3;
				column-width: 		240px;
				column-gap:       	4.00em;
				column-rule-width: 	1px;
				column-rule-style: 	solid; }

.txt > div			{	break-before: column; margin-top: 2.00em; }
.txt > div > table	{	break-inside: avoid; }
		
.sm 				{	padding-top: 0.50em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
.sm > a				{	opacity: 0.25; width: 2.50em; height: 2.50em; background-repeat: no-repeat; background-position: center; background-size: contain; content: ''; }
.sm > a:hover		{	opacity: 1.00; }
.sm > a + a			{	margin: 0 0 0 1.00em; }
	.sm > a.fb		{	background-image: url('../img/sm/Logo_Facebook.svg');  }
	.sm > a.ig		{	background-image: url('../img/sm/Logo_Instagram.svg'); }
	.sm > a.yt		{	background-image: url('../img/sm/Logo_YouTube.svg');   }
	.sm > a.wa		{	background-image: url('../img/sm/Logo_WhatsApp.svg');  }
	.sm > a.tw		{	background-image: url('../img/sm/Logo_Twitter.svg');   }

figure				{	flex: 1 1 20.00%; }
figure > div		{	width: 100.0%; aspect-ratio: 16 / 9; border-radius: 0.25em; background-repeat: no-repeat; background-position: center left; background-size: cover; /* background-color: pink; */ }
figure > iframe		{	width: 100.0%; aspect-ratio: 16 / 9; border-radius: 0.25em; overflow: hidden; }
figure > video		{	width: 100.0%; height: auto; border-radius: 0.25em; overflow: hidden; }
figure > img		{	width: 100.0%; height: auto; border-radius: 0.25em; }
figcaption			{	margin-top: 1.50em;  }

figure > div > img + *	{	z-index: 2; }

.toplink		{	opacity: 0.25; position: fixed; z-index: 2; display: none; right: 1.00em; bottom: 1.00rem; padding: 1.50em; background: url('../img/picts/black/arrow_circle_up.svg') no-repeat center; background-size: contain; }
.toplink:hover	{	opacity: 1.00; }

/* --- QUICK Menu -- */

#quick					{	position: fixed; z-index: 4; right: 3.50em; top: calc(50.00% - 1.50em); padding: 1.00em 0 1.00em; border-radius: 0.50em 0.50em 0.50em 0.50em; cursor: pointer; overflow: hidden; 
							transform: rotate(-90deg); transform-origin: top right; background-repeat: no-repeat; background-position: top 1.00em right 0.50em; background-size: 1.50em; }

#quick > div			{	width: 100.0%; }
#quick > div + div		{	margin-top: 0.75em; }
#quick > div > a		{	background-image: url('../img/Icon_TUeV-PM_HU.svg'); display: block; padding: 0.50em 1.50em 0.50em 5.00em; background-repeat: no-repeat; background-position: center left 1.00em; background-size: 3.00em auto;}
#quick > div > a + a	{	background-image: url('../img/Icon_TUeV-PM_Schaden.svg'); margin-top: 1px; }
	
	.quick-on #quick	{	transform: rotate(0); transform-origin: top right; border-radius: 0.50em 0 0 0.50em; right: 0; padding-right: 2.00em; background-image: url('../img/picts/white/cancel.svg'); }

details					{	border-top-width: 1px; padding: 1.00em 0; }
details	summary			{	background-image: url('../img/picts/sofa/add.svg'); background-repeat: no-repeat; background-position: top right; background-size: 1.25em; cursor: pointer; padding-right: 2.00em; }
details[open] summary	{	background-image: url('../img/picts/sofa/minimize.svg'); }
details	> div			{	max-height: 0; margin-top: 1.00em; }
details[open] > div		{	max-height: 2000px; }

/* --- Cookies--- */

#cookies 			{	position: fixed; top: 0; left: 0; z-index: 999; width: 100.0%; height: 100.0%; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#cookies:before		{	content: ''; position: absolute; top: 0; left: 0;  width: 100.0%; height: 100.0%; opacity: 0.85; }
#cookies > span 	{	position: relative; width: 80.00%; max-width: 320px; height: auto; padding: 1.80em; border-radius: 0.24em; line-height: 1.80; outline-width: 1px;
						display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }

	#cookies .btn 	{	flex: 1 1 100.0%; margin-top: 1.50em;  }

	#cookies 		{	animation-name: 			cookies-on;
						animation-duration: 		4s;
						animation-fill-mode: 		forwards;
						animation-timing-function: 	linear; }
					
		@keyframes cookies-on {
			from 	{	opacity: 0.00; }
			66% 	{	opacity: 0.00; }
			to 		{	opacity: 1.00; } }

#cookies:target 	{	height:  0; }

/*	=================================
		END
	================================= */




