html{
	-webkit-text-size-adjust: none;
	-webkit-text-font-adjust: none;
	height:100%;
}

body{
    overflow-x: hidden;
	font-family: Arial;
	font-size: 16px;
	margin: 0;
	background-color: white;
}

a:link, a:hover, a:visited{
	text-decoration: none;
	color: inherit;
}

.mitpfeil::before{content: "☞";}


.blocksatz{
	text-align: justify;
	padding: 10px;
	margin: auto;
}

h2{
	text-align: center;
}

/*h3 links umschließend*/
.side{
	float: left;
}

#cookies{
	z-index: 90;
	background-color: white;
	color: rgba(44, 62, 102,1);
	font-weight: bold;
	width: calc(100% - 2em);
	position: fixed;
	padding: 1em;
	font-size: 0.7em;
	text-align: center;
	bottom: 0;
}

#cookies button{
	height: 2em;
}


.scroll-mich{
	position: fixed;
	left: 50%;
	bottom: 5%;
	transform(-50%; -50%);
	width: 2em;
	height: auto;
	display: none;
	visibility: hidden;
}

/*
H E A D E R
-----------
*/

#balken_oben{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: rgba(240,240,240,.9);
	color:blue;
	z-index:15;
}

#logo{
	position: absolute;
	left: 5%;
	top: 0;
	bottom: 0;
	max-height: 50%;
	max-width: 45%;
	margin: auto;
}

#hamburger img{
	position: absolute;
	right: 40px;
	top: 0;
	bottom: 0;
	max-height: 1em;
	margin: auto;
}

#closer img{
	position: absolute;
	right: 40px;
	top: 0;
	bottom: 0;
	max-height: 1em;
	margin: auto;
}

#closer{
	display: none;
}


#menue{
	position: fixed;
	background-color: rgba(44,62,102,.80);
	height: 0; 
	right:0;
	width: 0;
	top: calc(50px + 0px);
	transition: all .5s;
	color: #fff;
	z-index: 999;
	overflow: auto;
}

#hamburger:target ~ #menu{
	height: calc(100vh - 50px - 0px);
	width: 100%;
	z-index: 999;
}

.ausgeklappt{
	height: calc(100vh - 50px - 0px) !important;
	width: 100% !important;
	z-index: 999;
}

#menue_innen{
column-count: 1;
z-index: 999;
overflow: auto;
}

.menue_hauptpunkt{
	margin-top: 1em;
	padding: 0.5em;
	font-size: 1.3em;
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
	break-inside: avoid;
}

.menue_hauptpunkt > a{
	display: block;
	width: 100%;
	font-weight: bold;
	border-bottom: solid 1px;
	break-after: avoid;
}

.menue_unterpunkt{
	font-size: .7em;
	overflow-x: hidden;
	color:#D2D2D2 ;
}

.menue_hauptpunkt:target > .menue_unterpunkt{
	height: auto;
}

.platzhalter_header{
	height: 50px;
	width: 100%;
}

.platzhalter_header_unsichtbar{
	position: relative;
	top: -50px;
	height: 0;
}


/*
M E N U E   2
--------------
*/


#menu2{
	width: 2em;
	height: 7em;
	position: fixed;
	top: calc(50vh - 3.5em);
	right: 0;
	z-index:5;
}

#menu2 a, #menu2 a:visited{
	text-decoration: none;
	color: white;
}

.m2{
	display: flex; /*IE Fallback*/
	display: grid;
	grid-template-columns: 2em 8em;
	transition: all 0.5s;
	background-color: rgba(44,62,102,0.8);
	margin-top:0.2em;
	margin-bottom: 0.2em;
	margin-right: -8em;
	color: white;
	opacity: 0.7;
}

.teil1{
    display: flex;
    height: 2em;

}

.teil1 img{
    height:80%;
    margin: 10% 0 10% 10%;
}

.teil2{
	display: flex;
	margin: 0.35em auto auto 0;
	vertical-align: middle;
}


.m2:target, .m2:hover{
	opacity: 1;
}

.m2:hover{
	margin-left: -8em;
	opacity: 1;
}



/*
I N D E X
---------
*/


/*P R O D U K T E
------------------
*/

#ladeseite {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	z-index: 100;
	width: 100%;
	height: 100%;
}

#ladeseite img{
	max-width: 30vw;
	animation: logo_drehen 2s infinite linear;
}

#ladeseite p{
	color: rgba(44,62,102,1);
	font-weight: bold;
	text-align: center;
	height: 1em;
}


@keyframes logo_drehen {
	0%{transform: rotate(0)}
	25%{transform: rotate(90deg)}
	50%{transform: rotate(180deg)}
	75%{transform: rotate(270deg)}
	100%{transform: rotate(360deg)}
}


/* A P P   -   B A N N E R
--------------------------
*/

#banner_app{
	display: flex;
	background-color: rgba(240,240,240,.9);
	height: 70px;
	width: 100%;
	z-index: 4;
	position: absolute;
	bottom: 0;
	font-size: .8em;
	color: rgba(44,62,102,1);
	font-weight: bold;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
}


#logo_mobil{
	max-height: 1em; 
	margin-top: 0.5em;
}


#platzhalter{}


#hieraktuelles{
	display: none;
	font-weight: bold;
	padding: 1em;
	color: rgba(44,62,102,1);
}

/* D E T A I L P R O D U K T E
-----------------------------*/

#content{
	overflow: hidden;
	display: flex;  /*fallback für IE*/
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100vh 100vh 100vh;
}

#teil1, #teil2, #teil3{
	position: relative;
	text-shadow: 0 0 1px black;
	overflow: hidden;
}

#teil1{
	grid-row: 3/4;
	grid-column: 1/2;
}

#teil2{
	grid-row: 2/3;
	grid-column: 1/2;
}

#teil3{
	grid-row: 1/2;
	grid-column: 1/2;
}

.bild_statt_video{
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}

.bild_statt_video video{
	display: none;	
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.detailprodukt{
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: 1;
}


.content_titel{
	position: absolute;
	top: 2em;
	left: 2rem;
	color: white;
	text-shadow: 0px 0px 4px rgba(44,62,102,1), 0 0 2px rgba(44,62,102,1);
	z-index: 2;
}

.content_titel h2{
	margin:0;
	padding:0;
	text-align: left;
}


.content_inhalt{
	display: none;
	
}



/*
F O O T E R
------------
*/

.freiraum_footer{
	height: 130px;
}


#footer{
	background-color: rgba(44,62,102,1); 
	color: white; 
	z-index: 80;
}

#footer > *{
	padding: 1em;
}

#footer hr{
	width: 50%;
}

#block2 img{
	//max-width: 10em;
	padding: 0.5em;
	max-height: 2.5em;
	display: block;
	max-width: 10em;
}

#profinamobil #footer{
	margin: -1em;
}


/*
S P A R T E N S E I T E N
 -------------------------
*/


.seite_titelbild_gesamt{
	position: relative;
}

.seite_titelbild{
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	display: block;
	
}

.seite_titel{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-shadow: 0px 0px 2px #000, 0 0 5px #fff;
	font-size: 2em;
}

.einzelprodukte{
	background-color: rgba(44,62,102,1);
	display: grid;
	grid-template-columns: 100%;
	font-size: 1.2em;
	color: rgba(44,62,102,1);
}


.einzelprodukte_produkt {
	display: grid;
	grid-template-rows: auto 3em;
	background-color: rgba(44,62,102,1);
	font-size: 4vw;
}

.einzelprodukte_produkt img{
	max-height: 3em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}

.einzelprodukte_produkt p{
	text-align: center;
	color: white;
}


@keyframes hindrehen{
	0% {transform:perspective(200vw) rotateY(0deg)}
   50% {transform:perspective(200vw) rotateY(90deg)}
   100% {transform:perspective(200vw) rotateY(180deg)}
}

@keyframes dreher{
	0% {visibility: visible;}
	25% {visibility: hidden;}
	75% {visibility: hidden;}
	100% {visibility: visible;}
}


#phv {
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,1) 80%), url("img/privat (2).jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	font-weight: bold;
}

.ueberschrift_produkt {
	color: rgba(44,62,102,1);
}

.bild_detail{
	width: 35%;
	float: left;
	margin: 0 1em 0 0;
}

.bild_detail img{
	max-width: 100%;
	height: auto;
}

.produkt_darstellung{
	position: fixed;
	clear: both;
	left: 0;
	top: 50px;
	width: 0;
	background-color: hsla(0,0%,100%,.9);
	font-size: 0.8em;
	text-align: justify;
	height: 0;
	overflow: hidden;
	transition: all 0.5s;	
}


.produkt_darstellung:target {
	padding: 0 2.5em 0 2.5em;
	height: calc(100% - 50px);
	overflow: auto;
	width: calc(100% - 5em);
}

.produkt_darstellung h3{
	text-align: center;
}

#cyberseite .seite_info{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto;
	padding: 1em;
}


#cyber_fragen{
	grid-row: 3/4;
	background-color: lightgray;
	font-size: .8em;
	padding: 1em;
}

#cyber_check{
	grid-row: 4/5;
	background-color: lightgray;
	font-size: .8em;
	margin: 1em 0 0 0;
	padding: 1em;
}

	

/*I N F O - S E I T E N
-----------------------*/

.info_seite_titelbild{
	width: 100vw;
	max-height: 65vh;
	overflow: hidden;
	display: inline;
}

.info_seite_titelbild img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#register_titelbild{
	object-fit: fill;
	height: auto;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	display: table;
	text-align: center;
}


.seite_info{
	width: 95%;
	color: rgba(44,62,102,1);
	padding: 1em;
	padding-right: 3em;
	text-align: justify;
}


	#vrliste{
		width: 100%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-wrap: wrap;
		
	}
	
	#vrliste img{
		max-width: 50px;
		max-height: 50px;
		display: inline-block;
		margin-top: auto;
		margin-bottom: auto;
		padding: 10px;
	}


#nurmitscript{
	width: 95%;
	color: rgba(44,62,102,1);
	padding: 1em;
	padding-right: 3em;
    display: none;
}

.filelist img{
	max-width: 25vw;
}

#fortschritt{
	border: 1px solid black;
	width: 80%;
	height: 2em;
	display: none;
	padding: .1em;
}

#fortschritt_innen{
	background-color: black;
	width: 0;
	height: 100%;
}


#schadenhinweise li{
	margin-bottom: 1em;
}




form label{
	min-width: 12em;
	display: inline-block;
}

form input[type="text"], 
form input[type="email"], 
form input[type="date"], 
form input[type="datetime"]{
	min-width: 25em;
}

form textarea, 
form input[type="submit"]{
	min-width: 90%;
}

.rueckmeldung_formular{
	margin-top: 115px;
	height: calc(100vh - 115px - 11em);
	padding: 1em;
}



/*
Portale
-------
*/

#ah-portal{
	background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)), url("img/autohaus.jpg");
	background: -webkit-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)), url("img/autohaus.jpg");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
	padding: 1em;
	background-attachment: fixed;
}



#ah-portal_form label{
	min-width: 12em;
	display: inline-block;
}

#ah-portal_form input[type="text"], 
#ah-portal_form input[type="email"], 
#ah-portal_form input[type="date"], 
#ah-portal_form input[type="datetime"]{
	min-width: 25em;
}

#ah-portal_form textarea, 
#ah-portal_form input[type="submit"]{
	min-width: 90%;
}

#ah-portal #footer{
	
	margin: -1.5em;
}

#ah-portal_form{
	min-height: 55vh;
}

#profinamobil{
	background-image: url("img/digital.jpg");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 1em;
}

#profmobilhandy{
	display: table;
	margin: auto;
	position: relative;
}

#profinamobilhandybild{
	max-width: 100%;
	max-height: 90vh;
	margin: auto;
	display: block;
}


.kreise{
	position: absolute;
	animation: blink 2s infinite;
	font-size: 5vw;
}

@keyframes blink{
	0%{opacity: 0;}
	50%{opacity: .8;
	transform: rotate(20deg);}
	100%{opacity: 0;}
}

#kreis1{
	top: 15%;
	left: 25%;
}

#kreis2{
	top: 15%;
	left: 68%;
}

#kreis3{
	top: 39%;
	left: 25%;
}

#kreis4{
	top: 39%;
	left: 68%;
}

#kreis5{
	top: 63%;
	left: 25%;
}

#kreis6{
	top: 63%;
	left: 68%;
}

.mobilfunktion{
	padding: 0;
	position: absolute;
	background-color: rgba(200,200,200,.9);
	color: black;
	width: 80%;
	left: 10%;
	top: 120px;
	height: calc(100vh - 240px);
	max-height: 0;
	overflow: hidden;
	transition: all 1s;
	margin-top: 115px;
}

.mobilfunktion:target{
	max-height: 100vh;
	padding: 1em;
}

#mobil1, #mobil2{
	top: 20%;
}

#mobil3, #mobil4{
	top: 45%;
}

#mobil5, #mobil6{
	top: 70%;
}


/* M E D I A - Q U E R I E S
 -------------------------*/


@media screen and (min-width:1000px) and (min-height:500px){

	.scroll-mich{
		display: block;
		visibility: visible;
		z-index:3;
	}
	
	body{
		font-size: 18px;
		min-height: 100vh;
	}
	
	#balken_oben{
		height: 100px;
		top: 15px;
	}
	
	#platzhalter{
		height: 100px;
	}
	
	#banner_app{
		height: 100px;
		font-size: 25px;
		
	}
	
	#logo_mobil{
		max-height: 40px;
	}
	
	#menue{
		top: calc(100px + 15px);
	}
	
	#menue_innen{
		column-count: 3;
	}

	#hieraktuelles{
		display: none;
		min-height: 3em;
	}

	#content{	
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 30vh;
		//grid-gap: 10px;
		//padding: 10px;
		position: relative;
	}
	
	#teil1{
		grid-row: 1/2;
		grid-column: 3/4;
	}
	
	#teil2{
		grid-row: 1/2;
		grid-column: 2/3;
	}
	
	#teil3{
		grid-row: 1/2;
		grid-column: 1/2;
	}
	
		
	.bild_statt_video video{
		display: inline;
	}
	
	#footer{
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font-size: 14px;
	}
	
	#block2{
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: 4.5em 4.5em;
		grid-gap: 1em;
		
	}
	#block2 img{
		max-height: none;
	}
	
		.footer_partner{
		//width: auto;
		overflow: hidden;
	}

	.footer_partner img{
		object-fit: contain;
		width: 90%;
		height:90%;
		//margin-left:0;	

	}

	

	#block3{
		text-align: right;
	}
	#block3 p{
		line-height: 200%;
		
	}
	
	
	.platzhalter_header{
		height: 115px;
	}
	
	.platzhalter_header_unsichtbar{
		top: -115px;
	}
	
	.rueckmeldung_formular{
		margin-top: 130px;
	}
	
	.blocksatz{
		width: 50%;
	}
	
	.bild_detail{
		width: 20%;
	}
	


	.seite_titelbild_gesamt{
		height: 100vh;
		width: 100vw;
	}
		
	.seite_titelbild{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.einzelprodukte{
		grid-template-columns: 50% 50%;
		z-index: 3;
		top: 100vh;
		
	}
	
	.einzelprodukte_produkt{
		font-size: 2vh;
		background-color: rgba(44,62,102,.9);
	}
	
	.einzelprodukte_produkt:nth-child(4n-1){
	}

	.einzelprodukte_produkt:nth-child(1){
		border-left: none;
	}
	
	.produkt_darstellung:target{
		top:115px;
		height: calc(100% - 115px);
	}
	

	.info_seite_titelbild{
		position: fixed;
		z-index: 1;
		max-height: 100vh;
		height: 100vh;
		width: 100vw;
	}

	.info_seite_titelbild img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.seite_info{
		position: relative;
		width: 100vmin;
		min-height: calc(100vh - 130px - 9em);
		background-color: rgba(255,255,255,.9);
		left: calc(50% - 50vmin);
		top: 130px;
		z-index: 2;
		padding: 1em;
	}
    
	#vrliste img{
		max-width: 100px;
		max-height: 100px;
		padding: 20px;
	}

	
	
	
#nurmitscript{
	
	    position: relative;
		width: 100vmin;
		min-height: calc(100vh - 130px - 9em);
		background-color: rgba(255,255,255,.9);
		left: calc(50% - 50vmin);
		top: 130px;
		z-index: 2;
		padding: 1em;

}

	
	#cyberseite .seite_info{
		display: block;
	}

	#cyber_fragen{
		float: right;
		width: 33%;
		font-size: .8em;
		padding: 1em;
		margin: 0 0em 1em 1em;
	}
	
	#cyber_fragen ul{
		padding-left: 1em;	
	}
	
	#cyber_fragen li{
		margin-bottom: 1em;	
	}
	
	#cyber_check{
		grid-row: -1/-1;
		background-color: lightgray;
		font-size: .8em;
		padding: 1em;
	}

}