:root {
	--akzentFarbe: #ff3800;
	--akzentFarbeDu: #cc2d00;
	--akzentFarbeHe: #ff5d28;
	--textHell: #FEFCFB;
	--textDunkel: #001a43;
	--button: #043253;	
	--buttonHover: #19425f;	
	--buttonActive: #365871;
	--cellName: #d7d7d7 /*#e9e3e1;*/;
	
	--fsSuperSmall: 1rem; /* 16 */		--fsSuperSmallMobile: 0.9375rem; /* 15 */
	--fsSmall: 1.25rem; /* 20 */		--fsSmallMobile: 1.0625rem; /* 17 */
	--fsNormal: 1.3125rem; /* 21 */		--fsNormalMobile: 1.15625rem; /* 18.5 */
	--fsMiddle: 1.5625rem; /* 25 */		--fsMiddleMobile: 1.34375rem; /* 21.5 */
	--fsBig: 2.25rem; /* 36 */ 			--fsBigMobile: 1.75rem; /* 28 */

}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Condensed'), local('Roboto Condensed Regular'), local('Roboto-Condensed-Regular'),
    url(../graphbase/fonts/RobotoCondensed-Regular.ttf) format('truetype');
}
html {
	box-sizing: border-box;
}
body {	
	font-family: 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-style: normal;
    font-weight: 400;
	font-size: var(--fsNormal);
	color: var(--textHell);
	background-color: #f9f0e8;	
}
#hauptcontainer {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 0.05% 0 0.05%;
}

nav * {
	scrollbar-width: thin;
	scrollbar-color: #556F83 var(--buttonHover);
}
.exBox_2rows * {
	scrollbar-color: var(--button) var(--buttonHover);
}
nav *::-webkit-scrollbar {
	width: 0.675rem;
}
nav *::-webkit-scrollbar-track {
	background: transparent;
}
nav *::-webkit-scrollbar-thumb {
	background-color: #556F83;
	border: 0.175rem solid var(--buttonHover);
	border-radius: 0.25rem;
}
.exBox_2rows *::-webkit-scrollbar-thumb {
	background-color: var(--button);
	border: 0.15rem solid var(--buttonHover);
	box-shadow: inset 0 0 0 0.05rem rgba( 255, 255, 255, 0.18 );
}

a {
	text-decoration: none;
	color: var(--textHell);
}
a:hover {
	text-decoration: underline;
	color: var(--textDunkel);
}
a:active {
	text-decoration: underline;
	color: #ce2f0d;
}
label {
	display: flex !important;
	justify-content: space-start;
	align-items: center;
	line-height: 1;
}
::placeholder {
	color: var(--textHell);
}
input[type=radio] {
	display: none;	
}
input[type=checkbox] {
	display: none;
}
input {
	caret-color: var(--akzentFarbe);
}
.checkbox, .radiobox {
	display: inline-block;
	position: relative;
	bottom: -0.02em;
	background-color: var(--textHell);
	border: 0.125em solid var(--akzentFarbe);
	border-radius: 0.125em;
	padding: 0.3em;
	margin: 0 0.5em 0.1rem 0.5rem;
}
.radiobox {
	border-radius: 50%;
}
.checkbox:after {
	content: "";
	position: absolute;
	left: 0.175em;
	top: 0.025em;
	width: 0.25em;
	height: 0.5em;
	border: solid var(--textHell);
	border-width: 0 0.125em 0.125em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: block;
}
label input[type=checkbox]:hover ~ .checkbox,
label input[type=radio]:hover ~ .radiobox,
.resImpFlex:hover .radiobox {
	border: 0.125em solid var(--textHell);
	background-color: #96abbb;
}
label input[type=checkbox]:checked ~ .checkbox,
label input[type=radio]:checked ~ .radiobox,
.resImpFlex:checked .radiobox {
	border: 0.125em solid var(--textHell);
	background-color: var(--akzentFarbe);
}

input[type=number] {
  color: var(--textDunkel);
  background-color: lightblue;
}
input[type=number]::placeholder {
  color: var(--buttonActive);
}

.displNone { display: none; }
.displBlock { display: block; }
.displInline { display: inline; }
.displFlex { display: flex; }
.overflowHidden { overflow: hidden; }
.noData { padding: 0.5rem 0 0.5rem 0; }
.small { font-size: var(--fsSmall); }
.middle { font-size: var(--fsMiddle); }
.fat { font-weight: 700; }
.note { font-size: var(--fsMiddle); }
.lightItalic {
	font-family:'Roboto Condensed Light', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-style: italic;
	font-weight: 100;
}
.big {
	font-family: 'aGexpr-PN', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: var(--fsBig);
}
.bigN {	font-size: var(--fsBig); }
.uppercase {
	font-size: var(--fsSmall);
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.einheit {
	font-family: 'aGexpr-PN', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: var(--fsMiddle);
}
.button, .buttonActive {	
	text-align: center;
	cursor: pointer;
	border-bottom-width: 0.1875rem;
}
.button {
	background-color: var(--button);	
	border-bottom-color: var(--textHell);
}
.buttonActive {	
	background-color: #365871;		
	border-bottom-color: var(--akzentFarbe);
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
.button:hover {	
	background-color: var(--buttonHover);	
}
.buttonActive:hover {
	background-color: var(--buttonHover);
}

.beispiel {
	display: inline-block;
	z-index: 2;
	font-family: 'Roboto Condensed Light', 'Roboto Condensed', 'Arial Condensed', sans-serif;
    font-weight: 100;
	font-style: italic;
	font-size: var(--fsSuperSmall);
	background-color: var(--button);
	margin: 0.5rem 0 0 0;
	padding: 0.4rem 0.6rem 0.4rem 0.6rem;	
}


@media (max-width: 75em) {	
	
}

@media (max-width: 47.5em) {
	body { font-size: var(--fsNormalMobile); }
	.big, .bigN { font-size: var(--fsBigMobile); }
	.einheit, .note { font-size: var(--fsMiddleMobile); }
	.beispiel { font-size: var(--fsSmallMobile); }
}





/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Logo und Meta   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

#header {	
	margin-bottom: 1.75em;	
}
#logo_und_meta {
	display: flex;
	justify-content: space-between;	
	color: #ffffff;
	background-color: var(--akzentFarbe);
	padding: 0.2em 0.25em 0.16em 0.225em;
}
#Logo {
	width: 11.25rem;
	height: auto;
	background-color: var(--button);
	padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}
#Logo img {
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}
#metanavigation {	
	display: flex;
	justify-content: flex-end;
	align-items: center;	
}
#meta_mobil { display: none; }
ul#meta {
	margin: 0;
	list-style: none;
}
#meta {
	display: flex;
	justify-content: flex-end;
}
#meta li {	
	padding-right: 1.5rem;
}

#lang_switch {
	width: 6.5rem;
	padding-right: 0.75rem;
}
.sprachen_auswahl, .sprachen_auswahl_open {
	background-color: var(--akzentFarbe);
	color: #ffffff;	
	cursor: pointer;
	background-image: url(../graphbase/icons/select_arrow_hell.svg);
	background-position: 99% 60%;
	background-repeat: no-repeat;
	background-size: 0.7em;
	text-align: right;	
	padding: 0 1.25rem 0 0.5rem;
}
.sprachen_auswahl_open {
	background-image: url(../graphbase/icons/select_arrow_up_hell.svg);
	background-position: 99% 40%;
}
ul.sprachen {
	margin: 0;
	list-style: none;
}
.sprachen {
	position: absolute;	
	min-width: 6.25rem;
	z-index: 3;
	display: none;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-top: 0;
	background-color: var(--akzentFarbe);	
	color: #ffffff;
	text-align: right;
	padding: 0.25rem 1.7rem 0.75rem 0.85rem;
}
.sprachen_links {
	display: none;
}
.sprachen_links_open {
	display: block;
	width: 5.75rem;
}
.sprachen_links_open li {
	margin-top: 0.425em;
}

@media (max-width: 75em) {
	#header {	
		margin-bottom: 1em;	
	}
	#logo_und_meta {		
		padding: 0.3em;
	}
	
}

@media (max-width: 47.5em) {	
	#header {	
		margin-bottom: 0;	
	}
	#Logo {
		width: 40vw;
		padding: 0.075rem 0.25rem 0.125rem 0.25rem;
	}
	#meta { display: none; }
	#meta_mobil { display: inline; }
	#hamburger {
		display: inline-block;
		cursor: pointer;
	}
	.bar1, .bar2, .bar3 {
		width: 2.175rem;
		height: 0.175rem;
		background-color: var(--textHell);
		margin-top: 0.225rem;
		transition: 0.4s;
	}
	.cross_bar1 {
		transform: rotate(-45deg) translate(-0.25rem, 0.25rem);
	}
	.cross_bar2 {
		opacity: 0;
	}
	.cross_bar3 {
		transform: rotate(45deg) translate(-0.3rem, -0.3rem);
	}	
	
	#lang_switch {
		font-size: var(--fsMiddleMobile);
		width: max-content;
		padding-right: 0;
	}
	.sprachen_auswahl, .sprachen_auswahl_open {
		padding: 0 1.25rem 0 7.5vw;
	}
	.sprachen {
		min-width: inherit;
		width: max-content;
		right: 0;
		padding: 0.25rem 1.55rem 0.75rem 1.25rem;
	}
}






/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Page Title   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
#firstImage {
	background-image: url('/graphbase/hbdesc.jpg');
	background-size: cover;
	border: 0.2rem solid var(--textDunkel);	
}
#shapka_container {
	display: flex;
	background-color: rgb(4, 50, 83, 0.75);
	width: max-content;
	max-width: 98%;
	border-radius: 20%;
	padding: 0.5rem 1.7% 0.5rem 1.7%;
	margin: 0.5rem 0 0.5rem 0.2rem;
}
#shapka {
	font-family: 'aGexpr-PN', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: 3rem;
	font-weight: 400;
	line-height: 0.95;
	align-self: center;
}
#mittelStrich {	
	background-color: var(--textHell);
	width: 0.2rem;
	min-height: 80%;
	margin: 0.75rem 1rem 0.75rem 1rem;
}
#shapkaDescr {
	line-height: 0.95;
	padding: 0 0 0 1.25rem;
}
#shapkaDescr li {
	margin: 0.35rem 0 0.35rem 0;
}
.Detailsuche {
	font-family: 'Roboto Condensed' 'Arial Condensed', sans-serif;
	font-style: italic;
	font-weight: 400;
	text-decoration: underline;
	color: var(--akzentFarbeHe);
	cursor: pointer;
}
.Detailsuche:hover {
	color: var(--akzentFarbe);
}
.Detailsuche:active {
	color: #ff7514;
}

@media (max-width: 75em) {
	#firstImage {
		background-image: url('/graphbase/hbtablet.jpg');
	}
	#shapka_container {		
		padding: 0.5rem 1.7% 0.5rem 1%;
	}			
}

@media (max-width: 47.5em) {	
	#firstImage {
		background-image: url('/graphbase/hbmobil.jpg');
	}
	#shapka_container {
		display: block;
		border-radius: 15%;
		padding: 0.5rem 2% 0.5rem 1.7%;
		margin: 0.5rem 0 0.5rem 0;		
	}	
	#shapka {
		font-size: var(--fsBigMobile);
	}
	#shapkaDescr {		
		margin: 0.5rem 0 0 0.25rem;
	}
}




/*   §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Hauptnavigation   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Autosuche / Modellwahl  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
#Hauptnavigation {
	display: flex;
	position: relative;
	flex-direction: column;
	background-color: #001536;
	padding: 0 0.2rem 0.2rem 0.2rem;
}
#Modellwahl_und_Suche {	
	position: relative;
	display: flex;	
	flex-direction: column;
	justify-content: space-between;
	margin-top: 0;
}

#form_autosuche, #form_modell_auswahl {
	width: 100%;
	background-color: var(--button);	
	padding: 2.25% 1.75% 1.75% 1.75%;
}
#form_autosuche.closed {
	position: absolute;
	visibility: hidden;
}
#form_modell_auswahl.closed {
	position: absolute;
	visibility: hidden;
	top: 0;
}
#form_modell_auswahl.open {
	position: relative;
	visibility: visible;
}
#autosuche_selectboxes, #modellkey_selectboxes {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}
#autosuche_container1, #autosuche_container2, #hallo_Auto_container1, #hallo_Auto_container2 {
	position: relative;
	width: 97%;
}
#autosuche_container1, #hallo_Auto_container1 {
	align-self: flex-start;	
}
#autosuche_container2, #hallo_Auto_container2 {
	align-self: flex-end;	
}
#autosuche_container1 .expanding_box_open, #autosuche_container2 .expanding_box_open,
#Auto1_auswahl.expanding_box_open, #Auto2_auswahl.expanding_box_open {
	width: 100%;
	border-width: 0 0.1875rem 0.1875rem 0.1875rem;
	border-radius: 0 0 0.5rem 0.5rem;
}
#Auto1_auswahl.expanding_box_open label:nth-child(2), #Auto2_auswahl.expanding_box_open label:nth-child(2) {		
	margin-top: 0.45em;
}
.versus {
	font-size: var(--fsSmall);
	padding: 0.05rem;
}
#input_Auto1, #input_Auto2, #hallo_Auto1, #hallo_Auto2 {
	border: 0.1875rem solid var(--textDunkel);
	width: 100%;
	background-color: lightblue;	
	color: var(--textDunkel);
	padding: 0.05rem 0.4rem 0 0.4rem;
}
#input_Auto1:focus, #input_Auto2:focus{
	border: 0.1875rem solid var(--akzentFarbe);	
}
#modellkey_selectboxes .borderNorm {
	border: 0.1875rem solid var(--textDunkel);
}
#modellkey_selectboxes .borderAkz {
	border: 0.1875rem solid var(--akzentFarbe);
}
#modellkey_selectboxes .labelText, #firstModell, #secondModell {
	display: inline-block;
	max-width: 96%;
}
#FzgAusw1, #FzgAusw2 {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: var(--textHell);
	padding: 0.05rem 0.4rem 0 0.4rem;
	box-shadow: 0 0 0 0.1875rem var(--akzentFarbe);
}
.hiddenPoint {
	visibility: hidden;
}

label.resImp {
	display: list-item !important;
}
b {
	color: var(--akzentFarbe);
}
label.resImp:hover b {
	color: var(--textHell);
}
.resImpFlex {
	display: flex;
	align-items: center;
}
label.resImp .radiobox {
	margin: 0 0.5em 0 0.5rem;
}

.placeholder_hell::placeholder {
	color: var(--buttonActive);
}
.placeholder_dunkel::placeholder {
	color: var(--textDunkel);
}

.numMatches, .FahrzeugWahlSchild {
	z-index: 1;
	position: sticky;
	top: 0;
	width: 100%;
	background-color: var(--buttonHover);
	padding: 0.75rem 0 0.75rem 0.25rem;
	margin-bottom: 0.5rem;
}
.numMatches > div, .FahrzeugWahlSchild > div {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 12rem;
	max-width: max-content;
	min-height: 1.75rem;
	max-height: min-content;
	font-size: var(--fsSmall);
	font-style: italic;
	color: var(--textDunkel);
	background-color: var(--cellName);
	opacity: 0.95;
	border: 1px solid rgba( 255, 255, 255, 0.18 );	
	border-radius: 0.3em;
	padding: 0.25em 1em 0.25em 1em;
	margin-left: 0.5rem;
}
.FahrzeugWahlSchild { display: none; }

#DS_container {	
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: flex-end;
	align-items: center;
	font-size: var(--fsSmall);
	background-color: var(--button);
	padding: 0 1.75% 1.75% 1.75%;
	margin: 0;
}
#DS_container.closed {
	z-index: -1;
	position: absolute;
}
#DS_container.open {
	position: relative;
}

#noFinds, #noFinds_mobile {
	flex-basis: 65%;
	color: #00ffff;
	line-height: 1;
	text-align: center;
}

#ajax_counter {
	flex-basis: 20%;
	margin: 0 2% 0 2%;
}
#counter_hauptnavigation {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;	
	background-color: var(--akzentFarbe);
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 7px;
	padding: 0 0.25rem;
}
#counter_hauptnavigation:hover {
	background-color: var(--akzentFarbeDu);
}
#numResults, #numResults_mobile {
	font-family: 'aGexpr-PN', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: 2.5rem;
}
#numResults_mobile {
	font-size: var(--fsBig);
}
#counter_hauptnavigation div:last-child {
	line-height: 0.85;
	margin-left: 3%;
}
#counter_hauptnavigation.closed, .reset.closed {
	transform: scale(0);
	transition: 0.5s ease-out;
}
#counter_hauptnavigation.open, .reset.open {
	height: 2.85rem;
	transform: scale(1);
	transition: 0.25s ease-in;
}

.reset {
	flex-basis: 10%;	
	align-self: center;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: var(--buttonActive);
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 7px;
}
.reset:hover {
	background-color: var(--buttonHover);
}

#Hauptauswahlcontainer {
	z-index: 1;
	display: flex;
	justify-content: space-between;
	margin-top: 0.2rem;
}
#Hauptauswahlcontainer.closed {
	visibility: hidden;
	position: absolute;
}
#Hauptauswahlcontainer.open {
	visibility: visible;	
	position: relative;
}

#form_hauptnavigation {		
/*	border: 1px solid yellow;	*/
	transform: inherit;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;	
}
#form_hauptnavigation fieldset {		
	flex-basis: 16.66666666666667%;
	position: relative;
}

@media (max-width: 75em) {
	#form_autosuche, #form_modell_auswahl {
		padding: 1.5rem 0.75% 1.25rem 0.75%;
	}
	#DS_container {
		padding: 0.25rem 1% 1.5rem 1%;
	}
	#noFinds {
		flex-basis: 47%;
		font-size: var(--fsSmallMobile);
	}
	#ajax_counter {
		flex-basis: 33%;
	}
	.reset {
		flex-basis: 15%;
	}
	#form_hauptnavigation {
		flex-basis: 100%;
	}
	#form_hauptnavigation fieldset {
		flex-basis: 100%;
		display: flex;
		justify-content: space-between;
	}
	.auswahlButton {
		flex-basis: 50%;
	}	
}

@media (max-width: 47.5em) {
	.versus, #DS_container {
		font-size: var(--fsSmallMobile);
	}
	#form_autosuche, #form_modell_auswahl {
		padding: 1rem 0.25% 1rem 0.25%;
	}
	#autosuche_container1, #autosuche_container2, #hallo_Auto_container1, #hallo_Auto_container2 {
		width: 100%;
	}	
	#Auto1_auswahl.expanding_box_open, #Auto2_auswahl.expanding_box_open {		
		position: fixed;
		top: 100%;
		left: 50%;		
		width: 0;		
		max-width: 96vw;		
		height: 0;
		max-height: 90vh;		
		border-width: 0.1875rem;
		border-radius: 0.5rem;
		padding: 0;
		margin: 2.5vh 0 0 2vw;
		box-shadow: 0 0 0 20vh rgba(41, 44, 47, 0.6);
	}
	
	.FahrzeugWahlSchild {
		display: flex;		
		justify-content: center;
		padding: 0.75rem 0 0.75rem 0;
	}
	.FahrzeugWahlSchild > div {
		min-width: 85%;
		max-width: max-content;
		justify-content: space-evenly;
		text-align: center;
		padding: 0.25em 0 0.25em 0;
		margin-left: 0;
	}
	.FahrzeugWahlSchild img {
		width: 2.5rem;
		margin: 0 3vw 0 3vw;
	}
	
	#form_hauptnavigation {
		flex-basis: 100%;
	}	
	#form_hauptnavigation fieldset {
		flex-basis: 100%;
	}
	label.resImp .radiobox, #modellkey_selectboxes .radiobox {
		margin: 0 0.35em 0 0;
	}
	
	#noFinds_mobile {
		position: absolute;
		display: flex;
		justify-content: center;
		bottom: 4.5rem;
		background-color: rgba( 0, 26, 67, 0.85 );
	}
	#noFindsMess {
		width: 96%;
		margin: 0.75rem 0 0.25rem 0;
	}
	#ajax_counter {
		flex-basis: 56%;
		font-size: var(--fsSuperSmallMobile);
	}
	#counter_hauptnavigation div:last-child {
		line-height: 0.95;
	}
	.reset {
		flex-basis: 25%;
	}
}






/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Sichtbare Boxen mit Werten !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.visible_box, .visible_box_open {	
	cursor: pointer;
}

#modellkey_selectboxes .visible_box, #modellkey_selectboxes .visible_box_open {
	position: relative;	
	background-image: url('../graphbase/icons/select_arrow.svg');	
	background-repeat: no-repeat;
	background-size: 0.7em;
}
#modellkey_selectboxes .visible_box {
	background-position: 98.5% 60%;
}
#modellkey_selectboxes .visible_box_open {
	background-image: url('../graphbase/icons/select_arrow_up.svg');
	background-position: 98.5% 50%;	
}

#Hauptauswahlcontainer .visible_box {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 3rem;
	line-height: 0.95;
	padding: 0 0.25rem 0.1rem 0.25rem;
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Ausklappende Checkboxen   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.trenner {
	display: block;
	margin: -0.5rem 0 -0.5rem 0;
}
.expanding_box, .expanding_box_open {
	position: absolute;
	font-size: var(--fsMiddle);
	z-index: 10;	
	opacity: 0.95;
	display: none;
	border: 0.1875rem solid var(--akzentFarbe);
	background-color: #214864;	
	overflow-x: hidden;
	overflow-y: auto;	
}
.expanding_box_open {
	display: block;
	cursor: default;
	width: 150%;
	max-height: 14em;
	border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
	padding: 0.5rem 0 0.5rem 0;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.expanding_box_open label {	
	display: list-item;
	cursor: pointer;
	text-align: left;
	background-color: var(--button);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding: 0.4rem 0 0.25rem 0.25rem;
	margin: -0.6rem 0 -0.6rem 0;
}
.expanding_box_open label:last-child {
	margin-bottom: 0.45em;
}

#autosuche_selectboxes .expanding_box_open {
	padding: 0 0 0.5rem 0;
}
#leistung_auswahl.expanding_box_open, #hubraum_auswahl.expanding_box_open {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}
#antrieb_auswahl label:nth-child(3) {
	background-color: var(--button);
}
#getriebe_auswahl label[for=Manuell] {
	background-color: #556F83;
	margin: -0.5rem 0 -0.5rem 0;
}
#PS_kW_auswahl {
	display: flex;
	justify-content: space-evenly;
}
#PS_kW_auswahl label {	
	margin: 0;
	padding-right: 0.6rem;
}
#PS_kW_auswahl label:hover {
	background-color: var(--button);
}
#hubraum_auswahl > .beispiel, #PS_kW_auswahl {
	margin-top: 1em;
}
#Produktionsjahre_Preis label {
	padding: 0.4rem 0.5rem 0.25rem 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.expanding_box_open > label:first-child {	
	background-color: #556F83;
	margin: 0.4em 0 -0.5rem 0;
}
#modellkey_selectboxes .expanding_box_open > label:first-child {	
	background-color: var(--button);
}
#modellkey_selectboxes .expanding_box_open > label:first-child:hover {	
	background-color: var(--akzentFarbe);
}
#Produktionsstart label:first-child, #Produktionsende label:first-child,
#minPreis label:first-child, #maxPreis label:first-child {
	margin-top: 0.4em;
}
.expanding_box_open label:hover, #getriebe_auswahl label[for=Manuell]:hover {
	background-color: var(--akzentFarbe);
}

.inputsSideBySide {
	display: flex;
	justify-content: center;
	align-items: center;
}
.inputsSideBySide label:nth-child(n) {
	padding: 0.35rem;
	margin: 0;
}
.inputsSideBySide label {
	width: 42.5%;
	display: flex;
	justify-content: center;
	text-align: center;
}
.inputsSideBySide input {
	width: 100%;	
}

.ndash {
	margin: 0 0.25rem 0 0.25rem;
}

.exBox_2rows {
	display: flex;
	justify-content: space-evenly;
	margin-top: 0.75rem;
}
.exBox_2rows label:last-child {
	margin-bottom: 4.5em;
}
.exBox_row {
	flex-basis: 42%;
	max-height: 15.1em;
}
.vonBis {
	background:       
       linear-gradient(225deg, transparent 1.5rem, var(--akzentFarbe) 0) top right,
       linear-gradient(315deg, transparent 1.5rem, var(--akzentFarbe) 0) bottom right;       
    background-size: 100% 50%;
    background-repeat: no-repeat;
	padding: 0 0 0.17rem 0.5rem;
	text-align: left;
}
#Produktionsjahre_Preis .expanding_box_open {
	left: inherit;
	overflow-y: hidden;
	right: -0.075rem;
}
#Produktionsstart, #Produktionsende,
#minPreis, #maxPreis {
	max-height: 13.7em;	
	overflow-y: auto;
}

@media (max-width: 75em) {
	.expanding_box_open {
		left: inherit;
		width: 50%;
		max-height: 14em;
	}
	#Produktionsjahre_Preis .expanding_box_open {
		right: inherit;
	}
}

@media (max-width: 47.5em) {
	.mobile_3Items {
		font-size: var(--fsSmallMobile);
	}
	.expanding_box_open:not(#autosuche_selectboxes .expanding_box_open, #Auto1_auswahl.expanding_box_open, #Auto2_auswahl.expanding_box_open) {	
		position: fixed;
		min-width: 96vw;
		width: 96vw;
		min-height: 90vh;		
		max-height: 90vh;
		top: 0;
		left: 0;
		border-radius: 0.5rem;
		margin: 2.5vh 0 0 2vw;
		box-shadow: 0 0 0 20vh rgba(41, 44, 47, 0.6);
	}	
	.expanding_box_open label {
		font-size: var(--fsBigMobile);
		padding: 0.4rem 0.35em 0.25rem 0.35em;
	}
	.expanding_box_open > label:last-child {
		margin-bottom: 3.45em;
	}	
			
	#autosuche_selectboxes .expanding_box_open label, #modellkey_selectboxes .expanding_box_open label {
		font-size: var(--fsMiddle);
		padding: 0.4rem 0.1em 0.25rem 0.35em;
	}
	#autosuche_selectboxes .expanding_box_open {
		min-height: 92.5vh;		
		max-height: 92.5vh;
		box-shadow: unset;
	}
	#Auto1_auswahl.expanding_box_open label:nth-last-child(2), #Auto2_auswahl.expanding_box_open label:nth-last-child(2) {
		margin-bottom: 3.45em;
	}
	
	.inputsSideBySide label {
		width: 45%;
	}
	#PS_kW_auswahl {
		flex-wrap: wrap;
	}
	#PS_kW_auswahl label {		
		margin-bottom: 0.5rem;
	}
	#Antrieb_Getriebe .expanding_box_open {
		padding-top: 9vh;
	}
	#hubraum_auswahl.expanding_box_open, #leistung_auswahl.expanding_box_open {
		padding-top: 14vh;
	}
	.exBox_2rows {
		margin-top: 7.5vh;
	}
	.vonBis {
		font-size: var(--fsBigMobile);
	}
	#Produktionsjahre_Preis .expanding_box_open {
		left: 0;
	}
	#Produktionsstart, #Produktionsende, #minPreis, #maxPreis {
		max-height: 70vh;
	}	
		
	#ajax_mobile_counter {
		position: fixed;
		z-index: 11 !important;
		flex-wrap: no-wrap;
		justify-content: space-around;
		bottom: 9vh;
		width: 94.25vw;
		line-height: 0.975;		
		text-align: center;
		background-color: rgba( 0, 26, 67, 0.85 );
		margin-left: 2vw;
	}
	#counter_mobile, #Auswahl_fhrz_2, .weitereFilter {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 3.5rem;
		border: 1px solid rgba( 255, 255, 255, 0.3 );
		border-radius: 7px;
		padding: 0 0.25rem;
		margin: 1rem 0 1rem 0;
	}
	#counter_mobile, #Auswahl_fhrz_2 {
		flex-basis: 57.5%;
		color: var(--textHell);
		background-color: var(--akzentFarbe);		
	}
	.weitereFilter {
		flex-basis: 33%;
		justify-content: space-evenly;
		font-size: 0.9em;
		color: var(--textDunkel);
		background-color: var(--cellName);
	}
	.weitereFilter img {		
		width: 1.35rem;
		margin-top: 0.1rem;
	}
	#counter_mobile .small {
		font-size: 0.9em;
		text-align: center;
		margin-left: 0.5rem;
	}	
	
	@media (orientation: landscape) {
		.expanding_box_open {
			box-shadow: 0 0 0 5vw rgba(41, 44, 47, 0.6);
		}
		.inputsSideBySide label {
			width: 25%;
		}
		#ajax_mobile_counter {
			bottom: 9vh;			
		}
		#leistung_auswahl > #ajax_mobile_counter, #hubraum_auswahl  > #ajax_mobile_counter {
			bottom: 9vh;
		}
	}
}




/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Animations   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.animLoading_A span {
  display: inline-block;
  background-color: var(--textHell);
  border-radius: 5%;
  width: 0.75rem;
  height: 1.5rem;
  margin: 0.375rem 0.3rem 0.35rem 0;
  animation-name: Loading_A;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.animLoading_A span:last-child {  
  margin-right: 0;
}

.animLoading_A span:nth-child(2) {
  animation-delay: 0.1s;
}

.animLoading_A span:nth-child(3) {
  animation-delay: 0.2s;
}

.animLoading_A span:nth-child(4) {
  animation-delay: 0.3s;
}

.animLoading_A span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes Loading_A {
  0% {
    background-color: rgba(0,40,105, 0.2);
  }

  20% {
    background-color: rgba(252, 248, 244, 1);
    transform: scale(1.2);
  }

  100% {
    background-color: rgba(0,40,105, 0.2);
  }
}

.blinking {
    animation: blink 1.333s infinite;
}
@keyframes blink {
    0% { color: #fff; }   
	54%{ color: #00ffff; }
	59%{ color: magenta; }
    60%{ color: transparent; }
    100%{ color: transparent; }
}

.lightUp {
    animation: lightUp 0.333s;
}
@keyframes lightUp {
    0% { color: #fff; }
	50%{ color: var(--akzentFarbe); }
    100%{ color: var(textDunkel); }
}

.flashUp {
    animation: flashUp 0.333s;
}
@keyframes flashUp {
    0% { background-color: #fff; }
	50%{ background-color: var(--akzentFarbe); }
    100%{ background-color: var(textDunkel); }
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Main und Nav   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
#ajax_main_loader {
	width: 100%;
}
#main_und_nav {
	display: flex;
	width: 100%;
}
#main {
	order: 2;
	width: 100%;
}
#sidebar {
	order: 1;
	display: block;
	width: 24%;
	min-width: 18.75rem;
	margin-right: 2.25%;
	overflow: hidden;
	background-color: var(--textHell);
	color: var(--textDunkel);
}
.modellBox_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.modellBox, .randomModellBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
	background-color: var(--akzentFarbe);
	overflow: hidden;	
	margin: 0.5rem 0 1rem 0;
}
.randomModellBox { flex-basis: 32%; }
.randomModellLink { display: flex; }
.modellBox a, .randomModellBox a { width: 100%; }
.modellBox:hover .boxModellText1, .modellBox:hover .boxModellText2, 
.randomModellBox:hover .boxModellText1, .randomModellBox:hover .boxModellText2  {
	color: var(--akzentFarbe);
	text-decoration: underline;
}
.boxModell1, .boxModell2, .randomBoxModell1, .randomBoxModell2 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	font-size: 0.8125rem;
	border-width: 0.25rem 0 0.25rem 0;
	border-color: var(--akzentFarbe);	
	background:       
		linear-gradient(225deg, transparent 18%, var(--cellName) 0) top right,
		linear-gradient(315deg, transparent 18%, #FEFCFB 0) bottom right;       
	background-size: 100% 50.25%;
	background-repeat: no-repeat;
}
.randomBoxModell1, .randomBoxModell2 {
	flex-basis: 50%;
	background:       
		linear-gradient(225deg, transparent 20%, var(--cellName) 0) top right,
		linear-gradient(315deg, transparent 20%, #FEFCFB 0) bottom right;
	background-size: 100% 50.25%;
	background-repeat: no-repeat;
}
.boxModell2, .randomBoxModell2 { 
	align-items: flex-end;
	text-align: right;	
	background:       
		linear-gradient(-225deg, transparent 18%, var(--cellName) 0) top left,
		linear-gradient(45deg, transparent 18%, #FEFCFB 0) bottom left;
	background-size: 100% 50.25%;
    background-repeat: no-repeat;
}
.randomBoxModell2 {
	background:       
		linear-gradient(-225deg, transparent 20%, var(--cellName) 0) top left,
		linear-gradient(45deg, transparent 20%, #FEFCFB 0) bottom left;
	background-size: 100% 50.25%;
    background-repeat: no-repeat;
}
.boxModellPic1, .boxModellPic2 {
	height: 3.5rem;
    object-fit: cover;
    object-position: top right;
	padding: 0.25rem 0 0 0;
	margin: 0 0 0 0.25rem;
}
.boxModellPic2 {
	transform: scaleX(-1);
	margin: 0 0.25rem 0 0;
}
.boxModellText1, .boxModellText2 {
	flex-grow: 1;
	display: flex;
	align-items: center;
	max-width: 80%;	
	color: var(--textDunkel);
	font-size: 0.875rem;	
	line-height: 1;
	padding: 0.35rem 5% 0.1rem 2.5%;
}
.boxModellText2 {
	padding: 0.35rem 2.5% 0.1rem 5%;
	justify-content: flex-end;
}


@media (max-width: 75em) {		
	#main_und_nav {
		flex-wrap: wrap;
	}
	#sidebar { display: none; }
	#mobile_nav {
		order: 3;
		display: block;
	}
	.modellBox, .randomModellBox {		
		flex-basis: 49%;		
	}
	.modellLink { display: flex; }
	.boxModell1, .boxModell2, .randomBoxModell1, .randomBoxModell2 {
		flex-basis: 50%;		
		background:       
			linear-gradient(225deg, transparent 23%, var(--cellName) 0) top right,
			linear-gradient(315deg, transparent 23%, #FEFCFB 0) bottom right;       
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
	}
	.boxModell2, .randomBoxModell2 { 
		align-items: flex-end;
		text-align: right;	
		background:       
			linear-gradient(-225deg, transparent 23%, var(--cellName) 0) top left,
			linear-gradient(45deg, transparent 23%, #FEFCFB 0) bottom left;
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
	}
	.boxModellPic1, .boxModellPic2 {
		min-height: 4rem;
		max-width: 82%;
		margin: 0;
	}
	.boxModellText1, .boxModellText2 {
		font-size: var(--fsSuperSmall);
		width: 100%;
		max-width: 100%;
		min-height: 4.05rem;
		background-color: #FEFCFB;
		opacity: 0.75;
	}
}

@media (max-width: 47.5em) {
	#mobile_nav {
		width: 100%;
	}
	.modellBox, .randomModellBox {
		flex-basis: 100%;
	}
	.boxModell1, .boxModell2, .randomBoxModell1, .randomBoxModell2 {
		background:       
			linear-gradient(225deg, transparent 22%, var(--cellName) 0) top right,
			linear-gradient(315deg, transparent 22%, #FEFCFB 0) bottom right;       
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
	}
	.boxModell2, .randomBoxModell2 {
		background:       
			linear-gradient(-225deg, transparent 22%, var(--cellName) 0) top left,
			linear-gradient(45deg, transparent 22%, #FEFCFB 0) bottom left;
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
	}
	.boxModellPic1, .boxModellPic2 {
		min-height: 3.5rem;
		max-width: 76%;
	}
	.boxModellText1, .boxModellText2 {
		min-height: 3.5375rem;
	}
}



/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   mainBild Header   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
h1 {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	color: #ffffff;
	background-color: var(--button);
}
h1 span:first-child, h1 span:last-child {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--fsMiddle);
	line-height: 1;
	width: 48.25%;
	margin: 0.4rem 0 0.4rem 0;
}
h1 span:first-child {
	background:       
       linear-gradient(225deg, transparent 1.5rem, var(--akzentFarbe) 0) top right,
       linear-gradient(315deg, transparent 1.5rem, var(--akzentFarbe) 0) bottom right;       
    background-size: 100% 50.5%;
    background-repeat: no-repeat;
	padding: 0.4rem 2rem 0.4rem 0.5rem;
}
h1 span:last-child {
	background:       
       linear-gradient(-225deg, transparent 1.5rem, var(--akzentFarbe) 0) top left,
       linear-gradient(45deg, transparent 1.5rem, var(--akzentFarbe) 0) bottom left;       
    background-size: 100% 50.5%;
    background-repeat: no-repeat;
	padding: 0.4rem 0.5rem 0.4rem 2rem;
}
h1 span:nth-child(2) {
	align-self: center;
	text-transform: lowercase;
	font-family: 'Roboto', 'Arial', sans-serif;
	font-weight: 400;
	font-style: italic;
	padding: 0.05rem 0 0.2rem 0;
}

#MainBild {
	position: relative;
	display: flex;
	justify-content: space-between;	
	background-color: var(--cellName);
}
#MainBild picture {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 48.75%;
}
#MainBild img {
	padding: 12% 1.25% 4% 1.25%;
}
#Preis {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background-color: var(--button);
	padding: 0.25rem 0 0.25rem 0;
}

@media (max-width: 47.5em) {
	#h1_header {
		background-color: var(--textHell);
		padding-top: 1rem;
	}
	#h1_header p {
		font-family: 'aGexpr-PNBold', 'Roboto Condensed', 'Arial Condensed', sans-serif;
		font-size: var(--fsBigMobile);
		font-weight: 700;
		line-height: 1;
		color: var(--button);
		padding: 0.75rem 0 0.5rem 0;
		margin-left: 0.65rem;
	}	
	h1 {
		display: inline-block;
		font-family: 'Roboto', 'Arial', sans-serif;		
		text-align: left;
		background-color: var(--textHell);
		color: var(--textDunkel);		
		border-left: 0.5rem solid var(--akzentFarbe);
		padding: 0 0.5rem 0 0.65rem;
		margin: 0 0 0.75rem 0.75rem;
	}
	h1 span:first-child, h1 span:nth-child(2), h1 span:last-child {
		all: unset;
	}	
	
	#MainBild {
		flex-direction: column;
	}	
	#MainBild picture {
		align-self: center;
		width: 96%;
		padding-top: 2.5rem;
	}
	#MainBild img {
		padding: 0 1.25% 3% 1.25%;
	}
	#MainBild picture:nth-child(2) > img {
		align-self: flex-start;
	}
	#MainBild picture:nth-child(4) > img {
		align-self: flex-end;
	}	
	#MainBild span:nth-child(3), #MainBild span:last-child {
		text-align: center;	
		line-height: 1;
	}
	#MainBild span:nth-child(3) {
		position: relative;
		background:       
		   linear-gradient(225deg, transparent 1.5rem, var(--akzentFarbe) 0) top right,
		   linear-gradient(315deg, transparent 1.5rem, var(--akzentFarbe) 0) bottom right;       
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
		padding: 0.2rem 2rem 0.2rem 0.5rem;
	}
	#MainBild span:last-child {		
		background:       
		   linear-gradient(-225deg, transparent 1.5rem, var(--akzentFarbe) 0) top left,
		   linear-gradient(45deg, transparent 1.5rem, var(--akzentFarbe) 0) bottom left;       
		background-size: 100% 50.25%;
		background-repeat: no-repeat;
		padding: 0.2rem 0.5rem 0.2rem 2rem;
		margin-bottom: -0.778125rem;
	}
	
	#Preis {
		display: none;
	}
	.preis {		
		font-size: var(--fsMiddle);
	}
	#MainBild > .preis:first-child {
		top: 0.9875rem;
		right: 2%;
	}
	#MainBild span:nth-child(3) > .preis {
		bottom: -2.75rem;
		left: 2%;
	}	
	#preisInfo {
		position: absolute;
		right: 0.75rem;
		font-family: 'Roboto Condensed Light', 'Roboto Condensed', 'Arial Condensed', sans-serif;
		font-size: var(--fsSmallMobile);
		font-weight: 100;
		font-style: italic;
		color: var(--textDunkel);
		margin-top: 1rem;
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Section   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
article {
	background-color: var(--textDunkel);
	padding-bottom: 0.01%;
}
article > section:nth-child(2) > .section_text {
	padding: 0 0 0.75rem 0.5rem;
}
.headline {	
	display: flex;
	align-items: flex-start;
	background-color: var(--textHell);
	padding: 5rem 0.25rem 0.5rem 0.5rem;
}
.headline > img {	
	width: 2.25rem;
	height: 2.25rem;
	padding: 0 0 0.125rem 0.25rem;
}
#ajax_main_loader + .headline, #sidebar > .headline {	
	padding: 1rem 0.25rem 0.5rem 0.5rem;
}
#ajax_main_loader + .headline {
	margin-top: 1.5rem;
}
h2, h3 {
	font-family: 'aGexpr-PNBold', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: var(--fsBig);
	font-weight: 700;
	color: var(--button);
	line-height: 1;
	margin-left: 0.65rem;
}
.section_text {
	font-family: 'Roboto', 'Arial', sans-serif;
	color: var(--textDunkel);	
	background-color: var(--textHell);
}
.section_text > div {
	border-left: 0.5rem solid var(--akzentFarbe);
	padding: 0 0.5rem 0 0.65rem;	
}

.cellsRow, .oneRowMobil, .cellsUeberRow {	
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--textHell);
	background-color: var(--button);	
	padding: 1.5rem 0 1.5rem 0;
	margin: 0 3% -0.05rem 3%;
}
.cellsUeberRow {
	justify-content: center;
	margin: 0 3% -1rem 3%;
}
.cellsRowLeer {
	display: flex;
	margin-bottom: -0.05rem;
}

.Lcell, .Rcell {
	position: relative;	
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	text-align: right;
	width: 41.5%;
	padding: 0 2.5rem 0 0.5rem;	
}
.Rcell {
	justify-content: flex-start;
	text-align: left;
	padding: 0 0.5rem 0 2.5rem;	
}
.Lcell_2Elem, .Rcell_2Elem {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: right;
	width: 41.5%;
	padding: 0 2.5rem 0 0;	
}
.Rcell_2Elem {
	text-align: left;
	padding: 0 0 0 2.5rem;	
}

.columnCell {
	flex-direction: column;
	align-items: flex-start;
}
.Lcell.columnCell {
	align-items: flex-end;
}

.Mcell, .McellUeber {
	display: flex;
	justify-content: center;
	text-align: center;	
	text-transform: uppercase;
	font-size: 1.0625rem;
	line-height: 1;
	width: 17%;
	height: min-content;
	border: 0.1rem solid var(--textHell);
	padding: 0.2rem 0.25rem 0.2rem 0.25rem;
}
.McellUeber {
	width: max-content;
	min-width: 33.333%;
	background-color: #013953;
	padding: 0.2rem 0.75rem 0.2rem 0.75rem;
}
.Mcell_leer {
	width: 17%;
}

.nameRow {
	background-color: var(--textDunkel);
}
.cell_Name {	
	align-self: stretch;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--textDunkel);
	font-size: var(--fsSmall);
	line-height: 1;
	text-align: center;
	background-color: var(--cellName);
	max-width: 43%;	
	border-radius: 0.125rem;
	padding: 0.35rem 0.25rem 0.35rem 0.25rem;
}

.diagramm_container {	
	font-family: 'Roboto Condensed Light', 'Roboto Condensed', 'Arial Condensed', sans-serif;
    font-style: italic;
	font-weight: 100;
	font-size: var(--fsSuperSmall);
	background-color:  var(--button);
	border-radius: 0.175rem;
	padding: 0.5rem 1% 1.75rem 3.25%;
	margin: 0 3% -0.05rem 3%;
}
.BalgenDiagramm {	
	display: flex;
	align-items: center;
}
.diagrammBalgen {
	height: 0.5rem;
/*	max-width: 91%;*/
	border-top-right-radius: 0.2rem;
	border-bottom-right-radius: 0.2rem;
	margin-right: 0.35rem;
}
.diagrammName {
	font-style: italic;
	margin: -0.1rem 0 -0.1rem 0.25rem;
}

.numberOverlay {
	z-index: 2;
	position: absolute;	
	background-color: rgb(4, 50, 83, 0.75);
	border-radius: 28%;
	padding: 0.1rem 0.75rem 0.1rem 0.75rem;
}
.numberOverlayL, .numberOverlayR {
	z-index: 2;
	position: relative;	
	left: 1.25rem;
	background-color: rgb(4, 50, 83, 0.75);
	border-radius: 20%;
	padding: 0 1.25rem 0 1.25rem;
}
.numberOverlayR {
	left: -1.25rem;
}

.cell_first { padding-top: 3.5%; }
.cell_last, .cell_between { padding-bottom: 3.5%; margin-bottom: 3%; }
.cell_first_IMG { padding-top: 5%; }
.cell_last_IMG { padding-bottom: 5%; }


@media (max-width: 75em) {	
	.headline {	
		padding: 3rem 0.25rem 0.5rem 0.5rem;
	}	
	#ajax_main_loader + .headline {
		padding: 3rem 0.25rem 0.5rem 0.5rem;
		margin-top: 0;
	}
	.section_text {
		padding: 1.25rem 0 0 0;
	}
	.section_text > div {
		margin-left: 0.25rem;
	}
	
	.Lcell, .Rcell, .Lcell_2Elem, .Rcell_2Elem {
		width: 40.5%;
	}
	.Lcell, .Rcell {
		flex-wrap: wrap;
	}
	.Mcell, .Mcell_leer {
		width: 19%;
	}
	.diagramm_container {
		padding: 0.25rem 1% 1.75rem 3.25%;
	}		
}

@media (max-width: 47.5em) {
	#h1_header + section > .headline {
		padding: 3.778125rem 0.25rem 0.5rem 0.5rem;
	}
	.headline > img {	
		width: 1.825rem;
		height: 1.825rem;
	}
	h2, h3 {
		font-size: var(--fsBigMobile);
	}
	.cellsRow {
		flex-wrap: wrap;
		margin: 0 1% -0.05rem 1%;
	}	
	.cellsUeberRow {
		margin: 0 1% -1rem 1%;
	}	
	.Lcell, .Rcell {
		justify-content: center;
		width: 48%;
		padding: 0;
	}
	.Lcell.mtc, .Rcell.mtc {
		width: 43%;
	}
	.columnCell {
		align-items: inherit;
	}
	.Lcell.columnCell {
		align-items: inherit;
	}
	.Lcell_2Elem, .Rcell_2Elem {
		flex-flow: column wrap;
		align-content: center;
		align-self: stretch;
		width: 43%;
		padding: 0;
	}
	.Mcell, .McellUeber {
		order: -1;
		width: 100%;
		position: relative;
		font-size: var(--fsSmallMobile);
		top: -0.5rem;
		border: 0;
		padding: 0;
		margin-bottom: 0.2rem;
	}	
	.Mcell > span, .McellUeber > span {
		border: 0.1rem solid var(--textHell);
		padding: 0.2rem 0.75rem 0.125rem 0.75rem;
	}
	.McellUeber > span {
		min-width: 55%;
		margin-bottom: -1rem;
	}	
	
	.cellsRow.nameRow {
		padding: 0.625rem 0 0.625rem 0;
	}
	.nameRow {
		z-index: 5;
		position: sticky;
		top: 0;
		opacity: 0.95;
	}
	.cell_Name {
		font-size: var(--fsSmallMobile);
		max-width: 46%;
		border-radius: 0.125rem;
		padding: 0.25rem 0.2rem 0.35rem 0.2rem;
		margin: 0 1% 0 1%;
	}

	.oneRowMobil {
		padding: 0.75rem 0 1.25rem 0;
		margin: 0 1% -0.05rem 1%;
	}
	.oneRowMobil > .Lcell, .oneRowMobil > .Rcell {
		max-width: 33%;
	}
	.oneRowMobil > .Mcell {
		order: 0;
		width: min-content;
		top: 0;
		margin-bottom: 0;
	}
	.oneRowMobil > .Mcell > span {
		width: min-content;
		padding: 0.2rem 0.75rem 0.125rem 0.75rem;
	}		
	
	.diagramm_container {
		padding: 0.25rem 1% 1.5rem 3.25%;
		margin: -0.75rem 1% -0.05rem 1%;
	}
	.numberOverlayL, .numberOverlayR {
		left: 0;
		border-radius: 20%;
		padding: 0 0.5rem 0 0.5rem;
	}
	.cell_first, .cell_first_mobil { padding-top: 1.75rem; }
	.cell_last {
		padding-bottom: 1.5rem;
		margin-bottom: 1%;
	}
	.cell_between { margin-bottom: 3%; }
}




/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Abmessungen    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */

#blueprints_Hoehe, #blueprints_Laenge {
	position: relative;
	display: flex;
	justify-content: space-around;
	padding-bottom: 5rem;
}
#blueprints_Laenge {
	justify-content: space-between;
}
#blueprintFront_L, #blueprintFront_R, #blueprintSide_L, #blueprintSide_R {
/*	border: 1px solid yellow;	*/
	position: relative;
	width: 35%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;	
}
#blueprintSide_L {
	width: 44%;
	right: inherit;
	left: 4%;
}
#blueprintSide_R {
	width: 44%;
	left: inherit;
	right: 4%;
}

.blueprint {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.line_horizontal_hoehe_LO, .line_horizontal_hoehe_RO, .line_horizontal_hoehe_LU, .line_horizontal_hoehe_RU {
	position: relative;	
	align-self: flex-start;
	width: 30%;
	padding: 0.025rem;	
	background-color: #ffffff;
}
.line_horizontal_hoehe_LU {
	width: 15%;
	top: -0.05rem;
}
.line_horizontal_hoehe_RO {
	align-self: flex-end;
}
.line_horizontal_hoehe_RU {
	width: 15%;
	align-self: flex-end;
	top: -0.05rem;
}
#line_höhe_left, #line_höhe_right {
	position: relative;
	align-self: stretch;
	right: 5.5%;
	background-color: #ffffff;
	padding: 0.025rem;
}
#line_höhe_right {
	right: -5.5%;	
}
.höhe_text {
	transform: rotate(270deg);
	position: relative;	
	top: 50%;
	align-self: center;
	background-color: var(--textDunkel);
	z-index: 2;
	padding: 0 3px 0 3px;
}
.line_vertical_breite_spiegel {
	position: relative;
	top: 2.76rem;	
	height: 105%;	
	background-color: #ffffff;
	padding: 0.025rem;
}

.line_vertical_länge, .line_vertical_länge_front {
	position: relative;
	top: 2.76rem;	
	height: 5.1rem;	
	background-color: #ffffff;
	padding: 0.025rem;	
}
.line_vertical_länge_front {
	top: 2.76rem;	
	height: 4.1rem;
}
.line_vertical_radstand {
	position: relative;
	top: 1.2rem;	
	height: 1.1rem;	
	background-color: #ffffff;
	padding: 0.025rem;
}

.line_länge {	
	position: relative;
	top: 2.5rem;
	align-self: center;
	padding: 0.025rem;	
	background-color: #ffffff;
}
.line_länge:before, .line_länge:after, #line_höhe_left:before, #line_höhe_right:before, #line_höhe_left:after, #line_höhe_right:after {
    content: "";
    display: block;
    position: absolute;
    border: 0 solid transparent;
}
.line_länge:before {
    top: -0.09375rem;
    left: 0;
	border-right-color: #ffffff;
    border-width: 0.125rem 0.65rem 0.125rem 0;	
    border-left: 0;
}
.line_länge:after {
    top: -0.09375rem;
    right: 0;
    border-left-color: #ffffff;
    border-width: 0.125rem 0 0.125rem 0.65rem;
	border-right: 0;
}
#line_höhe_left:before, #line_höhe_right:before {
    top: 0.3rem;
    left: -0.3rem;
	border-right-color: #ffffff;
    border-width: 0.125rem 0.65rem 0.125rem 0;	
    border-left: 0;
	transform: rotate(90deg);
}
#line_höhe_left:after, #line_höhe_right:after {
    bottom: 0.3rem;
    right: -0.3rem;
    border-left-color: #ffffff;
    border-width: 0.125rem 0 0.125rem 0.65rem;
	border-right: 0;
	transform: rotate(90deg);
}

.länge_text {
	position: absolute;	
	margin-bottom: -3.1rem;
	align-self: center;
	background-color: var(--textDunkel);
	z-index: 2;
	padding: 0 3px 0 3px;
}

.line_radstand {
	align-self: flex-start;
	top: 1rem;
}
.line_breite {	
	top: 1rem;
}
#blueprintSide_L .line_radstand {
	align-self: flex-end;
}
.radstand_text {
	margin-bottom: -1.6rem;
}


@media (max-width: 47.5em) {
	#blueprintFront_L {		
		width: 55%;
		margin-right: -5%;
	}
	#blueprintFront_R {
		width: 55%;
		margin-left: -5%;
	}
	
	#blueprints_Laenge {
		flex-direction: column;
		align-items: center;
	}
	#blueprintSide_L, #blueprintSide_R {
		left: 0;
		right: 0;		
		width: 92%;
	}
	#blueprintSide_R {		
		padding-top: 4.5rem;
	}	
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Gewicht   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */

#scale_box {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 24.75rem;
}
#scales {
	display: flex;
	justify-content: center;
}
#scale_basis {
	width: 98%;
	height: 0.5rem;
	align-self: center;
	background-color: var(--textHell);
	margin-bottom: 0.5rem;
}
.scale_sides {
	position: relative;
	top: 0.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;	
	align-self: flex-end;
	width: 40%;
	height: 15rem;
	padding: 0 0.2rem 0 0.2rem;
}
#scale_middle {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 20%;
}
#scale_middle:nth-child(n) {
	position: relative;
	top: 0.2rem;
}

#scale_screen {
	width: 118%;	
	align-self: center;
	text-align: center;
	background-color: #808080;
	padding: 0.5rem;
	z-index: 3;
}
.scale_display {
	color: var(--textDunkel);
	background-color: #00ffff;
	margin: 0.25rem;
	padding: 0.25rem;
}
#screen_bar {
	width: 0.5rem;
	height: 12.5rem;
	align-self: center;
	background-color: #a9a9a9;
}
#screen_builddown {
	width: 30%;
	min-height: 0.15rem;
	align-self: center;
	background-color: #858585;
	border-radius: 0 0 0.25rem 0.25rem;
}
#screen_buildup {
	width: 12%;
	min-height: 0.35rem;
	align-self: center;
	background-color: #a9a9a9;
	border-radius: 0.25rem 0.25rem 0 0;
}

.scale_car_container {
	display: flex;	
	justify-content: center;
	align-self: center;
	width: 85%;
}
.scale_car_container img {
	position: relative;
	top: 0.65rem;
	z-index: 2;
	filter: drop-shadow(0 -35px 40px rgba(0, 255, 255, 0.45));
}
.scale_plattform_buildup {
	position: relative;
	width: 98%;
	min-height: 0.85rem;
	align-self: center;
	background-color: var(--textHell);
	z-index: 1;
}
.scale_plattform_buildup:before {
	content: "";
	position: absolute;
	left: 0;
	border-style: solid;
	border-width: 0.75rem 1.125rem 0 0;
	border-color: var(--textDunkel) var(--textHell) var(--textHell) var(--textHell);
	z-index: 1;
}
.scale_plattform_buildup:after {
	content: "";
	position: absolute;	
	right: 0;
	border-style: solid;
	border-width: 0 1.125rem 0.75rem 0;
	border-color: var(--textHell) var(--textDunkel) var(--textHell) var(--textHell);
	z-index: 1;
}
.scale_plattform {
	width: 98%;
	min-height: 0.5rem;
	align-self: center;
	background-color: #808080;
	z-index: 1;
}
.scale_plattform_builddown {
	width: 40%;
	min-height: 0.15rem;
	align-self: center;
	background-color: #858585;
	border-radius: 0 0 0.25rem 0.25rem;
	z-index: 1;
}
#scale_bar1, #scale_bar2 {
	width: 7.5%;	
	align-self: center;
	background-color: #a9a9a9;		
}
.scale_buildup {
	width: 16%;
	min-height: 0.35rem;
	align-self: center;
	background-color: #a9a9a9;
	border-radius: 0.25rem 0.25rem 0 0;
}

@media (max-width: 75em) {	
	#scale_box {
		height: 23.25rem;
	}
	.scale_sides {		
		height: 15rem;		
	}	
	#screen_bar {
		height: 11rem;
	}
}

@media (max-width: 47.5em) {
	#scale_box {
		height: 36vh;
	}
	.scale_sides {
		width: 47.5%;
		height: 55%;
		padding: 0 0.2rem 0 0.2rem;
	}	
	.scale_plattform {
		min-height: 0.3rem;
	}
	.scale_plattform_builddown {
		min-height: 0.1rem;
	}
	.scale_buildup {
		min-height: 0.25rem;
	}
	#scale_middle {
		width: 5%;
		height: 33vh;
		justify-content: flex-start;
	}
	#scale_screen {
		width: 1500%;
		padding: 12%;
		z-index: 0;
	}
	#scale_display_container {
		display: flex;
	}	
	.scale_display {
		flex-grow: 1;
		margin: 0.25rem;
		padding: 0.1rem;
	}
	#screen_bar {
		display: none;
		width: 0.33rem;
		height: 8rem;
	}
	#screen_builddown, #screen_buildup {
		display: none;
	}
	#scale_basis {
		height: 0.3rem;
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Drivetrain !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.Lcell_2Elem > .drivetrain, .Rcell_2Elem > .drivetrain {
	background-color: var(--textDunkel);
	padding: 0.5rem 1rem 0.5rem 1rem;
}
.Lcell_2Elem > .drivetrain {
	margin: 0 1rem 0 3rem;
}
.Rcell_2Elem > .drivetrain {
	margin: 0 3rem 0 1rem;
}
.drivetrain img {
	width: 4rem;
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 75em) {
	.Lcell_2Elem > .drivetrain {
		margin: 0 0.75rem 0 1.5rem;
	}
	.Rcell_2Elem > .drivetrain {
		margin: 0 1.5rem 0 0.75rem;
	}
	.drivetrain img {
		width: 3.5rem;
	}
}

@media (max-width: 47.5em) {
	.Lcell_2Elem > .drivetrain, .Rcell_2Elem > .drivetrain {
		padding: 0 1.5rem 0 1.5rem;
	}
	.Lcell_2Elem > .drivetrain {
		order: 2;
		margin: 0.5rem 0 0 0;
	}
	.Rcell_2Elem > .drivetrain {
		margin: 0.5rem 0 0 0;
	}
	.drivetrain img {
		width: 2.85rem;
		transform: rotate(-90deg);
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Motor   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */

.engineIMG img {	
	position: absolute;
	top: -0.5rem;
	max-height: 14.25rem;
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.45));	
}
.Lcell.engineIMG img {
	left: 10%;
}
.Rcell.engineIMG img {
	right: 10%;
}

.rpm {
	font-family: 'aGexpr-PN', 'Roboto Condensed', 'Arial Condensed', sans-serif;
	font-size: var(--fsSuperSmall);
}

@media (max-width: 75em) {
	.engineIMG img {
		top: -0.25rem;
		max-height: 25vw;
	}	
}
@media (max-width: 47.5em) {	
	#engIMGcell {
		background-color: var(--button);
		padding: 0.75rem 0 0.75rem 0;
		margin: 0 1% -0.05rem 1%;
	}
	.engineIMG img {
		position: relative;
		max-height: 33vw;
	}
	.Lcell.engineIMG img {		
		left: 5%;
	}
	.Rcell.engineIMG img {		
		right: 5%;
	}	
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Tachometer   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.gauge {
    position: relative;
    border-radius: 50%/100% 100% 0 0;
    background-color: var(--color, #a22);
    overflow: hidden;
	width: 80%;
}
.gauge:before{
    content: "";
    display: block;
    padding-top: 50%;   /* ratio of 2:1*/
}
.gauge .chart {
	overflow: hidden;
}
.gauge .mask {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 0;
	top: 24%;
	background-color: var(--button);
	border-radius: 50%/100% 100% 0 0;
}

.gauge .percentage {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: 0;
    right: -1px;
    background-color: var(--textHell);
    transform: rotate(var(--rotation)); 
    transform-origin: bottom center; 
    transition-duration: 600;
}
/*
.gauge .percentage:hover {
  --rotation: 100deg;
}
*/
.gauge .value {
	position: absolute;
	bottom: 0%;
	left: 0;   
	width: 100%; 
	text-align: center;
	text-shadow: 0 0 1px var(--textDunkel);
}

.gauge .min {
	position:absolute; 
	bottom: 0;
	left: 5%;   
}
.gauge .max {
	position:absolute; 
	bottom: 0;
	right: 5%;   
}


@media (max-width: 47.5em) {	
	.gauge {
		width: 92%;
	}
}






/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   0-100 Beschleunigung   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
#container_0100 {
	padding: 0.75rem 1% 0.75rem 1%;
}
.cell_0100 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 7.25rem;	
}
.cell_0100 .einheit {
	position: absolute;
	left: 0; 
	right: 0;
	text-align: center;
	width: 6rem;
	bottom: 107.5%;
}
#dist0100_container1, #dist0100_container2 {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, 0);
	bottom: 0.5rem;
	text-align: center;
	opacity: 0;
}
.kmh0100 {
	display: inline-block;
	position: relative;
	width: max-content;
	top: 0.5rem;
}
.markDist0100 {
	display: inline-block;
	position: relative;
	z-index: 2;	
	bottom: -0.25rem;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 5px 0.5rem 5px;
	border-color: transparent transparent var(--akzentFarbe) transparent;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1));
}
.dist0100 {
	position: relative;
	top: 0.2rem;
}
#auto1_0100, #auto2_0100 {
	position: relative;	
	z-index: 3;
	width: 6rem;	
	bottom: -0.2rem;
	filter: drop-shadow(-16px -4px 15px rgba(0, 255, 255, 0.35));	
}
.street_0100 {	
	height: 0.5rem;
	background-color: #808080;
}
#diagramm0100_1, #diagramm0100_2 {
	position: relative;
	bottom: 0.5rem;
	height: 0.5rem;
	opacity: 0;
}
.name0100 {
	position: relative;
	top: -0.3rem;
	left: 0.25rem;
	font-family: 'Roboto Condensed Light', 'Roboto Condensed', 'Arial Condensed', sans-serif;
    font-style: italic;
    font-weight: 100;
	font-size: var(--fsSuperSmall);
}

#Replay_0100 {
	cursor: pointer;	
	background-color: var(--akzentFarbe);
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 7px;
	padding: 0.075rem 0.5rem 0.025rem 0.5rem;
	margin: 2% 2% 0.5% 0;
}
#Replay_0100 > span { font-style: normal; }
#Replay_0100:hover {	
	background-color: var(--akzentFarbeDu);
}

@media (max-width: 47.5em) {
	#container_0100 {
		padding: 0 1% 0.75rem 1%;
	}
	.cell_0100 {
		height: 6.5rem;	
	}
	#auto1_0100, #auto2_0100, .cell_0100 .einheit {
		width: 4.75rem;
	}
	.kmh0100 {
		line-height: 0.9;
	}
	#Replay_0100 {
		font-size: var(--fsSuperSmallMobile);
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Tankanzeige   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.Lcell.tankanz, .Rcell.tankanz {
	flex-flow: row nowrap;
	align-items: center;
}
.Lcell.tankanz > div:first-child, .Rcell.tankanz > div:last-child {
	text-align: center;
	width: 40%;
}
.Lcell.tankanz > div:first-child {
	margin-right: 7.5%;
}
.Rcell.tankanz > div:last-child {
	margin-left: 7.5%;
}

@media (max-width: 47.5em) {
	.Lcell.tankanz > div:first-child {
		margin-right: 4%;
	}
	.Rcell.tankanz > div:last-child {
		margin-left: 4%;
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Praktische Nutzbarkeit   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
#kofferImages {
	display: flex;	
	justify-content: space-between;	
	padding: 0 0 3.5% 0;
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}
#kofferIMG_L, #kofferIMG_R {	
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	justify-content: space-evenly;
	align-items: flex-end;	
	max-width: 40%;
	margin-top: 3.75rem;
	left: 3rem;
}
#kofferIMG_R {
	left: -3rem;
}
#kofferIMG_L img, #kofferIMG_R img {	
	filter: drop-shadow(-5px 5px 10px rgba(0, 0, 0, 0.7));
	margin-top: -3rem;
	margin-left: -2.75rem;	
}
#kofferIMG_R img {
	margin-left: inherit;
	margin-right: -2.75rem;
}
.KL {
	height: 120px;		
}
.KM {
	height: 100px;
}
.KS {
	height: 80px;
}
.KB {
	height: 38px;
}


@media (max-width: 47.5em) {
	#kofferIMG_L, #kofferIMG_R {
		margin-bottom: 0.75rem;
		left: 2rem;
	}
	#kofferIMG_R {
		left: -2rem;
	}
	#kofferIMG_L img, #kofferIMG_R img {
		margin-top: -3rem;
		margin-left: -2.1rem;	
	}
	#kofferIMG_R img {
		margin-left: inherit;
		margin-right: -2.1rem;
	}
	
	.KL {
		height: 90px;		
	}
	.KM {
		height: 75px;
	}
	.KS {
		height: 60px;
	}
	.KB {
		height: 28.5px;
	}
}






/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Fehlermeldungen   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.Fehlermeldung {
	color: var(--textDunkel);
	font-size: var(--fsMiddle);
	margin: 0.5rem 0.5rem 1.5rem 0.5rem;
}
.Fehlermeldung a {
	color: var(--textDunkel);
	text-decoration: underline;
}
.Fehlermeldung a:hover {
	color: var(--akzentFarbe);
}
.Fehlermeldung a:active {
	color: var(--akzentFarbeDu);
}
#image404 {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 1.5rem;
}

@media (max-width: 75em) {
	#image404 img { width: 98%; }
}
@media (max-width: 47.5em) {	
	.Fehlermeldung { font-size: var(--fsMiddleMobile); }
}






/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Tooltip-Info   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
.tooltip {	
	position: relative;
	font-family: 'Roboto', 'Arial', sans-serif;
	font-weight: 400;
	font-style: normal;	
	font-size: var(--fsNormal);
	text-transform: none;	
	cursor: help;
	color: #FFC9B9;
}
.tooltip > span {
	position: absolute;
	overflow: auto;
	visibility: hidden;
	z-index: 10;
	bottom: 1.15rem;	
	left: -16rem; /* = max-width */
	right: -16rem; /* = max-width */
	max-width: 40rem;
	color: var(--textDunkel);
	font-size: var(--fsSmall);
	line-height: normal;
	text-align: center;	
	border: solid var(--akzentFarbe);
	border-radius: 0.275em;
	background: var(--cellName);
	box-shadow: inset 0 0 0 0.05rem var(--textDunkel);	
	margin: 0 auto 55% auto;
	padding: 0.375em;
}
.tooltip.ttLeft > span {
	left: -3rem;
	right: -19rem;
}
.tooltip.ttRight > span {
	left: -19rem;
	right: -3rem;		
}
.tooltip:hover {
	color: var(--akzentFarbe);
}
.tooltip:after { /* треугольничек под подсказкой */
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0.85rem;
	visibility: hidden;
	margin: 0 0 0 -80%;
	border: 0.5em solid;
	border-color: var(--akzentFarbe) transparent transparent transparent;
	cursor: auto;
}
.tooltip:hover > span, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus > span, .tooltip:focus:before, .tooltip:focus:after {
	visibility: visible;
	transition: 0s 0.3s;
}
.tooltip:focus { /* убрать рамку в Хроме */
	outline: none;
}
.tooltip > span, .tooltip:after {
	opacity: 0;
	transform: translateY(1.5em) scale(0.3);
	transform-origin: center bottom;
}
.tooltip:after {
	transform: translateY(0.7em) scale(0.3); 
}
.tooltip:hover > span, .tooltip:hover:after, .tooltip:focus > span, .tooltip:focus:after {
	opacity: 0.95;
	transition: 0.6s 0.4s;
	transform: translateY(0);
}


@media (max-width: 75em) {	

}
@media (max-width: 47.5em) {	
	.tooltip { font-size: var(--fsNormalMobile); }
	.tooltip > span {
		font-size: var(--fsSmallMobile);
		left: -40vw;
		right: -40vw;
		margin: 0 7vw 55% 7vw;
	}	
	.tooltip.ttLeft > span {
		left: -11vw;
		right: -56vw;
	}
	.tooltip.ttRight > span {
		left: -56vw;
		right: -11vw;		
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Footer   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */

#footer {
	position: relative;
	background-color: var(--akzentFarbe);	
	margin: 2.5% 0 0 0;
	padding: 1%;
}
#scroll_up_arrow {
	float: right;
	margin-right: 7vh;
}
#scroll_up_arrow img {
	position: fixed;
	width: 2.75rem;
	bottom: 2.5vh;	
	cursor: pointer;
}

@media (max-width: 75em) {	
	#scroll_up_arrow {
		margin-right: 7.5vw;
	}
	#scroll_up_arrow img {
		width: 3rem;	
	}
	@media (orientation: landscape) {
		#scroll_up_arrow {
			margin-right: 5.5vw;
		}
	}
}

@media (max-width: 47.5em) {	
	#footer {
		font-size: var(--fsSmallMobile);
	}
	#scroll_up_arrow {
		margin-right: 13vw;
	}
	#scroll_up_arrow img {
		width: 2.75rem;	
	}
	@media (orientation: landscape) {
		#scroll_up_arrow {
			margin-right: 12vh;
		}
	}
}





/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
/*   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Ganz unten lassen!   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   */
@media (min-width: 47.51em) {	
	.desktopDisplNone { display: none; }
}

@media (max-width: 47.5em) {	
	.mobilDisplNone { display: none; }
}