.HintergrundBild {
/*	background-image:url('../Media/Logos/Background_neu_BW.jpg');
*/	background-color:white;
	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:block; width:100%;}

#Title {float:left;width:100%;max-width:700px; margin-left:5%;}
#Title img {width:95%}

#Titletext {display:block;width:100%; height:40px; line-height:37px;}
.Titletextline {vertical-align:middle; text-align:center; padding:0px 5px 0px 5px}

#Link1 {display:inline-block; height:100%; padding:0px 10px 0px 10px;}
#Link1 .Titletext {vertical-align:middle; line-height:100%}
#Link1 .KachelTitel {display:none} /*Werden nur im Mobile-Modus angezeigt*/
#Link1 a {Text-decoration:none; height:100%; vertical-align:middle; text-align:center; display:inline-block}
#Link1 a:hover {Text-decoration:none}

/*#DetailTitle {padding-right:20px}*/

#Link2 {display:inline-block;float:right; margin-right:10px}
#Link2 a {Text-decoration:none; height:100%}
#Link2 a:hover {Text-decoration:none}


/* 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;text-decoration: none; transition: 0.3s; /*Gibt verzögerten übergangseffekt*/}
ul.topnav li.icon {display: none;} /*Icon für Smallscreen ausblenden */

.Hide {display:none;}
.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% - 234px);
	margin-right:230px;/*220px;*/
}

#column_r {
	position:absolute; top:0px;right:0px;width:220px;
	float:right;
	/*width:18%;min-width:100px; max-width:250px;*/
	border:1px black solid;
	background-color:#FFF;
	border-radius:3px; 
	margin-top:20px;
}

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

.TTable {vertical-align:middle;text-align:left}
.TTable td {padding:5px}

.TLink {margin-top:5px} /*Tumbnail Link: Icons neben Links werden mit der Grösse 20px dargestellt:  <p class="TLink"><img />&nbsp;<a>TEXT</a></p> */
#column_r .TLink img {height:20px; vertical-align:middle}
#column_l .TLink img {width:20px; vertical-align:middle}

/* Bilder im Column_l - Grösse*/
#column_l img {width:100%; border-radius:3px;}
#column_l video {width:100%; border-radius:3px;}
#column_r img {max-width:200px;}

/*Platzhalter für News*/
.Spacer {height:20px;	float:left;	width:100%;}

/* Bilder ohne Rand darstellen*/
.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{
/*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;}


/*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*/
.Beitragsbild {width:100%; height:auto; border-radius:3px; position:relative; bottom:0px; flex-shrink:0; } /*16:9 Bild 100% Breite unter den Beiträgen*/

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

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

#footer {
	display:block;
	width:calc(100%-10px);
	text-align:left;
	padding:5px;
	clear:both;
}
#footer div {vertical-align:middle}
#footer table {font-size:12px}
#Infotext {display:inline-block;width:48%; white-space:nowrap; padding:5px}

#Hours {display:inline-block;padding:5px}
#Hours table{white-space:nowrap;}
#FootNote {margin-top:10px}

/*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: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}
	.CF_2 .ContentFlex {width:100%}
	.CF_3 .ContentFlex {width:100%}		
	.MobileHide {display:none}
}

@media screen and (max-width:550px) {
	.CF_4 .ContentFlex {width:100%}		
	.CF_5 .ContentFlex {width:100%}	
	.CF_6 .ContentFlex {width:100%}
}

@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;}
}