/*
Farben:

Graublau: 	142B45
Dunkelblau:	080B74
Hellblau:	3AA6D0 //6163C1
Hellgrau:	f8f8f8
Mittelgrau:	e8e8e8
Dunkelgrau:	404040
Orange:		FF9025
Quietschblau: 1A1EC3
Rot:		C90000
*/

/************************************/
/********    Allgemeines   **********/
/************************************/

@font-face { 
	font-family: "GillSansMTPro"; 
	src: url(fonts/gill_sans_pro/GillSansMTPro-Book.otf) format("opentype"); 
}

@font-face { 
	font-family: "GillSansMTPro"; 
	src: url(fonts/gill_sans_pro/GillSansMTPro-BookItalic.otf) format("opentype");
	font-style: italic;
}
@font-face { 
	font-family: "GillSansMTPro"; 
	src: url(fonts/gill_sans_pro/GillSansMTPro-Bold.otf) format("opentype"); 
	font-weight: bold;
}

/*@font-face {
	font-family: "AnneKathrinJansen"; 
	src: url(fonts/AnneKathrinJansen.ttf) format("truetype");
}*/

@font-face {
	font-family: 'AnneKathrinJansen';
    src: url('fonts/annekathrinjansen-webfont.eot');
    src: url('fonts/annekathrinjansen-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/annekathrinjansen-webfont.woff2') format('woff2'),
         url('fonts/annekathrinjansen-webfont.woff') format('woff'),
         url('fonts/annekathrinjansen-webfont.ttf') format('truetype'),
         url('fonts/annekathrinjansen-webfont.svg#AnneKathrinJansen') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: GillSansMTPro, Calibri, Arial, Verdana, sans-serif;
	font-size: 120%;
	color: #080B74;
	height: 100%;
	margin:0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #8EA5BF;
}
a:hover, a:focus, a:active {
	color: #C90000;
	text-decoration: underline;
}

h1 {
	font-family: AnneKathrinJansen, GillSansMTPro, Calibri, Arial, Verdana, sans-serif;
	font-size: 120%;
	margin-top: 15px;
	margin-bottom: 15px;
}

.motto {
	font-family: AnneKathrinJansen, GillSansMTPro, Calibri, Arial, Verdana, sans-serif;
	color: #C90000;
	display: block;
	margin-top: 10px;
}



/*Bullet points in unordered lists*/
ul {
    list-style: none;
    padding:0;
    margin:0;
	margin-bottom: 1em;
}
li { 
    padding-left: 1em; 
    text-indent: -.7em;
}
li:before {
    content: "•";
	/*font-family: AnneKathrinJansen, GillSansMTPro, Calibri, Arial, Verdana, sans-serif;*/
	padding-right:12px;
	padding-left: 5px;
    color: #C90000;
}
/*Alternative mit eigenem Bild:
ul {
	list-style-image: url(dat/bullet.png);
}
*/

#container {
	min-height: 100%;
	margin: 0 auto; /*Zentriert die Homepage*/
	max-width: 800px;
	min-width: 300px;
	background-color: #fff;
	background-image: url(dat/rahmen_links_blau.jpg), url(dat/rahmen_rechts_blau.jpg);
	background-repeat: repeat-y;
	background-position: left top, right top;
}

#content {
	padding: 0px 25px 6em 25px; /*ORUL*/
}

#kopf {
	margin-bottom: -8px;
}

#kopf img {
	width: 100%;
}

.red-dot {
	color: #C90000; 
	position: relative; 
	top: 7px;
}

/************************************/
/********    Navigation    **********/
/************************************/
#navigation {
	font-family: AnneKathrinJansen, GillSansMTPro, Calibri, Arial, Verdana, sans-serif;
	background-image: url(dat/rahmen_oben_rechts_blau.jpg), url(dat/rahmen_oben_blau.jpg);
	background-repeat: no-repeat;
	background-position: top right, top left;
	font-size: 14px;
}

#navigation ul {
	list-style-type: none;  /*no bullet points*/
	list-style-image: none; /*no custom bullet pictures*/
	margin: 0;
	padding: 0;
}

#navigation li {
	padding-left: 0;
	text-indent: 0;
}

#navigation li:before {
	content: none;
}

#navigation a {
	text-decoration: none;
	padding: 10px 15px;
	color: #080B74;
	font-weight: bold;
}

/*for the top navigation level (and below)*/
#navigation .nav-top {
	height: 2em; 		/*height of the menu bar*/
	line-height: 2em;	/*for positioning the menu icon*/
	padding-top: 1em;
	padding-right: 1em;
}

/*only for the top navigation level*/
#navigation .nav-top > li {
	position: relative;
	display: inline;
	float: right;
}

#navigation .nav-top > li > a {
	padding-left: 40px; /*Breite neben dem Menü-Logo, die auch gehovert werden kann.*/
}


/*for the sub navigation (and below)*/
#navigation .nav-sub {
	width: 112px;
	box-shadow: -1px 1px 2px grey;
	z-index: 2;
}

/*only for the sub navigation*/
#navigation .nav-sub > li {
	position: relative;
}

#navigation li:hover ul.nav-sub { /*if you hover over any list element, apply for the sub navigation level*/
	left: -52px; /*=-Breite des nav-sub plus 60px*/
	top: auto;
}

/*for the subsub navigation*/
#navigation .nav-subsub {
	width: 157px;
	box-shadow: -1px 1px 2px grey;
	z-index: 1;
}

#navigation #nav-lang {
	width: 75px;
}
#navigation li:hover ul#nav-lang {
	left: -75px;
}

#navigation .nav-subsub a {
	font-weight: normal;
	letter-spacing: 0px;
}

#navigation .nav-sub > li:hover ul.nav-subsub { /*if you hover over the list element of the sub navigation level, apply for the subsub navigation level*/
	left: -157px;  /*Entspricht der Breite des subsub navigation levels*/
	top: 0px;
}

/*for both sub and subsub navigation*/
#navigation .nav-sub, #navigation .nav-subsub {
	position: absolute;
	left: -9999em;
	top: -9999em;
	display: block;
	background-color: #fff;
}

#navigation .nav-sub a, #navigation .nav-subsub a{
	line-height: 16px;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 10px;
}

#navigation #aktuell-sub, #navigation #aktuell-subsub {
	color: #C90000;
}

#navigation .nav-sub a:hover, #navigation .nav-sub a:focus, #navigation .nav-sub a:active,
#navigation .nav-subsub a:hover, #navigation .nav-subsub a:focus, #navigation .nav-subsub a:active {
	color: #C90000;
}

/************************************/
/********   Menu button    **********/
/************************************/

/*for all buttons*/
.btn {
	position: relative;
	padding: 5px;
	width: 50px;
	display: inline;
}

/*for all icons*/
.icon {
	background-image: url(dat/menuicons.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: -2px;
	width: 22px;
	height: 25px;
	margin-top: -12px;
}

/*for the menu icon (standard)*/
.menu-icon {
	background-position: 0px 50%;
}

/*if any list item is hovered, for the menu icon*/
#navigation li:hover .menu-icon {
	background-position: -23px 50%;
}



#lang-de {
	background-image: url(dat/ger.png);
}

#lang-en {
	background-image: url(dat/eng.png);
}

.language {
	background-repeat: no-repeat;
	background-size: 20px;
}

/*for the selected language*/
.nav-sub > .language {
	background-position: top 6px left 8px;
}

/*for the language in the menu*/
.nav-subsub > .language {
	background-position: top 6px left 8px;
}



/************************************/
/********     Clearfix     **********/
/************************************/

/*Clearfix sorgt dafür, dass das umfassende Element bei float tatsächlich alle Elemente umfasst*/
.cf:before, cf.after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}



/************************************/
/********     Kontakt      **********/
/************************************/

.form-entry {
	margin-bottom: 6px;
	margin-top: 6px;
}

.form-label {
	width: 160px;
	cursor: pointer;
	margin-left: -10px;
	padding-left: 10px;
	display: block;
}

.form-input {
	width: 96%;  /*bei Formularfeldern werden padding und margin nicht zur Größe des Elements hinzugezählt, weshalb das Element bei 100% übersteht...*/
	padding: 4px;
	display: block;
}

#captcha {
	padding: 0;
	width: 304px;
	transform:scale(0.92);
	-webkit-transform:scale(0.92);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

.error {
	color: #C90000;
}


/************************************/
/********     Footer       **********/
/************************************/
#footer {
	background-image: url(dat/rahmen_unten_rechts_blau.jpg), url(dat/rahmen_unten_blau.jpg);
	background-position: bottom right, bottom left;
	background-repeat: no-repeat;
	color: #080B74;
	text-align: right;
	height: 4.25em;
	margin-top: -6.55em; /*= 4.25 + 0.5 (padding-top) + 1.8 (padding-bottom)*/
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	min-width: 300px;
	padding-top: 0.5em;
	padding-bottom: 1.8em; /*Auch die Werte für große Screens beachten!*/
	padding-right: 5px;
	font-size: 80%;
}

#footer p {
	line-height: 1.25em;
	margin: 0 auto;
	display: block;
	padding-right: 20px;
}

#footer a {
	text-decoration: none;
	color: #080B74;
}

#footer a:hover {
	text-decoration: underline;
}

.footer-devider {
	display: none;
}

/************************************/
/********     Pictures     **********/
/************************************/

.anne {
	background-image: url(dat/anne.png);
	background-position: bottom 100px right 0px;
	background-size: 300px;
	background-repeat: no-repeat;
	right: 100px;
	min-height: 720px;
}


/************************************/
/********    Referenzen    **********/
/************************************/

.ref {
	padding-top: 10px;
	padding-bottom: 25px;
	overflow: hidden;		/*Bewirkt, dass das div alles zusammen hält*/
}

.ref img {
	width: 150px;
	box-shadow: 1px 1px 4px grey;
	margin-left: 5px;
	display: block;
	padding: 10px;
}

.ref p {
	margin: 0;
	margin-left: 15px;
	margin-top: 5px;
}

/*********************************/
/*Style für mittel-kleine Screens*/
/*********************************/
@media screen and (min-width: 450px) {
	/************************************/
	/********     Pictures     **********/
	/************************************/

	.anne {
		background-position: bottom 60px right 0px;
		min-height: 500px;
	}

	/************************************/
	/********    References    **********/
	/************************************/
	
	.ref img {
		float: left;
	}
	
	.ref p {
		margin-top: 0;
		margin-left: 200px;
	}
	
	/************************************/
	/********     Kontakt      **********/
	/************************************/	
	.form-input {
		width: 80%;
	}
	
	/************************************/
	/********      Footer      **********/
	/************************************/
	#footer {
		height: 1.75em;
		margin-top: -4.05em;
	}
	
	#footer p {
		display: inline;
		padding: 0px;
	}
	
	#footer span {
		padding-right: 20px;
	}
	
	.footer-devider {
		display: inline;
	}
}

@media screen and (min-width: 700px) {
	.anne {
		background-size: 400px;
		min-height: 460px;
	}
}

/************************************/
/***  Style für mittlere Screens  ***/
/************************************/
@media screen and (min-width: 730px) {
	
	#content {
		padding-top: 40px;
	}
	
	/************************************/
	/********    Navigation    **********/
	/************************************/
	#navigation {
		padding: 0;
		margin: 0;
		background-color: transparent; /*Background of main navigation*/
		height: 41px;  /*41=Font size (16) + Padding (2*10) + Border (5)*/
		font-size: 14px;
		margin-top: -6px; /*Bewitrkt, dass weißer Rand unter Kopf verschwindet*/
	}
	
	#navigation #aktuell-subsub {
		color: #C90000;
	}
	
	/*for top navigation level*/
	#navigation .nav-top > li > a {
		display: none;
	}
	
	#navigation .nav-top > li {
		float: none;
	}
	
	/*for sub navigation*/
	#navigation .nav-sub {
		max-width: 800px;
		min-width: 300px;
		position: static; /*Default value*/
		left: auto;
		top: auto;
		width: 100%;
		padding-left: 10px;
	}
	
	#navigation .nav-sub a {
		display: block;
		padding: 10px 15px;
	}
	
	#navigation .nav-sub > li {
		float: left;
	}
	
	#navigation li:hover ul.nav-sub {
		left: auto;
		top: auto;
	}
	
	#navigation #aktuell-sub:hover {
		color: #C90000;
	}
	
	/*for subsub navigation*/
	#navigation .nav-subsub {
		width: 210px;
		padding: 6px 0px;
		box-shadow: 2px 2px 4px grey;
	}
	
	#navigation .nav-subsub a {
		display: block;
		line-height: 1.3em;
		padding: 6px 15px;
	}
	
	#navigation .nav-sub > li:hover ul.nav-subsub {
		left: 0px;
		top: auto;
	}
	
	#navigation .nav-subsub > li:hover ul.nav-sub {
		border-bottom: none;
	}
	
	#navigation .nav-sub a:hover, #navigation .nav-sub a:focus, #navigation .nav-sub a:active {
		background-image: url(dat/unterstrich1.png);
		background-repeat: no-repeat;
		background-position: bottom center;
	}
	
	#navigation .nav-subsub a:hover, #navigation .nav-subsub a:focus, #navigation .nav-subsub a:active {
		background-image: none;
	}
	
	#navigation .nav-sub .language a:hover, #navigation .nav-sub .language a:focus, #navigation .nav-sub .language a:active {
		background-image: none;
	}

	#navigation li:hover ul#nav-lang {
		left: 0px;
	}
	
	/*for the selected language*/
	.nav-sub > .language {
		background-position: top 6px left 8px;
		padding-right: 10px;
	}

	/*for the language in the menu*/
	.nav-subsub > .language {
		background-position: top 3px left 8px;
	}
	
	#navigation .nav-sub > .language {
		float: right;
	}
	
	#navigation .nav-sub > .language:hover #nav-lang {
		left: -45px;
	}
		
		
}

/************************************/
/****   Style für große Screens   ***/
/************************************/
@media screen and (min-width: 800px) {
	#navigation .nav-sub > li > a {
		font-size: 16px;
	}
	
	h1 {
		font-size: 150%;
	}
	
	
	
	/************************************/
	/*********      Kontakt      ********/
	/************************************/
	
	.form-input {
		margin-left: 160px;
		width: 65%;
	}
	
	.form-label {
		float: left;
		text-align: right;
		padding-left: 0;
	}
	
	.form-button {
		margin-left: 160px;
	}
	
	.error {
		margin-left: 160px;
	}
	
	.form-nachricht {
		margin-left: 160px;
	}
}

/*Style Einstellungen für den Druck*/
@media print{
	#navigation{
		display: none;
	}
	
	body {
		width: auto;
		background-color: #FFF;
		color: #000;
		margin: auto;
		padding: auto;
	}
	
	#kopf img {
		display: none;
	}
	
	
}