/*----------------------------------
	Body und #gesamt-Div
------------------------------------*/


html,body {
   min-height:101%;			/* damit immer ein Scrollbalken => keine horizontalen Verschiebungen */
}

body{
	background: #fff;
	margin: 0;
	padding: 0;
	font-size: 110%;				/* GRUNDSCHRIFTGROESSE (Standard 100% = 16px) */
	font-family:'Conduit ITC W01 Regular';
	letter-spacing:0.25px;
}


#gesamt{
	max-width:			1500px;								/* MAXIMALE_BREITE */
	min-width:			300px;
	margin: 				0 auto;								/* bewirkt horizontale Zentrierung */

	/* PS: Der Hintergrund für Content und Sidebar sollte in #mittelteil angegeben werden, nicht hier.
	 */
	/*background: yellow;*/

}

/*----------------------------------
				Header
------------------------------------*/

#header {
	height: 180px;																	/* HEADER_HOEHE */
	background-color: #fff;
	box-sizing: border-box;
	padding-left: 0;															/* Logo ganz linksbündig */
	padding-right: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;			/* Logo links, Menü-Knopf rechts */
}


/* Logo (SVG, linksbündig) */
#header #logo
{
	display: block;
	line-height: 0;
}

#header #logo img
{
	height: 126px;																	/* LOGO_HOEHE */
	width: auto;
	max-width: 80vw;
	display: block;
}


#header.fixiert {

	position:		fixed;
	top:				0px;

	/* nötig, weil sonst auf Safari der Content (kurioserweise) im Header angezeigt wird: */
	z-index:			5001;

	/* nötig, damit Logo im Head zentriert bleibt: */
	left: 			50%;
	transform:		translateX(-50%);

	/* Offenbar nötig, damit Hintergrund-Farbe/Grafik bestehen bleibt (warum auch immer): */
	width: 			1500px;						/* MAXIMALE_BREITE */
}


/*----------------------------------
				Fixed-Filler
------------------------------------*/

/* Der Filler dient dazu, im Falle eines fixierten, oben-liegenden Menüs
 * eine Zone zu schaffen, welche von Menü und Header verdeckt wird, und
 * (weil static positioniert) die nachfolgenden Elemente (Kopfbild und Content)
 * nach unten drückt. Anderenfalls würden Teile vom Menü verdeckt werden.
 */
#filler {
	height: 0px;					/* Filler soll inaktiv bleiben, solange Menü nicht fixiert */
	background: red;				/* nur für Testzwecke */
}

#filler.ohneHeader {
	height: 30px;								 			/* MENUE_HOEHE */

}

#filler.mitHeader {
	height: calc(180px + 30px);						/* HEADER_HOEHE + MENUE_HOEHE */
}


/*----------------------------------
				Mittelteil
------------------------------------*/

/* Das Mittelteil umfasst:
 * 1) Kopfbild
 * 2) Sidebar
 * 3) Content
 * 4) FussBild
 */

#mittelteil {

	/* Wichtig: damit dieses Div die gewünschte Höhe bekommt, muss das letzte darin enthaltene Div
	 * 'clear: both;' aufweisen! Sonst wird die Höhe 0 sein.
	 * Dazu dient das <div class="clearfix"></div> im html-Teil, kurz vor Abschluss des mittelteil-Divs.
	 */
	 height: auto;

	 margin: 0;
	 padding: 0;

	 /* Hintergrund wenn Navi oben oder im Mobile-Modus
	  * (Wenn Navi seitlich: siehe nachfolgende Klassen)
	  */
	 background-color:		#F4F4F4;
}


/* Der Hintergrund für Content und Sidebar.
 * Sollen die beiden Bereiche unterschidliche Hintergründe aufweisen, dann
 * entweder eine Grafik benutzen oder einen linearen Verlauf.
 * Die Breite der Sidebar sollte in Prozent und nicht in Pixeln angegeben werden.
 */

#mittelteil.navi-oben {
}
#mittelteil.navi-links {
	background-image: linear-gradient(to right, #b22a3c 24%, #F4F4F4 24%);				/* VMENUE_BREITE */
}
#mittelteil.navi-rechts {
	background-image: linear-gradient(to left,  #b22a3c 24%, #F4F4F4 24%);				/* VMENUE_BREITE */
}


/*----------------------------------
				Kopf-Bild
------------------------------------*/

/* Zwei Möglichkeiten:
 * A) Fixe Bildhöhe: Bild als Hintergrund-Bild im css-Teil angeben.
 * B) Bildhöhe soll sich an Breite anpassen: Bild direkt per <img> im html-Teil angeben.
 */

 /* Variante A (Bild mit fixer Höhe): */
#kopfBild {
	height: 140px;																	/* Höhe des Bildes */
	background: url(../img/kopfBild.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 20% 50%;
}
#kopfBildStartseite {
	height: 205px;																	/* Höhe des Bildes auf der Startseite */
	background: url(../img/kopfBild-Startseite.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 20% 50%;
}


 /* Variante B (Bild mit sich anpassender Höhe): (BEI RB-IMMOBILIEN UNBENUTZT) */
#kopfBild img {
	width:		100%;
	height:		auto;			/* auto = Höhe passt sich an aktuelle Breite an */
	margin:		0;
	padding:		0;
	display:		block;		/* Wichtig, sonst entsteht unter dem Bild ein kleiner Zwischenraum */
}


/*----------------------------------
				Sidebar
------------------------------------*/


#sideBar {

	width:				24%;				/* VMENUE_BREITE (Prozent-Wert empfohlen) */
	display:				-webkit-flex;  /* Safari 6.1+ */
	display:				-ms-flexbox;   /* IE 10 */
	display:				flex;				/* Alle anderen */
	flex-direction:	column;
	float:				left;

	/* PS: Der Hintergrund für Content und Sidebar sollte in #mittelteil angegeben werden, nicht hier.
	 */
	/*background-color:#2e3bb4;*/

}

#sideBar.navi-rechts {
	float: right;
}

#sideHead {
	/*height:			120px;*/
	text-align:		center;
}


#sideHead #sideLogo img {

	width: 100%;
	height: auto;
}

#sideFoot {

	margin-top:		30px;
	color:			white;
	height:			200px;
	text-align:		center;
}


/*----------------------------------
				Content
------------------------------------*/


#inhalt {

	/* PS: Der Hintergrund für Content und Sidebar sollte in #mittelteil angegeben werden, nicht hier.
	 */
	/*background-color:transparent;*/

	width: calc(100% - 20%);		/* 100% minus (padding-left + padding-right) */
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 75px;
	padding-bottom:35px;
	float: right;						/* (right oder left, egal, muss einfach um die Navi fliessen) */
}


#inhalt.vertikal {

	width: calc(100% - 4% - 24%);			/* 100% - (padding-left + padding-right) - VMENUE_BREITE */
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 20px;
	padding-bottom: 0px;

	margin-top: 0px;
	margin-bottom: 0px;
}

/*----------------------------------
				Fuss-Bild
------------------------------------*/

/* ====== PS: BEI RB-IMMOBILIEN KEIN FUSS-BILD ======== */


/* Zwei Möglichkeiten:
 * A) Fixe Bildhöhe: Bild als Hintergrund-Bild im css-Teil angeben.
 * B) Bildhöhe soll sich an Breite anpassen: Bild direkt per <img> im html-Teil angeben.
 */

 /* Variante A (Bild mit fixer Höhe): */
#fussBild {
	clear:both;					/* wichtig, damit Fussbild unterhalb des Contents */
/*	height: 150px;
	background: url(../img/fussBild.png);
	background-size: auto 100%;
	background-repeat: no-repeat;*/
	/*background-position: 20% 50%;*/


	margin: 0;
	padding: 0;
}

 /* Variante B (Bild mit sich anpassender Höhe): */
#fussBild img {
	width:		100%;
	height:		auto;			/* auto = Höhe passt sich an aktuelle Breite an */
	margin:		0;
	padding:		0;
	display:		block;		/* Wichtig, sonst entsteht unter dem Bild ein kleiner Zwischenraum */
}



/*****************************************************************************

							RESPONSIVES DESIGN

*****************************************************************************/


@media (max-width: 950px) {

	#kopfBildStartseite {
		clear:both;
		height: 170px;				/* (verkleinertes Top-Bild für Startseite) */
	}
}



@media (max-width: 768px) {


	html,body {
	   min-height:0;					/* hebt obiges 101% auf */
	}

	/*----------------------------------
					Header
	------------------------------------*/

/* (Abschalten des Headers wird nun per JS geregelt)
	#header {
		display: none;
	}*/


	#header {
		height: 100px;
		padding-right: 20px;
	}

	#header #logo img {
		height: 58px;
	}


	/*----------------------------------
			Kopfbild, Inhalt, Fussbild
	------------------------------------*/


	#kopfBild {
		clear:both;
		height: 75px;				/* (verkleinertes Kopf-Bild) */
	}

	#kopfBildStartseite {
		clear:both;
		height: 75px;				/* (verkleinertes Kopf-Bild für Startseite) */
		background: url(../img/kopfBild.jpg);
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: 20% 50%;
	}



	#inhalt {
		width: calc(100% - 60px);		/* 100% minus (padding-left + padding-right) */
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 20px;
	}

	#fussBild {
		clear:both;
		/*max-height: 75px;*/				/* (verkleinertes fussBild) */
	}

}



/*----------------------------------
	Logo bündig mit dem Text, sobald die Seite den Bildschirm ausfüllt
	(unter der maximalen Breite gibt es keinen Rand mehr links/rechts)
------------------------------------*/

@media (max-width: 1500px) {			/* MAXIMALE_BREITE */
	#header {
		padding-left: 10%;					/* = Einzug des Inhalts (#inhalt) */
		padding-right: 10%;
	}
}

@media (max-width: 768px) {
	#header {
		padding-left: 30px;					/* = Einzug des Inhalts im Mobile-Modus */
		padding-right: 30px;
	}
}