@charset "UTF-8";

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local(''),
	url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
	url('../fonts/open-sans-v34-latin-regular.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: local(''),
	url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'),
	url('../fonts/open-sans-v34-latin-700.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: local(''),
	url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'),
	url('../fonts/open-sans-v34-latin-italic.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	src: local(''),
	url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'),
	url('../fonts/open-sans-v34-latin-700italic.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Coda Caption';
	font-style: normal;
	font-weight: 800;
	src: local(''),
	url('../fonts/coda-caption-v19-latin-800.woff2') format('woff2'),
	url('../fonts/coda-caption-v19-latin-800.woff') format('woff');
	font-display: swap;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
article, header {background:#fff;width:480; max-width:100%;}
body {
	font: 70%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
	font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;
}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
article, header {background:#fff;width:321; max-width:100%;}
body {
	font: 80%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
	font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;
}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
	font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
article, header {background:#fff;width:768; max-width:100%;}
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
		font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;}
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
article, header {background:#fff;width:1024; max-width:100%;}
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
		font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;
}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
article, header {background:#fff;width:768; max-width:100%;}
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
		font-style:normal;
	padding: 0;
	margin:0;
	color: #000;
	background: url(../images/hg.jpg) repeat-x;}
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1000px) {
/* Styles */
article, header {margin: auto; background:#fff;width:1000px; max-width:100%;}
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
		font-style:normal;
	padding: 0;
	margin:0;
	
	color: #000;
	background: #f9f9f9 url(../images/hg2.jpg) repeat-x;}

}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
body {
	font: 90%/1.4 'Open Sans', Helvetica, Arial, sans-serif;
		font-style:normal;
	padding: 0;
	margin:0;
	
	color: #000;
	background: url(../images/hg2.jpg) repeat-x;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

body {background-image:url(../images/hg2.jpg); background-repeat:repeat-x;}
html, body {
min-height:100%;
height:auto !important ;
height:100%
}
html {font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;}


img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
nav {border-top: 1px solid #9ea9be;border-bottom: 1px solid #9ea9be; color:#9ea9be;}
nav a:link {font-family: 'Coda Caption', Helvetica, Arial, sans-serif;
font-size:100%; display: -webkit-box-orient:horizontal;
display:inline-block;color:#9ea9be;
	text-align:center;
	padding:1%;
	-webkit-transition:all .4s linear;
	-moz-transition: all .4s linear;
	  margin:0;}
nav a:visited { background-color:#003261; color:#9ea9be;}
nav a:hover, a:active {background-color:#9ea9be;color:#FFF; text-decoration:none;margin:0;}
.active {background-color:#9ea9be;color:#FFF; text-decoration:none;margin:0;}
header {max-height:auto; position:relative;}
footer{ color:#FFFFFF; font-size:85%; padding:2% 0;	background: #1a2b3b; width:100%; height:100%; margin:auto;}
section { height:100%; }
address {float:left; padding: 2% 0 0 4%; margin-right:45%; font-style:normal;}
address a:link {color:#9ea9be;}
address a:hover {color:#fff;}
.rights {margin: auto; width:1000px; max-width:90%;text-align:center; color:#999; font-size:75%; padding: 1% 0%;}

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0 1% 2% 0;
	margin: 0;
	overflow:hidden;
}
li { padding:0; margin-left:30px; list-style-image:url(../images/list.png);}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
	padding: 2% 2% 0 3%;
	
	/* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
}

h1 {
	color:#003261;
	font: 130% 'Coda Caption', Helvetica, Arial, sans-serif;
	text-transform: uppercase; margin-bottom: 2%;}
h2 {color:#9ea9be;font: 120% 'Coda Caption', Helvetica, Arial, sans-serif; margin-bottom: 2%;}

h3 {font-size: 100%;}
p {padding-bottom: 2%; padding-top: 1%; }
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;}

/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color:#003261;
	text-decoration: none; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}

a:hover, a:visited{ /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;color:#0f4b83;}


.titelbild{height:auto; width:100%; margin:0;}


/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;}
.break-word {word-wrap: break-word;}
.innerfooter {margin: auto; width:1000px; max-width:90%;}
.logoimg {border:0;}
.bildfloat {margin: 3% 3% 0 3%; width: auto; float:left;}
.teamfloat {margin: 2% 3% 0 0; float: left; width:auto;}
.fachfloat {margin: 2% 0 0 0; float: left;}
.impfloat {margin: 0 5% 0 2%; float: left;}
.back {float:right; color:#FFFFFF; background-color:#003261; margin-right:2%;}
.back a:link {font-family: 'Coda Caption', Helvetica, Arial, sans-serif;
font-size:100%; display: -webkit-box-orient:horizontal;
display:block;color:#9ea9be;
text-align:center;padding:1%;
-webkit-transition:all .4s linear;
-moz-transition: all .4s linear;
margin:0;color:#FFFFFF;}
.back a:visited { background-color:#003261; color:#9ea9be;}
.back a:hover, a:active {background-color:#9ea9be;color:#FFF; text-decoration:none;margin:0;}
#logo { text-align:right; margin:2% 1% 1% 0;}