@import url('editor.css');
@import url('statistic.css');
/*@import url('statistic-value.css');
*/

.v2 .alt		{	position: fixed; z-index: 999; top: 112px; right: 0; padding: 1.00em; background-color: pink; color: white; } 
.v2 .alt:before	{	content: 'alt'; } 

/* --- */

html, body	{	width: 100.0%; } 
      body 	{	overflow-y: scroll; overflow-x: hidden; } 

*, :before, :after	{	margin: 0; padding: 0; border: 0; border-style: solid; transition: all 150ms ease-in-out 0ms; box-sizing: border-box; }
img, ul, ol			{	display: block; width: 100%}
hr					{	width: 100.0%; display: block; margin: 1.00em auto; border-top-width: 1px; }
iframe				{	width: 100.0%; }

.box 				{	position: relative; padding: 1.00em; border-width: 2px; border-radius: 0.125em; }
img.indicator		{	width: auto; height: 5.00em; margin-bottom: 1.00em; opacity: 1.00; }

/* --- Scroll --- */

.scrollsnaps 			{	width: 100.0%; height: 100.00%; display: flex; overflow: auto; scroll-snap-type: x mandatory; }
.scrollsnaps > * 		{	position: relative; min-width: 100.0%; padding-bottom: 1.00em; scroll-snap-align: start; counter-increment: posMarkup; }
.scrollsnaps > *:before {	content: counter(posMarkup, decimal); position: absolute; top: 0; right: 0; width: 2.25em; height: 2.25em; padding-top: 0.375em; border-width: 1px; border-radius: 100.0%; }

.scroll		{	scrollbar-width: thin; scrollbar-color: var(--gray) var(--light); overflow: auto; -webkit-overflow-scrolling: touch; cursor: n-resize; }

.scroll::-webkit-scrollbar 			{	width: 6px; }
.scroll::-webkit-scrollbar-track 	{ 	background: var(--light); border-radius: 3px; }
.scroll::-webkit-scrollbar-thumb 	{ 	background-color: var(--gray); border: transparent; border-radius: 15px; }

/* --- Grid + Flex --- */

.grid 				{ 	width: 100.00%; display: grid; gap: 2.00em; /*grid-template-columns:	repeat(3, 1fr);*/ grid-template-columns: repeat(auto-fill, minmax(20.00em, 1fr));  }

.grid .grid			{ 	gap: 2.00em; }    
.grid + .grid		{ 	margin-top: 4.00em; }
.grid.small 		{ 	grid-template-columns: repeat(2, 1fr); } 

.grid > .full 	{ 	grid-column: 1 / -1;} 
.grid > .big 	{ 	grid-column-end: span 2; }
.grid > .bigger { 	grid-column-end: span 3; }
.grid > .large 	{ 	grid-column: 2 / -1; }

.grid .ecare	{ 	height: 2.50em; padding: 0 0 0 8.00em; border-bottom-width: 1px; background-repeat: no-repeat; background-position: top left; background-size: auto 2.00em; background-image: url('../img/ID_eCARE.svg');  }    

#dashboardChartsOverview > div > .grid	{	grid-template-columns: repeat(auto-fit, minmax(20.00em, 1fr)); gap: 4.00em;}
#content > div > div > form > .grid		{	grid-template-columns: repeat(auto-fit, minmax(20.00em, 1fr)); }

.flex  			{ 	width: 100.0%; gap: 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; } 
.flex .flex 	{ 	gap: 1.00em 2.00em; } 
.flex > *  		{ 	flex: 1 1 10.00%; /*min-width: 24.00em;*/ } 
.flex > .full  	{ 	flex: 1 1 100.0%; } 
.flex > .big  	{ 	flex: 2 1 20.00%; } 
.flex > .bigger { 	flex: 4 1 40.00%; } 

/* --- NEW +++ Summenblock mit Chart --- */

.sum 	{ 	position: relative; flex: 1 1 20.00%; display: flex; gap: 1.00em; flex-flow: column wrap; justify-content: space-between; align-content: stretch; align-items: stretch; cursor: pointer; } 

.sum > div				{ 	padding: 1.00em 0.50em; position: relative; min-width: 15.00em; border-width: 1px; }    
.sum > div:nth-child(2)	{ 	padding-top: 0.50em; }    

.sum > div:nth-child(2) .trend6mtl 			{ 	position: relative; width: 100.0%; height: 3.00em; margin-top: 0.75em; display: flex; gap: 0 1.5px; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }   
.sum > div:nth-child(2) .trend6mtl > span 	{ 	position: relative; flex: 1 1 10.00%; height: 100.0%; padding-top: 1.25em; display: flex; gap: 0 1.5px; flex-flow: column wrap; justify-content: flex-end; align-content: stretch; align-items: stretch; background-color: var(--light); } 

.sum > div:nth-child(2) .trend6mtl > span > span 		{ 	position: relative; } 
.sum > div:nth-child(2) .trend6mtl > span > span:before { 	position: absolute; top: -1.25em; left: 0; width: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; transform: scale(0.75); } 
			
/* Values */

.trend6mtl > span:nth-child(1) > span	{ 	background: var(--sofa-10); }  	
.trend6mtl > span:nth-child(2) > span	{ 	background: var(--sofa-10); }   	
.trend6mtl > span:nth-child(3) > span	{ 	background: var(--sofa-10); }   	
.trend6mtl > span:nth-child(4) > span	{ 	background: var(--sofa-20); }   	 
.trend6mtl > span:nth-child(5) > span	{ 	background: var(--sofa-30); }  
.trend6mtl > span:nth-child(6) > span	{ 	background: var(--sofa-40); }   

.trend6mtl.task  > span:nth-child(1) > span	{ 	 height: calc((22.2 * (100 / 32.8)) * 1%); }  	.trend6mtl.task  > span:nth-child(1) > span:before 	{ content: '22.2%'; } 
.trend6mtl.task  > span:nth-child(2) > span	{ 	 height: calc((29.4 * (100 / 32.8)) * 1%); }   	.trend6mtl.task  > span:nth-child(2) > span:before 	{ content: '29.4%'; } 
.trend6mtl.task  > span:nth-child(3) > span	{ 	 height: calc((32.8 * (100 / 32.8)) * 1%); }   	.trend6mtl.task  > span:nth-child(3) > span:before 	{ content: '32.8%'; } 
.trend6mtl.task  > span:nth-child(4) > span	{ 	 height: calc((24.3 * (100 / 32.8)) * 1%); }   	.trend6mtl.task  > span:nth-child(4) > span:before 	{ content: '24.3%'; } 
.trend6mtl.task  > span:nth-child(5) > span	{ 	 height: calc((16.5 * (100 / 32.8)) * 1%); }   	.trend6mtl.task  > span:nth-child(5) > span:before 	{ content: '16.5%'; } 
.trend6mtl.task  > span:nth-child(6) > span	{ 	 height: calc(( 8.0 * (100 / 32.8)) * 1%); }   	.trend6mtl.task  > span:nth-child(6) > span:before 	{ content: ' 8.0%'; }

.trend6mtl.ecare > span:nth-child(1) > span	{ 	 height: calc(( 1.0 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(1) > span:before 	{ content: ' 1.0%'; } 
.trend6mtl.ecare > span:nth-child(2) > span	{ 	 height: calc(( 3.3 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(2) > span:before 	{ content: ' 3.3%'; } 
.trend6mtl.ecare > span:nth-child(3) > span	{ 	 height: calc(( 7.0 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(3) > span:before 	{ content: ' 7.0%'; } 
.trend6mtl.ecare > span:nth-child(4) > span	{ 	 height: calc(( 8.7 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(4) > span:before 	{ content: ' 8.7%'; } 
.trend6mtl.ecare > span:nth-child(5) > span	{ 	 height: calc(( 6.5 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(5) > span:before 	{ content: ' 6.5%'; } 
.trend6mtl.ecare > span:nth-child(6) > span	{ 	 height: calc(( 2.0 * (100 /  8.7)) * 1%); } 	.trend6mtl.ecare > span:nth-child(6) > span:before 	{ content: ' 2.0%'; }

.trend6mtl.sezu  > span:nth-child(1) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(1) > span:before 	{ content: ' 0.0%'; } 
.trend6mtl.sezu  > span:nth-child(2) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(2) > span:before 	{ content: ' 0.0%'; }
.trend6mtl.sezu  > span:nth-child(3) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(3) > span:before 	{ content: ' 0.0%'; }
.trend6mtl.sezu  > span:nth-child(4) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(4) > span:before 	{ content: ' 0.0%'; }
.trend6mtl.sezu  > span:nth-child(5) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(5) > span:before 	{ content: ' 0.0%'; }
.trend6mtl.sezu  > span:nth-child(6) > span	{ 	 height: 0; }   								.trend6mtl.sezu  > span:nth-child(6) > span:before 	{ content: ' 0.0%'; }

.trend6mtl.csc   > span:nth-child(1) > span	{ 	 height: calc(( 0 * (100 / 50.0)) * 1%); }  	.trend6mtl.csc   > span:nth-child(1) > span:before 	{ content: ' 0.0%'; } 
.trend6mtl.csc   > span:nth-child(2) > span	{ 	 height: calc((10 * (100 / 50.0)) * 1%); }   	.trend6mtl.csc   > span:nth-child(2) > span:before 	{ content: '10.0%'; } 
.trend6mtl.csc   > span:nth-child(3) > span	{ 	 height: calc((20 * (100 / 50.0)) * 1%); }   	.trend6mtl.csc   > span:nth-child(3) > span:before 	{ content: '20.0%'; } 
.trend6mtl.csc   > span:nth-child(4) > span	{ 	 height: calc((30 * (100 / 50.0)) * 1%); }   	.trend6mtl.csc   > span:nth-child(4) > span:before 	{ content: '30.0%'; } 
.trend6mtl.csc   > span:nth-child(5) > span	{ 	 height: calc((40 * (100 / 50.0)) * 1%); }   	.trend6mtl.csc   > span:nth-child(5) > span:before 	{ content: '40.0%'; } 
.trend6mtl.csc   > span:nth-child(6) > span	{ 	 height: calc((50 * (100 / 50.0)) * 1%); }   	.trend6mtl.csc   > span:nth-child(6) > span:before 	{ content: '50.0%'; } 

/* --- Header --- */

header > div, 
header > div > span, 
header > div > span > a			{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }

header							{	position: relative; top: 0; z-index: 5; width: 100.0%; }
header > div					{	position: relative; width: 100.0%; height: 70px; border-bottom-width: 1px; background-image: url(../img/Logo_Toyota-TASK.svg); background-repeat: no-repeat; background-position: center; background-size: auto 50.00%; }
header > div > span				{	margin-left: 3.00%; }
header > div > span > span		{	align-content: center; align-items: center; }
header > div > span > a			{	position: relative; width: 54px; border-left-width: 1px; justify-content: center; align-content: center; align-items: center; background-repeat: no-repeat; background-position: center; background-size: 1.50em; }
header > div > span > a.dealer	{	padding-right: 1.00em; padding-left: 2.00em; width: auto; background-position: left center; border-left-width: 0; }
header > div > span > a.ecare	{	background-size: 2.00em; }
header > div > span > a:hover	{	opacity: 0.50; }
header > div > span > a.nav		{	width: 70px; background-size: 30px; }
header > div > span > a	> span	{	position: absolute; top: 0.25em; right: 0.25em; width: 1.375em; aspect-ratio: 1 / 1; padding: 0 0 0.125em 0.025em; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; /**/ background-color: lime; Color:white; }		
header .logo				{	opacity: 1.00; width: auto; margin-right: 30px; border-left-width: 0; }
header .logo > img			{	width: 48px; height: auto; }

header .dealer, .search			{	background-image: url(../img/picts/black/location_on.svg); 		}			
header .dash			{	background-image: url(../img/picts/black/dashboard.svg); 		}
header .tmp				{	background-image: url(../img/picts/black/tmp_logo.svg);			}	
header .settings		{	background-image: url(../img/picts/black/settings.svg); 		}			
header .hotline			{	background-image: url(../img/picts/black/contact_support.svg); 	}
header .locator			{	background-image: url(../img/picts/black/location_on.svg); 		}
header .ecare			{	background-image: url(../img/Logo_Toyota-eCare_small.svg); 		}
header .logout			{	background-image: url(../img/picts/black/logout.svg);			}

header .nav				{	background-image: url(../img/picts/black/menu.svg); opacity: 1.00; } 		
.navon header .nav		{	background-image: url(../img/picts/black/close.svg); }

.toggle-left.ico.left			{	background-image: url(../img/picts/black/keyboard_arrow_left.svg); position: fixed; z-index: 3; top: calc(50.00% - 1.00em); left: 0; height: 2.00em; width: 2.00em; background-repeat: no-repeat; background-position: center; background-size: cover; }
.left-out .toggle-left.ico.left			{	background-image: url(../img/picts/black/keyboard_arrow_right.svg); }
.left-out #content > div:nth-of-type(1)	{	flex: 0 0 0; overflow: hidden;  }

/* --- Support --- */

#hotline	{	position: relative; width: 100.0%; height: 0; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; overflow: hidden; }

.hotlineon header > div		{	border-bottom-width: 0; }
.hotlineon header .hotline	{	background-image: url(../img/picts/white/close.svg); opacity: 1.0; }			
.hotlineon #hotline			{	height: 42px; }
			
#hotline a[href^="../"]		{	margin: 0 1.00em; padding: 0.45em 1.00em 0.55em; border-radius: 0.25em; }
		
/* --- Glossar --- */

.glossar		{	columns: 5 22.50em; gap: 4.00em;  column-rule: 1px solid var(--border); column-fill: balance-all; } 
.glossar *  	{ 	break-inside: avoid; }

.glossar span  			{ 	position: relative; display: block; width: 100.0%; margin-bottom: 2.00em; border-top-width: 1px; counter-increment: abc; }
.glossar span:before 	{ 	content: counter(abc, upper-alpha); position: absolute; top: 0; right: 0; font-size: 2.00em; opacity: 0.125; }
.glossar * + span  		{ 	margin-top: 2.50em; }
          		
/* --- Store Locator (nur Header DL) --- */

#dealerlocator			{	position: relative; width: 100.0%; height: 0; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; overflow: hidden; }
#dealerlocator > span	{	width: 100.0%; height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }

#dealerlocator input[type=search]	{	display: block; width: calc(100.0% - 70px - 2.00em); height: 100.0%; border-width: 0; box-shadow: none; text-align: right; }
#dealerlocator .ico					{	width: calc(70px - 2.10em); height: 100.0%; padding-top: 0; background-position: center; background-size: 2.00em; }

.dealerlocatoron header .locator	{	background-image: url(../img/picts/black/close.svg); opacity: 1.0; }			
.dealerlocatoron #dealerlocator 	{	height: 42px; }
				
/* --- Nav --- */

nav				{	position: absolute; z-index: 7; top: 0; left: 0; width: 100.0%; height: 0; overflow: hidden; transition: height 600ms ease-in-out 0ms; }
nav	> div		{	position: absolute; top: 0; left: 0; width: 100.0%; padding: 130px 5.00% 60px; }
nav	a			{	display: block; }
nav	img			{	max-width: 20.00em; }

.navon nav	{	height: 100.0vh; }
.navon		{	position: fixed; }

/* --- Sub-Menu --- */

#submenu			{	position: sticky; z-index: 4;  top: 0; margin: 0 auto; width: 100.0%; height: 42px; }
#submenu > div		{	width: 94.00%; height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
#submenu > div span	{	display: flex; gap: 1.00em; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
#submenu > div span	+ span 	{	gap: 0; justify-content: flex-end;}
		
#submenu a 		{	position: relative; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
#submenu a + a	{	margin-left: 1.20em; }
	
#submenu a:before		{	position: absolute; left: 0; bottom: 0; width: 0; height: 3px; content: ''; }
#submenu a:hover:before, #submenu a.selected:before	{	width: 100.0%; } /*Zusätzliche Klasse für ausgewähltes Submenuitem*/
#submenu .groupicon a:hover:before			{	width: 65.0%; }
#submenu .groupicon a:last-child			{	margin-left: 1.20em; padding-left: 1.20em;}
#submenu .groupicon a:last-child:before		{ margin-left: 1.20em; }
				
#submenu > div > span:first-child > a:after		{	content: 'holiday_village'; display: inline-block; margin-left: 0.25em; }

/* --- DealerSearch --- */

.dealersearch {  background-color: white; box-shadow: 0.50em 1.50em 1.50em 0 rgba(0,0,0,0.6); height: 42px; left: 0; position: absolute; top: 71px; width: 100.0%; z-index: 4;  }
.dealersearch > form {  border-width: 0; height: 100%; width: 100%;  }
.dealersearch > form > div {  align-content: center; align-items: center; display: flex; flex-flow: row wrap; justify-content: center; height: 100.0%; justify-content: space-between; margin: 0 auto; width: 100.0%;  }
.dealersearch > form > div > input[type="search"] {  border-width: 0; box-shadow: none; box-sizing: border-box; display: block; height: 100.0%; text-align: right; width: calc(100.0% - 70px - 2.00em);  }
.dealersearch > form > div > button[type="submit"] {  background-position: center; background-size: 2.00em; border-radius: 0; box-sizing: content-box; height: 100.0%; padding-top: 0; padding-right: 0; width: calc(70px - 2.10em);  }
.search-off + .dealersearch {  box-shadow: none; top: 0; }

/* --- Side-Menu --- */

.sideMenu {	background-color: #282830; color: white; max-height: 3em; overflow: hidden; padding-bottom: 1em; position: fixed; right: 0; top: calc(50.00% - 16em); transform: rotate(-90deg); transform-origin: right 3em; width: 16em; z-index: 4; }
.sideMenu > a.toggle-quick { background-image: url(../img/picts/white/expand_less.svg); background-position: right center; background-size: 2em; height: 3em; justify-content: flex-end; margin-right: 1em; opacity: 1; padding-right: 3em; padding-left: 0; }
.sideMenu > a {	align-content: center; align-items: center;	display: flex; flex-flow: row wrap; justify-content: center; color: white; background-position: left center; background-repeat: no-repeat; background-size: 1.5em; height: 2.5em; justify-content: flex-start; margin: 0 1.5em; opacity: 0.8;padding-left: 2.75em; position: relative; }

.sideMenu .ico.download {background-image: url(../img/picts/white/ic_download_white_24px.svg); display: grid; }
.sideMenu .ico {	display: inline-block; font-size: 0.9em; min-height: 2em; padding: 0.25em 0 0 2.5em; white-space: nowrap; }
.sideMenu > a.toggle-quick:before { content: 'Funktionen + Links'; }
.sideMenu > div { margin: 0 2em 1em 4em; position: relative; }
.sideMenu > div > p { color: white; }
.sideMenu > div > p > a { color: #ff0022; }

.quick-on .sideMenu { width: 20.00em; max-height: 36.00em; transform: rotate(0deg); z-index: 7; }
.quick-on .sideMenu > a.toggle-quick { background-image: url("../img/picts/white/close.svg"); }
.quick-on .sideMenu > a.toggle-quick:before {	content: 'Schließen'; transform: scale(0.75); }

/* --- Quick --- */
#quick {	position: absolute;	z-index: 3; top: calc(50.00% - 20.00em); right: 0; width: 15.00em; max-height: 3.00em; padding-bottom: 1.00em; overflow: hidden; transform: rotate(-90deg); transform-origin: right 3.000em; }		
#quick > a			{	opacity: 0.80; position: relative; height: 2.50em; margin: 0 1.50em; padding-left: 2.75em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; background-repeat: no-repeat; background-position: left center; background-size: 1.50em; }		
#quick > a:hover	{	opacity: 1.00; }		
#quick > div		{	position: relative; margin: 0 2.00em 1.00em 4.00em; }		

#quick > a.toggle-quick			{	opacity: 1.00; height: 3.00em; margin-right: 1.00em; padding-right: 3.00em; padding-left: 0; justify-content: flex-end; background-image: url(../img/picts/white/expand_less.svg); background-position: right center; background-size: 2.00em; }
#quick > a.toggle-quick:before	{	content: 'Funktionen + Links'; }

#quick > a.download	{	background-image: url(../img/picts/white/download.svg);   	   }		
#quick > a.settings	{	background-image: url(../img/picts/white/settings.svg);   	   }
#quick > a.supp		{	background-image: url(../img/picts/white/contact_page.svg);  border-top-width: 1px; margin-top: 0.50em; }
#quick > a.video	{	background-image: url(../img/picts/white/ondemand_video.svg);  }
#quick > a.hb		{	background-image: url(../img/picts/white/auto_stories.svg);    }
#quick > a.faq		{	background-image: url(../img/picts/white/contact_support.svg); }

#quick > hr ~ a			{	display: inline-block; width: 6.00em; height: 3.00em; margin: 0; padding: 0; background-repeat: no-repeat; background-position: left center; }
#quick > hr ~ a			{	background-image: url(../img/Logo_Toyota-eCARE_inv.svg); margin-left: 4.00em; background-size: auto 1.50em; }
#quick > hr ~ a + a		{	background-image: url(../img/Logo_Toyota-EFA_inv.svg);   margin-left: 1.00em; background-size: auto 1.25em; }

.quick-on #quick 							{	width: 20.00em; max-height: 40.00em; transform: rotate(0deg); }		
.quick-on #quick > a.toggle-quick			{	background-image: url(../img/picts/white/close.svg); }		
.quick-on #quick > a.toggle-quick:before	{	content: 'Schließen'; transform: scale(0.75); }

/* --- TXT Size --- */

#txtsize				{	position: absolute; z-index: 99; top: calc(50.00% - 30.00em); right: 0; width: 3.00em; }
#txtsize > *			{	position: relative; width: 100.0%; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: 2.00em; border-width: 1px; background-color: white; }
#txtsize > * + *		{	margin-top: 2px; }
#txtsize #txt-small		{	background-image: url(../img/picts/black/text_decrease.svg); }
#txtsize #txt-medium	{	background-image: url(../img/picts/black/text_increase2.svg); }
#txtsize #txt-large		{	background-image: url(../img/picts/black/text_increase.svg); }

/* --- Helpboxx --- */

#helpboxx			{	position: fixed; z-index: 3; bottom: 7.50em; right: 2.00em; width: 22.50em; padding: 1.00em 2.00em 2.00em 7.00em; border-radius: 0.50em; background-repeat: no-repeat; background-position: top 1.00em left 1.00em; background-size: 5.00em; background-image: url(../img/MDI.png); }	
#helpboxx > span	{	display: block; width: 100.0%; margin-top: 1.00em; }	
#helpboxx .btn		{	min-width: 100.0%; }	
#helpboxx .ico		{	position: absolute; top: 1.00em; right: 1.00em; }	

:target#helpboxx	{	right: -25.00em; }	
/* --- Content --- */

#content 				{	position: relative; width: 100.0%; min-height: calc(100.0vh - 122px - 2.50em); display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
#content > div			{	position: relative; flex: 1 1 100px; padding: 3.00em 0 6.00em; overflow: hidden; }
#content > div + div	{	position: relative; flex: 4 1 400px; }
#content > div > div	{	position: relative; margin: 0 3.00vw; /*display: flow-root;  !!! */ }

/* --- Dashboard--- */

.db		{	display: grid; grid-template-columns: 1fr 28.00em; gap: 0 3.00vw; align-content: flex-start; align-items: flex-start; }

.potential						{	margin-bottom: -0.50vw; column-count: 3; column-width: 20.00em; gap: 2.00vw; column-rule: 2px dotted var(--border); /* column-fill: balance-all; */}
.potential > div  				{ 	break-inside: avoid; padding: 0.50vw 0; }
.potential > div .pad + .pad 	{ 	margin-top: 1.00vw }

.db	> div > div + div		{	margin-top: 3.00em; }

.db	.head					{	position: relative; height: 2.50em; margin-bottom: 2.00em; padding-top: 0.25em; border-bottom-width: 1px; 
								display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; 
								background-repeat: no-repeat; background-position: top left; background-size: auto 2.00em; }
.db	.head.sub			{	padding-top: 0; padding: 0 3.00em 0 8.00em; align-content: center; align-items: center; background-size: auto 100.0%; }
																							
.db	.head.sub span		{	position: absolute; top: 0; right: 0; margin: 0; }															   

.db	.head.sub.next {	background-image: url('../img/ID_RELAX.svg'); }
.db	.head.sub.ecare 	{	background-image: url('../img/ID_eCARE.svg'); }
.db	.head.sub.service 		{	background-image: url('../img/ID_ZUSE.svg');  }  /* Neubenennung für Kategorien aus der Datenbank */
.db	.head.sub.qualitätsmaßnahmen		{	background-image: url('../img/ID_CSC.svg'); } /* Neubenennung für Kategorien aus der Datenbank */

/* --- FLaps --- */

.db .head.toggle-flap-db-1,
.db .head.toggle-flap-db-2,	
.db .head.toggle-flap-db-3,	
.db .head.toggle-flap-db-4		{	padding-left: 3.00em; cursor: pointer; background-image: url(../img/picts/black/add_circle.svg); }

.db .toggle-flap-db-1 + div,
.db .toggle-flap-db-2 + div,	
.db .toggle-flap-db-3 + div,
.db .toggle-flap-db-4 + div		{	max-height: 0; overflow: hidden; }
	
.db .head.toggle-flap-db-1.flap-db-1-on,
.db .head.toggle-flap-db-2.flap-db-2-on,	
.db .head.toggle-flap-db-3.flap-db-3-on,	
.db .head.toggle-flap-db-4.flap-db-4-on		{	background-image: url(../img/picts/black/remove_circle.svg); border-bottom-width: 0; }

.db .toggle-flap-db-1.flap-db-1-on + div,
.db .toggle-flap-db-2.flap-db-2-on + div,	
.db .toggle-flap-db-3.flap-db-3-on + div,	
.db .toggle-flap-db-4.flap-db-4-on + div	{	max-height: 1000.0em; overflow: visible; }    

/* --- Dashboard-Elements --- */

.scrollbox				{	position: relative; padding: 1.00em 0 0 1.00em; margin-bottom: 3.00em; border-width: 1px; overflow-x: hidden; background-color: white; min-height: 30em; } /* mindesthöhe um freien platz immer auszufüllen */
.scrollbox > div		{	height: calc(75.00vh - 112px - 35.00em); padding-top: 1.00em; padding-right: 1.00em; border-top-width: 1px; min-height: 30em; }
.scrollbox.dl			{	margin-bottom: 0.00em; }
.scrollbox.dl > div		{	height: calc(100.0vh - 112px - 16.50em); }
span.fixedTargetGroup   { max-width: 80%; display: inline-block; } /* fixed Weite da alte Targetgroups zu lang sind */
h4.fixedTargetGroup     {	padding-bottom: 10px;} /* padding nach unten wegen alten Targetgroups */
h4.fixedTargetGroup > span    {	height: 32px; display: inline-block; } 

/* --- Display --- */

.display				{ 	padding-top: 1.00em; display: flex; gap: 0.75em; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }
.display > *:not(h4)	{ 	flex: 1 1 100.0%; margin: 0; }
.display > a			{ 	flex: 1 1 40.00%; padding: 0.50em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; border-radius: 0.25em; background-color: white; background-repeat: no-repeat; background-position: top 0.25em right 0.25em; background-size: 1.50em; }
.display > a > span				{ 	flex: 0 0 2.00em; justify-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-start; align-items: flex-start; margin-right: 0.50em; }
.display > a > span	+ span		{ 	flex: 1 1 2.00em; justify-content: flex-start; }
.display > a > span	+ span > *	{ 	width: 100.0%; display: block; }

.display > a:nth-child(2)	{ 	background-color: var(--sofa-3); background-image: url(../img/picts/white/car_crash.svg); } 
.display > a:nth-child(2) *	{ 	color: white; }
.display > a:nth-child(3)	{ 	background-color: var(--sofa-2); }
.display > a:nth-child(5)	{ 	background-color: var(--sofa-3); } 
.display > a:nth-child(5) *	{ 	color: white; }
.display > a:nth-child(6)	{ 	background-color: var(--sofa-2); }

/* --- BKZ --- */

.set			{ 	position: relative; display: block; } 
.set + .set		{ 	margin-top: 1.00em; } 
.set .cancel	{ 	position: absolute; top: -0.50em; right: 0; } 

.bkz			{ 	display: flex; gap: 1.50em; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; } 
.bkz + .bkz		{ 	margin-top: 1.50em; } 

.bkz > span:nth-child(1)		{ 	flex: 0 0 4.00em; aspect-ratio: 1 / 1; margin-right: 1.00em; border-radius: 100.0%; } 
.bkz > span:nth-child(2)		{ 	flex: 1 1 4.00em; } 
.bkz > span:nth-child(2) > span			{ 	display: block; } 
.bkz > span:nth-child(2) > h4 + span	{ 	margin-top: 0.25em; } 
	
.trend			{ 	background-repeat: no-repeat; background-position: center; background-image: url(../img/icon_trend.svg); background-size: 82.00% auto; background-color: var(--sofa-10); }
.trend.top		{ 	transform: rotate(-90.0deg);  } 
.trend.plus		{ 	transform: rotate(-30.0deg); } 
.trend.minus	{ 	transform: rotate(30.0deg);  } 
.trend.bad		{ 	transform: rotate(90.0deg); } 
.trend.blank	{ 	filter: grayscale(1.0); } 

.bkz + .ico.cancel	{ 	position: absolute; top: -0.50em; right: 0; } 

/* --- Pads --- */

.pad				{ 	position: relative; padding: 1.00em 1.50em 1.25em; border-radius: 0.125em; display: flex; gap: 1.00em; flex-flow: column wrap; justify-content: space-between; align-content: stretch; align-items: stretch; } 
a.pad:hover			{ 	cursor: pointer; transform: scale(1.05); } 

.pad h4				{ 	width: calc(100.0% - 7.50em); } 
/*	.pad > *			{ 	position: relative; z-index: 2; width: 100.0%; } 
	.pad form			{ 	margin: 0; } 
	.pad > div + div	{ 	margin-top: 0.25em;*/ /*background: pink; */ /*}*/ 
.pad > .grid		{ 	width: 100.0%; } 
.pad > span			{ 	width: 100.0%; position: relative; z-index: 2; } 
.pad > span.smaller {	font-size:0.85em}
.pad > .btn			{ 	width: auto; } 
.pad form			{ 	margin: 0; }


.recommended-potentials				{	min-height: 13rem;	}
.recommended-potentials > div		{	display: flex; flex-direction: column; }
.recommended-potentials > div > div {	height: 4rem; }
.recommended-potentials > hr		{	width: 100%; margin: 0; margin-top: 0.5rem; }
.pad.recommended-potentials .btn	{	font-size: 0.65em; }	 



.scrollbox.aktuell.bubble:after {	content: '3'; }
.scrollbox.dealer.bubble:after	{	content: '50'; }
.scrollbox.contact.bubble:after	{	content: '153'; }

.extra 							{	padding: 1.50em 1.50em 1.25em; border-radius: 0.30em; }
.extra > div:first-child		{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }
.extra > div:first-child > img 	{	width: 90px; height: auto; margin-right: 1.00rem; }
.extra > div:first-child > span {	flex: 1 1 10.00%; }
	
.pad.video 			{ 	justify-content: space-between; } 

.pad.video > span	{	} 
.pad.video video	{	width: 100.0%; height: auto; margin-bottom: 1.00em; }
.pad.video img		{	float: right; width: 7.00em; height: auto; margin-left: 1.00em; }
.pad.video:target 	{ 	transform: scale(1.05); box-shadow: 1.50em 1.50em 5.00em 1.00em  var(--border), inset 0 0 0 0.50em white; } 

.pad.video .top			{	height: 4.00em; display: block; padding-bottom: 1.00em; padding-left: 4.00em; border-bottom-width: 0; display: flex; justify-content: flex-start; flex-flow: row wrap; align-content: center; align-items: center;
								background-size: 3.00em auto; background-image: url(../img/picts/black/play_circle_outline.svg); background-repeat: no-repeat; background-position: top left; } 
.pad.video .bot			{	display: block; margin-top: 1.00em; padding-top: 1.00em; border-top-width: 1px; align-self: flex-end; } 

.pad.faq			{ 	justify-content: flex-start; } 

.pad.epost			{ 	background-size: 3.50em auto; background-image: url("../img/Logo_ePost.svg"); background-repeat: no-repeat; background-position: top right;	} 
.pad.ecare			{ 	background-size: 5.50em auto; background-image: url(../img/Logo_eCARE.svg); background-repeat: no-repeat; background-position: top 1.00em right 1.50em; }

.pad.ecare .display > a.nodataClass:nth-child(2) { background-color: white; }
.pad.ecare .display > a.nodataClass:nth-child(2) * { color: black; }
.pad.ecare .display > a.nodataClass:nth-child(3) { background-color: white; }
.display > a.nodataClass:nth-child(5) {  background-color: white;}
.display > a.nodataClass:nth-child(5) * { color: black; }
.display > a.nodataClass:nth-child(6) { background-color: white; }


.pad.kundenbindung 	{	background-image: url('../img/NLS_Bild.png'); }

.progress					{ 	position: relative; margin: 3.00em 0 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; background-color: var(--sofa-10); } 
.progress > span			{ 	flex: 1 1 10.00%; height: 0.75em; border-width: 1px; }
.progress > span + span		{ 	border-left-width: 1px; }
	
.progress:before		{ 	position: absolute; top: -2.00em; left:  0; content: 'Fortschritt'; } 
.progress:after			{	position: absolute; top: -1.75em; right: 0; } 

.progress.step-13:after	{ 	content: 'Kunden freigeben!'; }		/* correct progress step names */
.progress.step-20:after	{ 	content: 'Kunden freigeben!'; } 	
.progress.step-22:after	{ 	content: 'Kunden freigeben!'; } 	
.progress.step-23:after	{ 	content: 'Anschreiben erstellen!'; } 	
.progress.step-30:after	{ 	content: 'Aktion beenden!'; }	
.progress.step-31:after	{ 	content: 'Kunden nachfassen!'; }	
.progress.step-32:after	{ 	content: 'Kunden nachfassen!'; }	
.progress.step-33:after	{ 	content: 'Kunden nachfassen!'; }
							 

.progress.step-13 > span 						{ 	background-color: var(--sofa-3);  }
.progress.step-13 > span + span					{ 	background-color: transparent;    }

.progress.step-20 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-20 > span + span					{ 	background-color: var(--sofa-30); }
.progress.step-20 > span + span + span			{ 	background-color: transparent;    }

.progress.step-22 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-22 > span + span					{ 	background-color: var(--sofa-2);  }
.progress.step-22 > span + span + span			{ 	background-color: transparent;    }

.progress.step-23 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-23 > span + span					{ 	background-color: var(--sofa-3);  }
.progress.step-23 > span + span + span			{ 	background-color: transparent;    }

.progress.step-30 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-30 > span + span + span			{ 	background-color: var(--sofa-30); }
.progress.step-30 > span + span + span + span	{ 	background-color: transparent;    }

.progress.step-31 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-31 > span + span + span			{ 	background-color: var(--sofa-1);  }
.progress.step-31 > span + span + span + span	{ 	background-color: transparent;    }

.progress.step-32 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-32 > span + span + span			{ 	background-color: var(--sofa-2);  }
.progress.step-32 > span + span + span + span	{ 	background-color: transparent;    }

.progress.step-33 > span 						{ 	background-color: var(--sofa-30); }
.progress.step-33 > span + span + span			{ 	background-color: var(--sofa-3);  }
.progress.step-33 > span + span + span + span	{ 	background-color: transparent;    }

.progress.step-40 > span 						{ 	background-color: var(--sofa-30); }
								
 				
.pad:before			{	position: absolute; top: -1.75em; right: 0; height: 1.50em; padding: 0 0 0.25em 2.00em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; 
						background-repeat: no-repeat; background-position: left center; background-size: 1.50em auto; }
.pad.brief:before,	
.pad.call:before,	
.pad.email:before 	{ 	content: ''; position: absolute; top: 0; right: 0; height: 5.00em; aspect-ratio: 1 / 1; margin: 0; padding: 0; opacity: 0.25; background-repeat: no-repeat; background-position: center; background-size: 62.00% auto; } 

.pad.brief:before	{ 	background-image: url(../img/picts/black/mail_outline.svg);    } 
.pad.call:before	{ 	background-image: url(../img/picts/black/perm_phone_msg.svg);  } 
.pad.email:before	{ 	background-image: url(../img/picts/black/alternate_email.svg); } 

.pad > .btn				{	position: absolute; top: 0.50em; right: 0.50em;  }

.pad .num			{	height: 2.25em; padding-right: 1.00em; display: grid; place-items: center right; background-color: var(--sofa-10); margin-top: 0.25em; }

.future:before		{ 	content: 'FUTURE'; position: absolute; top: 1.00em; right: 0.50em; padding: 0.25em 0.50em 0.375em; transform: rotate(6deg); font-size: 0.75em; font-weight: bold; letter-spacing: 0.125em; } 

/* --- Footer --- */

footer			{	position: relative; z-index: 2; width: 100.0%; height: 2.50em; border-top-width: 1px; }
footer > div	{	position: relative; width: 94.00%; height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
	
footer .ico.backlink	{	position: absolute; z-index: 2; top: -3.50em; left: calc(50.00vw - 2.50em); }

.toplink		{	opacity: 0.50; position: fixed; z-index: 2; bottom: 3.50em; right: 0.30em; padding: 1.50em; border-radius: 0.50em; background: url(../img/picts/white/arrow_upward.svg) no-repeat center; background-size: 1.50em; }
.toplink:hover	{	opacity: 0.80; }

/* --- Overlay --- */

.overlay				{	position: fixed; z-index: 999; top: 0; left: 0; width: 100.0%; height: 100.0%; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.overlay > div			{	position: relative; z-index: 2; width: 480px; height: auto; padding: 1.50em; border-radius: 0.125em; }
.overlay.large > div	{	width: 960px; max-width: 90.00%; }
.overlay.max > div		{	width: 960px; max-width: 90.00%; height: 82.00%; }

.overlay > div > .box	{	margin-bottom: 2.00em; }

.overlay > div > .scroll					{	margin-bottom: 2.00em; max-height: 50.00em; border-width: 1px 0 1px 1px; }
.overlay > div > .scroll > *:first-child	{	margin-top: -1px; }

.overlay			{	transition: transform 150ms ease-in-out 150ms; 	transform: scale(0); }
.overlay:target		{	transition: transform ease-in-out 150ms; 		transform: scale(1); }
												
						 
		  
/* --- Aside (Flap) --- */

.aside		{	position: fixed; z-index: 999; top: 0; right: 0; width: 0; height: 100.0%; overflow: hidden; transition: width 600ms ease-in-out 0ms; }

.aside-on 			{	position: fixed; }
.aside-on .aside	{	width: 100.0%; }

.aside > div		{	position: absolute; top: 0; right: 0; width: 700px; height: 100.0%; }
.aside > div:before	{	position: absolute; top: 0; left: 0; width: 3px; height: 100.0%; content: ''; }
.aside > div > div	{	width: calc(100.0% - 6.00em); height: calc(100.0% - 6.00em); margin: 3.00em; }

.aside .header		{	width: 100.0%; height: 2.00em; padding-bottom: 1.00em; border-bottom-width: 1px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.aside .header img	{	width: auto; height: 1.50em; }

#aside-efa .searchfix						{	width: 100.0%; height: 10.00em; padding: 1.00em; border-radius: 3px; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#aside-efa .searchfix > div					{	width: 62.00%; }
#aside-efa .searchfix > div	> .span			{	display: block; }
#aside-efa .searchfix > div	> .searchbox	{	margin-top: 0.50em; }

#aside-efa .main	{	width: 100.0%; height: calc(100.0% - 10.00em); overflow: hidden; }

#aside-efa .main > .result 				{	margin: 0 -10px; height: calc(50.00% - 10px); overflow: hidden; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
#aside-efa .main > .result + .result 	{	margin-top: 20px; }
#aside-efa .main > .result > div		{	height: 100.0%; flex: 1 1 10.00%; margin: 0 10px; }

#aside-efa .main .tablehead				{	width: 100.0%; height: 20px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; }
#aside-efa .main .tablebox				{	height: calc(100.0% - 20px - 2px); border-top-width: 1px; }
#aside-efa .main .tablebox.scroll		{	border-bottom-width: 1px; }

#aside-efa .main > .result + .result > div 		{	height: calc(100.0% - 20px - 20px - 2px); }
#aside-efa .main > .result + .result > .full	{	flex: 1 1 100.0%; height: 20px; margin-bottom: 0; padding-bottom: 10px; border-bottom-width: 1px; }

/* --- Support (Manuls) --- */

a.support 			{	padding-top: 1.00em; padding-bottom: 0.50em; display: block; min-height: 5.00em; padding-left: 4.00em; background-repeat: no-repeat; background-position: left top 1.00em; background-size: 3.00em auto; } /* Stylinganpassung für einheitliche Größen */
a.support + a	 	{	border-top-width: 1px; } /* Stylinganpassung für einheitliche Größen */
a.support + .box	{	margin-top: 1.50em; padding-left: 3.00em; border-top-width: 0.50em; background-image: url(../img/picts/black/contact_support.svg); background-repeat: no-repeat; background-position: top 0.75em left 0.50em; background-size: 2.00em; }
a.support.video {	background-image: url(../img/picts/black/ondemand_video.svg); }
a.support.hb 	{	background-image: url(../img/picts/black/auto_stories.svg); }
a.support.faq 	{	background-image: url(../img/picts/black/help_outline.svg); }

ul.items			{	list-style: none; max-width: 40.00em; margin: 2.00em 0; }
ul.items li	+ li	{	margin-top: 1.00em; }
ul.items li			{	position: relative; min-height: 3.00em; padding-left: 4.00em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; counter-increment: items; }
ul.items li:before		{	opacity: 0.50; position: absolute; top: 0; left: 0; width: 2.00em; height: 2.00em; padding-bottom: 0.125em; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; content: counter(items, decimal); }
ul.items li.red:before	{	opacity: 1.00; }

.hb-img			{	width: 100.0%; height: auto; border-width: 2px; }
.hb-img.small	{	width: 50.00%; }
.hb-img.nobo	{	border-width: 0; }
			
/* --- Doku --- */

.docu .scroll		{	height: calc(100.0vh - 70px - 2.50em - 34.00em); }

.dokuhead			{	width: 100.0%; padding: 0 1.00em; border-width: 1px 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.dokuhead > *		{	position: relative; flex: 0 0 12.50em; padding: 0.50em 0 0.50em 0.50em; white-space: pre; overflow: hidden; text-overflow: ellipsis;  text-overflow: " ..."; }
.dokuhead > * + *	{	border-left-width: 1px; }
.dokuhead > *:nth-child(1)	{	flex: 0 0 10.00em; }
.dokuhead > *:nth-child(2)	{	flex: 0 0  5.50em; }
.dokuhead > *:nth-child(6)	{	flex: 1 1 12.50em; padding-right: 3.00em; }

summary					{	width: 100.00%; border-top-width: 1px; }
summary.dokuhead 		{	border-width: 0; }
summary.dokuhead > *	{	padding: 1.00em 0.50em; }
summary.dokuhead > *:nth-child(2):before	{	content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.25; background-repeat: no-repeat; background-position: center; background-size: 2.00em; }		

.contact-auto  > summary.dokuhead > *:nth-child(2):before	{	background-image: url(../img/picts/black/notification_add.svg); }		
.contact-call  > summary.dokuhead > *:nth-child(2):before	{	background-image: url(../img/picts/black/perm_phone.svg); }
.contact-email > summary.dokuhead > *:nth-child(2):before	{	background-image: url(../img/picts/black/alternate_email.svg); }
.contact-meet  > summary.dokuhead > *:nth-child(2):before	{	background-image: url(../img/picts/black/groups.svg); }
.contact-video > summary.dokuhead > *:nth-child(2):before	{	background-image: url(../img/picts/black/video_camera_front.svg); }

details					{	position: relative; width: 100.00%; border-bottom-width: 1px; background-image: url(../img/picts/black/unfold_less.svg); background-repeat: no-repeat; background-position: top 1.00em right 1.00em; background-size: 1.75em; cursor: pointer; }
details[open] 			{	border-top-width: 1px; background-image: url(../img/picts/black/unfold_more.svg); }
details	> div			{	max-height: 0; padding: 1.00em 3.00em 1.00em 1.50em;  border-width: 1px 0; width: 100.0%; overflow: hidden; }
details[open] > div 	{	max-height: 50.00em; }
details[open]:before 		{	content: ''; position: absolute; top: 0; left: 0; width: 0.50em; height: 100.0%; opacity: 0.125; background-color: var(--dark); }
details[open]:hover:before 	{	opacity: 0.50; }

details[open] > div.frame 			{	padding: 0; height: 50.00em; }
details[open] > div.frame > iframe 	{	width: calc(100.00% - 3.00em); height: 50.00em; }

/* --- eCare --- */

.boxmessage				{	display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; }

.message				{	opacity: 0.75; position: relative; width: 100.0%; padding: 0.50em 1.00em 1.00em 2.00em; border-radius: 3px; cursor: pointer; border-width: 1px; }
.message > *			{	order: 1; }
.message + .message		{	margin-top: 0.25em; }
.message > span			{	position: absolute; top: 0; left: 0; width: 1.00em; height: 100.0%; border-radius: 3px 0 0 3px; }
.message > .ico.cancel	{	position: absolute; top: 0.50em; right: 0;  }

#newmessage			{	opacity: 1.00; background-color: white; background-image: url('../img/picts/black/forward.svg'); background-repeat: no-repeat; background-position: bottom 0.50em right 0.50em; background-size: 2.00em auto; }
#newmessage.no		{	background-image: none; }
#newmessage:after	{	position: absolute; opacity: 0.75; bottom: calc(-1.00em - 2px); left: 0; width: 100.0%; height: 1px; content: ''; }
#newmessageACN      {   opacity: 1.00; background-color: white; margin-bottom: 2em; background-repeat: no-repeat;  background-position: bottom 0.5em right 0.5em;  background-size: 2em auto; }

/* --- Elemente --- */
	
/* --- End DEMO DB --- */

.bubble:after, .newsbubble		{	position: absolute; z-index: 2; top: 0.50em; right: 1.50em; padding: 0.20em 1.00em 0.40em; border-radius: 3.00em; } /* newsbubble da wir kein after element befüllen */
.pad.bubble:after	            {	top: -2.00em; right: 0; padding: 0.375em 0 0.50em 2.50em; background-repeat: no-repeat; background-position: left center;background-size: auto 100.0%; background-color: transparent; }
				
.pad.bubble.eilt:after		{	 background-image: url("../img/picts/red/speed_outline.svg"); content: 'Dringend!'; color: var(--sofa-3); }
.pad.bubble.frist:after		{	 background-image: url(../img/picts/black/alarm_outline.svg); content: 'Bis 00.00.20xx starten!'; }
.pad.bubble.new:after		{	 background-image: url(../img/picts/black/grade_outline.svg); content: 'NEU!'; }
	

.control			{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.control > *		{	max-width: 60.00%; }
	

p.tipp		{	border-left-width: 0.25em; padding-left: 1.25em; }

.tippbox		{	padding-left: 3.50em; background-repeat: no-repeat; background-position: top left; background-size: 2.50em; }
.tippbox.repeat	{	background-image: url(../img/picts/black/repeat.svg); }

.ico 		{	position: relative; display: inline-block; min-height: 2.00em; padding: 0.375em 0 0 2.50em; background-repeat: no-repeat; background-position: center left 0.25em; background-size: 1.75em; /* background-color: lime !important; */ }
.ico.right 	{	float: right; }

.ico.add		{	background-image: url(../img/picts/black/add_circle.svg);			}
																		  
.ico.auto		{	background-image: url(../img/picts/black/notification_add.svg); 	}
.ico.backlink	{	background-image: url(../img/picts/black/keyboard_backspace.svg); 	}	
.ico.call		{	background-image: url(../img/picts/black/perm_phone.svg);  			}
.ico.close		{	background-image: url(../img/picts/black/close.svg);  				}
.ico.cancel		{	background-image: url(../img/picts/black/cancel_outline.svg);  		}
.ico.download	{	background-image: url(../img/picts/black/download.svg);  			}
.ico.delete		{	background-image: url(../img/picts/black/delete_forever.svg); 		}
.ico.mail		{	background-image: url(../img/picts/black/email-outline.svg); 		}
.ico.email		{	background-image: url(../img/picts/black/alternate_email.svg); 		}
.ico.forward	{	background-image: url(../img/picts/black/forward.svg); 				}
.ico.launch		{	background-image: url(../img/picts/black/launch.svg); 				}
.ico.mail		{	background-image: url(../img/picts/black/mail_outline.svg); 		}
.ico.meet		{	background-image: url(../img/picts/black/groups.svg); 				}
.ico.overview	{	background-image: url(../img/picts/black/remove_red_eye.svg); 		}
.ico.refresh	{	background-image: url(../img/picts/black/refresh.svg); 				}
.ico.repeat		{	background-image: url(../img/picts/black/repeat.svg); 				}															   
.ico.save		{	background-image: url(../img/picts/black/save.svg); 				}
.ico.search		{	background-image: url(../img/picts/white/search.svg); 				}
.ico.start		{	background-image: url(../img/picts/black/rocket_launch.svg); 		}
.ico.time		{	background-image: url(../img/picts/black/schedule.svg); 			}
.ico.video		{	background-image: url(../img/picts/black/video_camera_front.svg); 	}
.ico.alert		{	background-image: url(../img/picts/red/report_problem.svg); 		}

table .ico.alert {
	position: absolute;
	bottom: calc(50.00% - 1em);
	left: 100.0%;
	opacity: 1.00;
}

.ico.pdf		{	background-image: url('../img/picts/red/Icon-PDF_red.svg'); background-size: 2.00em; padding-left: 3.00em; }
		
.btn 				{	height: 3.00em; position: relative; display: inline-block; width: auto; padding: 0.85em 2.00em 1.00em; border-radius: 0.125em; }
.btn + .btn			{	margin-left: 2.00em; }
.btn.sec 			{	padding: 0.85em 1.50em 0.85em 2.75em; background-color: transparent; display: inline-block; background-image: url(../img/picts/black/east.svg); background-repeat: no-repeat; background-position: center left 0.75em; background-size: 1.50em; } /*padding bottom damit derText mittig im Button ist*/
.btn.right 			{	float: right; }

.btn.sec.add		{	background-image: url(../img/picts/black/add_circle.svg); 		}
.btn.sec.auto		{	background-image: url(../img/picts/black/alarm_on.svg); 		}
.btn.sec.close		{	background-image: url(../img/picts/black/close.svg); 			}
.btn.sec.check		{	background-image: url(../img/picts/black/check.svg); 			}
.btn.sec.delete		{	background-image: url(../img/picts/black/delete_forever.svg); 	}
.btn.sec.download	{	background-image: url(../img/picts/black/download.svg); 		}
.btn.sec.email		{	background-image: url(../img/picts/red/alternate_email.svg); 	}
.btn.sec.file		{	background-image: url(../img/picts/red/attach_file.svg);		}
.btn.sec.mail		{	background-image: url(../img/picts/red/mail_outline.svg);  		}
.btn.sec.save		{	background-image: url(../img/picts/black/save.svg);    			}
.btn.sec.start		{	background-image: url(../img/picts/black/rocket_launch.svg);   	}
.btn.sec.work		{	background-image: url(../img/picts/black/settings.svg);    		}
.btn.sec.video		{	background-image: url(../img/picts/black/play_circle.svg);    	}

.btn:hover, .ico:hover, .pad:hover .btn, .pad:hover td.status > a	{	opacity: 0.80; }

/* --- Tooltipp --- */

.tooltip				{	position: absolute; z-index: 6; top: 0.125em; right: 0.125em; width: 1.75em; aspect-ratio: 1 / 1; border-radius: 100.0%; background-repeat: no-repeat; background-position: center; background-size: 2.00em; background-image: url('../img/picts/black/info.svg'); cursor: pointer; }
.tooltip.left			{	left: 0.125em; right: inherit; }
.tooltip > span			{	position: absolute; z-index: 2; bottom: 2.00em; left: calc(50.00% - 7.50em); width: 15.00em; height: auto; max-height: 0; padding-bottom: 0; opacity: 0; transition: opacity 150ms ease-in-out 0ms; overflow: hidden; }
.tooltip > span:before	{	content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: calc(100.0% - 1.25em); }
.tooltip > span:after	{	content: ''; position: absolute; bottom: 0.50em; left: calc(50.00% - 1.00em); width: 2.00em; aspect-ratio: 1 / 1; transform: rotate(-45.00deg); transform-origin: center; }
.tooltip > span > span	{	position: relative; z-index: 2; display: block; margin: 2px; padding: 0.75em 1.00em 1.00em; }
.tooltip:hover > span	{	max-height: 20.00em; padding-bottom: 1.25em; opacity: 1.00; }
.intab .tooltip			{	top: -1.00em; right: -0.50em; }
.tooltip > .rotated		{	transform: rotate(180deg); bottom: unset; top: 2em;} /* gedrehter Tooltip damit er nicht unter dem submenu verschwindet */
.tooltip > .rotated > span	{	transform: rotate(-180deg)}						/* gedrehter Text im gedrehten Tooltip */
.tooltip.wider > span	{ position: absolute; z-index: 2; bottom: 2.00em; left: 50%; transform: translateX(-50%); width: 30.00em; height: auto; max-height: 0em; padding-bottom: 0; opacity: 0; transition: opacity 150ms ease-in-out 0ms; }
.tooltip.wider:hover > span {	max-height: 20em; padding-bottom: 1.25em; opacity: 1; }
	
/* --- Helppoints --- */

#layer-helppoints			{	position: fixed; z-index: 999; top: 69px; right: calc(50.00% - 7.50em); height: 43px; width: 14.00em; padding: 0 3.00em; border-radius: 3.00em; border-width: 0; box-shadow: 0.25em 0.25em 1.00em 0 #00000025;
								display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; cursor: move; transition: none; }
#layer-helppoints a			{	position: absolute; top: 0; right: 0; height: 100.0%; aspect-ratio: 1 / 1; background-image: url(../img/picts/black/close.svg); background-repeat: no-repeat; background-position:center; background-size: 1.25em; cursor: pointer; }
#layer-helppoints:before	{	content: ''; position: absolute; top: calc(50.00% - 0.50em); left: 1.00em; width: 1.00em; aspect-ratio: 1 / 1; border-radius: 100.0%; background-color: var(--sofa-1); }
.toggle-helppoints:before	{	content: 'Help points on'; cursor: pointer; }

.helppoint			{	position: absolute; display: none; z-index: 2; top: -0.50em; right: -0.50em; width: 1.50em; aspect-ratio: 1 / 1; border-radius: 100.0%; overflow: hidden; background-color: var(--sofa-1); }
.helppoint:before	{	content:'!'; position: absolute; top: -0.125em; right: 0; width: 100.0%; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }

.helppoint,
#layer-helppoints:before 	{ animation: pulse 1500ms infinite; }
@keyframes pulse 	{  0% { box-shadow: #3fbfb2 0 0 0 0; } 
		75% { box-shadow: #3fbfb200 0 0 0 1.00em; }}

#layer-helppoints:target	{	display: none; }

.helppoints-on .helppoint									{	display: block; }
.helppoints-on #layer-helppoints:before						{	animation: 'none'; background-color: var(--sofa-1); }
.helppoints-on #layer-helppoints .toggle-helppoints:before	{	content: 'Help points off'; }

/* --- Imagebox --- */
			
.imgbox								{	width: 100.0%; display: block; margin-top: 1.00em; }
.imgbox > span + span				{	margin-top: 0.50em; display: grid; gap: 0.50em; grid-template-columns: repeat(2, 1fr); }
.imgbox > span + span > .img		{	position: relative; }
.imgbox > span + span > .img > img	{	width: 100.0%; }
.imgbox > span + span > .img > .ico	{	position: absolute; z-index: 2; top: 0.50em; right: 0.50em; width: 2.00em; aspect-ratio: 1 / 1; padding: 0; opacity: 1; border-radius: 100.0%; background-position: center; background-color: white; }


/* --- Supportseite --- */
    /* Manuelles styling */
#supportManuals div.form-label-group:last-of-type 
{  height: 6em;  }

#supportManuals button.toggle-thank 
{  margin-top: 1.5em;  }

#supportManuals .form-label-group 
{  align-content: center; align-items: center; display: flex; flex-flow: row wrap; justify-content: center; justify-content: flex-start; height: 3em; margin: 0.9rem auto 0; position: relative; width: 100%;  }

#supportManuals .form-label-group * ~ label 
{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0 1.5em; cursor: text; transition: all 300ms ease-in-out 0ms; display: flex; flex-flow: row wrap; align-content: center; align-items: center; transform-origin: top right;  }

#supportManuals .form-label-group * ~ label:before 
{  content: none;  }

#supportManuals .form-label-group *:placeholder-shown ~ label 
{  color: #282830; transform: scale(1); justify-content: flex-start;  }

#supportManuals .form-label-group *:not(:placeholder-shown) ~ label, #supportManuals .form-label-group *:focus ~ label 
{  justify-content: flex-end; transform: scale(0.75);  }

.form-label-group + .form-label-group 
{  margin-top: 0.5em;  }


/*	=================================
		END
	================================= */
	
body.blank			{	width: 100.0%; height: 100.0vh; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; box-shadow: inset 0 0 0 3.00em pink; }
body.blank a		{	display: block; width: 240px; }
body.blank a svg 	{	fill: pink}

nav summary + div 		{	width: 100.0%; padding: 1.50em 1.50em 1.50em 3.00em; background-color: white; }
nav summary + div * 	{	color: var(--dark); }
nav summary + div a 	{	color: var(--sofa-3); display: inline-block; white-space: nowrap; }



#busy {
	background-color: var(--bgcolor);
    color: white;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#busy .lds-spinner {
	color:white;
  display: inline-block;
  height: 64px;
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
}

#busy .lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}

#busy .lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}

#busy .lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
#busy .lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
#busy .lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
#busy .lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
#busy .lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
#busy .lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
#busy .lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
#busy .lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
#busy .lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
#busy .lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
#busy .lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
#busy .lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.txtcolor-red,
.red {
  color: #ff0022;
}

/*	=================================
		Spinner
	================================= */

.lds-ring {
	/* change color here */
	color: var(--bgcolor);
}

	.lds-ring,
	.lds-ring div {
		box-sizing: border-box;
		color: var(--bgcolor);
	}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 2.5em;
	height: 2.5em;
}

	.lds-ring div {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 2em;
		height: 2em;
		margin: 5px;
		border: 4px solid currentColor;
		border-radius: 50%;
		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		border-color: currentColor transparent transparent transparent;
		color: #d9d9d9;
	}

		.lds-ring div:nth-child(1) {
			animation-delay: -0.45s;
		}

		.lds-ring div:nth-child(2) {
			animation-delay: -0.3s;
		}

		.lds-ring div:nth-child(3) {
			animation-delay: -0.15s;
		}

@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}