/*
=========================================================
STYLE.CSS
Formatierung der Webseite
=========================================================
*/


/* =====================================================
   GRUNDLEGENDES SEITENLAYOUT
   ===================================================== */

body {
	/* GEÄNDERT:
	   Schrift jetzt eindeutig auf Arial festgelegt */
	font-family: Arial, Helvetica, sans-serif;

	font-size: 100%;
	line-height: 1.4;

	margin: 0;
	padding: 0;

	color: #000000;

	/* Der Seitenhintergrund bleibt WEISS.
	   Falls du die gesamte Seite hellgelb möchtest,
	   hier #FFF9D6 statt #FFFFFF einsetzen. */
	background-color: #FFFFFF;
}


/* =====================================================
   LISTEN
   ===================================================== */

ul, ol, dl {
	padding: 0;
	margin: 0;
}


/* =====================================================
   ÜBERSCHRIFTEN UND ABSÄTZE
   ===================================================== */

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}


/* =====================================================
   BILDER
   ===================================================== */

a img {
	border: none;
}


/* =====================================================
   LINKS
   ===================================================== */

a:link {
	color: #414958;
	text-decoration: underline;
}

a:visited {
	color: #4E5869;
	text-decoration: underline;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
}

/* =====================================================
   HAUPT-CONTAINER
   ===================================================== */

.container {
	width: 90%;
	max-width: 1260px;
	min-width: 780px;

	background: #FFFFFF;

	margin: 0 auto;

	overflow: hidden;

	/*
	GEÄNDERT:
	Die Brechnung von Breite und Innenabständen wird
	eindeutig festgelegt.
	*/
	box-sizing: border-box;
}


/* =====================================================
   LINKE NAVIGATION
   ===================================================== */

.sidebar1 {
	/*
	GEÄNDERT:
	Navigation steht links.
	*/
	float: left;

	/*
	30 % der Containerbreite für die Navigation.
	*/
	width: 30%;

	background: #FFFFFF;

	padding-bottom: 10px;

	/*
	GEÄNDERT:
	Der Abstand rechts gehört jetzt zur 30-%-Breite.
	Dadurch wird die Gesamtbreite nicht mehr zu gross.
	*/
	padding-right: 30px;

	box-sizing: border-box;
}


/* =====================================================
   INHALTSBEREICH
   ===================================================== */

/* INHALTSBEREICH
   GEÄNDERT: Der Inhalt beginnt oben bündig
   mit der Navigationsleiste. */

.content {
    float: right;
    width: 70%;
    padding: 0; /* vorher: padding: 10px 0; */
    box-sizing: border-box;
}



/* =====================================================
   LISTEN IM INHALTSBEREICH
   ===================================================== */

.content ul,
.content ol {
	padding: 0 15px 15px 40px;
}


/* =====================================================
   NAVIGATION
   ===================================================== */

ul.nav {
	list-style: none;

	border-top: 1px solid #666;

	margin-bottom: 15px;

	/*
	GEÄNDERT:
	Sehr helles Gelb.
	*/
	background-color: #FFF9D6;

	letter-spacing: normal;

	text-align: center;

	vertical-align: top;

	word-spacing: normal;

	font-weight: bold;
}


/* Trennlinien zwischen den Navigationspunkten */

ul.nav li {
	border-bottom: 1px solid #666;
}


/* =====================================================
   NAVIGATIONS-LINKS
   ===================================================== */

ul.nav a,
ul.nav a:visited {

	padding: 5px 5px 5px 15px;

	display: block;

	text-decoration: none;

	/*
	GEÄNDERT:
	Sehr helles Gelb für die einzelnen Felder.
	*/
	background: #FFF9D6;

	color: #000000;

	/*
	GEÄNDERT:
	Auch die Navigation verwendet jetzt ausdrücklich
	die gleiche Schrift wie die übrige Seite.
	*/
	font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================
   HOVER-EFFEKT
   ===================================================== */

ul.nav a:hover,
ul.nav a:active,
ul.nav a:focus {

	color: #FFFFFF;

	background-color: #FFCC33;
}

/* =====================================================
HOVER-EFFEKT FÜR LINKS IM INHALTSBEREICH
===================================================== */

.content a:hover,
.content a:focus {
color: #FFCC33; /* Dunkelgelb beim Darüberfahren /
text-decoration: none; / Unterstreichung ausblenden */
}
/* =====================================================
   HILFSKLASSEN
   ===================================================== */

.fltrt {
	float: right;
	margin-left: 8px;
}

.fltlft {
	float: left;
	margin-right: 8px;
}

.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0;
}
/* KORREKTUR: Erste Überschrift im Inhaltsbereich
   oben bündig beginnen lassen */

.content > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* TEST: Überschrift optisch etwas nach oben rücken */
.content > h1:first-of-type {
    position: relative;
    top: -8px;
}