Body {background-color:#FFFFFF}

.HintergrundBild {
	background-image:url('../Media/Logos/Background.png'); /*Background_neu_BW.jpg*/
	background-attachment:fixed;
}
#container {
	max-width:1600px;
	/*width:100%;*/	width:100%;
	background-color: #fff;
	/*position:absolute; top:0px;left:0px;*/
	Margin-left:auto;margin-right:auto;
	box-shadow: 5px 5px 40px #888;
}

/*#container_inner{margin-left:10px;margin-right:10px;} */

#Masthead {display:inline-block; width:100%;}

#Title {float:left;width:100%;max-width:700px; margin-left:2%; margin-top:20px;margin-bottom:20px}
#Title img {width:50%}

/*Link1 Titelleiste links; Link2 Titelleiste rechts*/
#Link1 {display:inline-block} /*Titelleiste Icons links (Assistance)*/
#Link2 {display:inline-block;float:right;} /*Titelleiste Icons rechts (Assistance)*/

#Link1 img, #Link2 img{height:25px; padding:10px; margin:0px; vertical-align:middle; transition:0.3s}
#Link1 span, #Link2 span{padding-right:5px; margin-right:10px; vertical-align:middle;}
#Link1 a, #Link2 a {Text-decoration:none; display:inline-block}

/* Navigation Menue */
#navigation {display:block;	width:100%;	overflow: hidden;}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {list-style-type: none; margin: 0; padding: 0; overflow: hidden}
ul.topnav li {float: left;}
ul.topnav li a {display: inline-block;text-align: center;padding: 14px 16px}
ul.topnav li.icon {display: none;} /*Icon für Smallscreen ausblenden */

/*Ein- Ausblenden von Box_Assistance / Verwendet im Skript Navigation*/
.Hide {display:none;} /*Wo verwendet*/
.Show {display:block;}
 
#page_content {/*Gesamtbox für Main und Sideboxen*/
	width: 100%;
	position: relative; top:0px;left:0px;
}
#column_l {
	float:left;
	margin-top:20px;
	width:calc(100% - 20px);
	margin: 0px 250px 0px 10px;
}
#column_r {
	position:absolute; top:0px;right:0px; width:220px;
	float:right;
	border:1px black solid;
	background-color:#FFF;
	border-radius:3px; 
	margin-top:5px;
	margin-right: 10px;
}

/*Content-Formatierungen (unterhalb Masterpage)*/

img {border:0;} /*Generell sollen Bilder keinen Rahmen haben*/

.PartnerLogo {
	height: 20%;
	max-height: 80px;
}

/*Links mit kleinen icons daneben*/
.TLink {height:20px; vertical-align:middle}
.TLink span{vertical-align:middle; line-height:1}
.TLink img {height:15px; vertical-align:middle}

/*Kacheln (Mietwagen.html): <div id="MWKachel"><div class="Kachel Dark" ><a href="xxx"><div>TEXT</div></a></div></div> */
.Kachel {text-align:center; margin:1%; display:inline-block; border-radius:0px; transition:0.3s}
.Kachel {width:50px;height:50px;}
.Kachel img {width:40px;height:40px; margin:5px;}

/*Link Schaltfläche*/
.Link {display:inline-block; padding:10px; margin-top:10px; margin-bottom:10px; margin-right:10px}

.Inaktiv a{pointer-events:none; cursor:default;} /*Wenn Inaktiv, Links deaktivieren*/

/* Abstand von Inhalt zu Rahmen*/
.Padding_01 {padding:5px} /*5*/

.FlexBox {
/*FlexBox sollte das Anzeigen von Elementen vereinfachen. Übergeordnete Box*/
	width:calc(100%);
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin: 0px 0px 10px 0px; /*margin:1%;*/	
}
.ContentFlex, .ContentFlex_Anmeldetool, .ContentFlex_Anmeldekalender1, .ContentFlex_Anmeldekalender2  {
/*Beitrag innerhalb der FlexBox*/
	padding:5px;
	margin: 5px; /*margin:1%;*/
	border:1px #d4d4d4 solid;
	border-radius:0px;
	float:left;
	
	/*Für Inhalt (Text und Bild)*/
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction:column;"

}

/*Textbereich innerhalb Beitrag. Damit dieser die Gesamte Höhe einimmt.*/
.ContentFlex_Text {flex-grow:1;}

/*Zusätzliche Klasse immer zusammen mit ContentFlex. Anzahl Einheiten nebeneinander*/
/*z.B. CF_3 wird immer zusammen mit der Klasse FlexBox (Übergeordnete Box) angegeben und wirkt sich dann auf alle Elemente darin aus*/
.CF_1 .ContentFlex {width:calc(100% - 23px);min-width:400px;}
.CF_2 .ContentFlex {width:calc(100% / 2 - 23px);min-width:400px;}
.CF_3 .ContentFlex {width:calc(100% / 3 - 23px);min-width:220px;}
.CF_4 .ContentFlex {width:calc(100% / 4 - 23px);min-width:200px;}
.CF_5 .ContentFlex {width:calc(100% / 5 - 23px);min-width:150px;}
.CF_6 .ContentFlex {width:calc(100% / 6 - 23px);min-width:100px;}

/*Zusätzliche Klasse immer zusammen mit ContentFlex. Anzahl Einheiten nebeneinander*/
/*z.B. CF_3 wird immer zusammen mit der Klasse FlexBox (Übergeordnete Box) angegeben und wirkt sich dann auf alle Elemente darin aus*/
.CF_1 .ContentFlex_Anmeldetool {width:calc(100% - 23px);min-width:200px;}
.CF_2 .ContentFlex_Anmeldetool {width:calc(100% / 2 - 23px);min-width:200px;}
.CF_2 .ContentFlex_Anmeldekalender1 {width:200px;}
.CF_2 .ContentFlex_Anmeldekalender2 {width:calc(100% - 246px);min-width:200px;}

/*ContentBox falls nur ein Beitragselement ohne Rahmen*/
.ContentBox {
	padding:5px;
	width:calc(100% - 10px); /*98%;*/
	margin: 10px 0px 0px 0px; /*margin:1%;*/
	float:left;
}

/* Bilder im Column_l / Column_r - Grösse*/
.BeitragBild {width:100%; height:auto; border-radius:3px; position:relative; bottom:0px; flex-shrink:0; } /*16:9 Bild 100% Breite unter den Beiträgen*/
#column_r img {max-width:200px;}

/*Ausstattung Mietwagen */
.MW_Ausstattung {margin: 2px; padding-left:5px;padding-right:5px; border: 1px gray solid; border-radius:5px;line-height:20px; display:inline-block}

/*Fade effekt bei Slideshows. */
.SlideFade {
	animation-name:Fade; 
	animation-duration:1.5s;
}

/*Formate für Autoscout IFrame in Fahrzeugangebot*/
#FrameAutoscout {
	height:800px; 
	scrolling:auto; 
	width:100%; 
	border:0;
}


@keyframes Fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*Fade effekt bei Slideshows. */


/*Fusszeile*/
#footer {
	display:block;
	width:calc(100% - 10px);
	text-align:left;
	padding:5px;
	clear:both;
}

#footer div {vertical-align:middle}

#Brands {display:inline-block; width:300px; white-space:nowrap; padding:5px;} /*Bei Mobile-Screen wird Width auf 100% gesetzt. */
#Adress {display:inline-block;padding:5px; margin-left:10px} /*Öffnungszeiten Fussleiste*/

#Hours {display:inline-block;padding:5px; margin-left:10px} /*Öffnungszeiten Fussleiste*/
#Hours table{white-space:nowrap; height:80%;vertical-align:middle;text-align:center;}
#Hours td {padding:5px}/*Abstand zwischen Zeiten*/
#Impressum {Text-align:left; padding-top:5px; margin-bottom:5px}


/*Anpassungen für Mobile-Ansicht*/

/*Werden Angezeigt / Ausgeblendet in Mobiler Ansicht*/
.MobileShow {display:none} /*Werden nur im Mobile-Modus angezeigt*/
.MobileHide {display:inherit}

/*When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1600px) {
	#Box_Assistance{right:10px;}

@media screen and (max-width:680px) {
	ul.topnav li:not(:first-child) {display: none;}
	ul.topnav li.icon {float: right;display: inline-block}
	#column_l {width:100%;max-width:none;height:auto}
	#column_r {width:100%;float:left;max-width:none;height:auto;border: 1px #e6e6e6 dotted;position:inherit}
	#Brands {width:100%}

	.CF_2 .ContentFlex {width:100%; min-width:100px}
	.CF_3 .ContentFlex {width:100%; min-width:100px}		
	.MobileHide {display:none}
	.MobileShow {display:inherit}
	#Link2 {font-size:10px}
		
	#Link1 img {height:35px} /*Icons eetwas grösser darstellen*/
	#Link2 img {height:35px} /*Icons eetwas grösser darstellen (Auch Assistnace Box)*/
}

@media screen and (max-width:550px) {
	.CF_4 .ContentFlex {width:100%; min-width:100px}		
	.CF_5 .ContentFlex {width:100%; min-width:100px}	
	.CF_6 .ContentFlex {width:100%; min-width:100px}
	
	.CF_1 .ContentFlex_Anmeldetool {width:100%; min-width:100px}
	.CF_2 .ContentFlex_Anmeldetool {width:100%; min-width:100px}	
	.CF_2 .ContentFlex_Anmeldekalender1 {width:100%; min-width:100px}
	.CF_2 .ContentFlex_Anmeldekalender2 {width:100%; min-width:100px}

}

@media screen and (max-width:400px) {
	#footer table {font-size:9px}
	
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline;}
  ul.topnav.responsive li a {display: block;text-align: left;}
}