@charset "UTF-8";

/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../_fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
       url('../_fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-100italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../_fonts/montserrat-v12-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin Italic'), local('Montserrat-ThinItalic'),
       url('../_fonts/montserrat-v12-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../_fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
       url('../_fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../_fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
       url('../_fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-200italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('../_fonts/montserrat-v12-latin-200italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight Italic'), local('Montserrat-ExtraLightItalic'),
       url('../_fonts/montserrat-v12-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-200italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-200italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-300italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../_fonts/montserrat-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light Italic'), local('Montserrat-LightItalic'),
       url('../_fonts/montserrat-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-300italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../_fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../_fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../_fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('../_fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../_fonts/montserrat-v12-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Italic'), local('Montserrat-Italic'),
       url('../_fonts/montserrat-v12-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../_fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
       url('../_fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../_fonts/montserrat-v12-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
       url('../_fonts/montserrat-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../_fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('../_fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../_fonts/montserrat-v12-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold Italic'), local('Montserrat-SemiBoldItalic'),
       url('../_fonts/montserrat-v12-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-600italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../_fonts/montserrat-v12-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
       url('../_fonts/montserrat-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../_fonts/montserrat-v12-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
       url('../_fonts/montserrat-v12-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../_fonts/montserrat-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black'), local('Montserrat-Black'),
       url('../_fonts/montserrat-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-900italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../_fonts/montserrat-v12-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black Italic'), local('Montserrat-BlackItalic'),
       url('../_fonts/montserrat-v12-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-900italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../_fonts/montserrat-v12-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraBold Italic'), local('Montserrat-ExtraBoldItalic'),
       url('../_fonts/montserrat-v12-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/montserrat-v12-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/montserrat-v12-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/montserrat-v12-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/montserrat-v12-latin-800italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/*
#0f1821 ganz dklblau
#022c43 dklblau, Buttons binhier
#066194 mittelblau
#ffae00 gelb
#EEEEEE bg
*/

/* === S E I T E ======================================================================== */

body, html {
	font-family:Montserrat, Arial, Verdana, sans-serif;
	margin:0;
	border:0;
	height:100%;
}

header {
	position:relative;
	width:100%;
	height:250px;
	/*background-image:url(../_i/kopf-de.jpg);
	background-repeat:no-repeat;
	background-position:0 80px;*/
	background-color:#000;
	border-bottom:#FFF solid 1px;
	margin:0;
	padding:0;
}

#logo {
	height:80px;
	background-color:#ffae00;
	border-bottom:#FFF solid 1px;
}

#logo img {
	height:100%;
	width:auto;
}

main {
	width:100%;
	height:calc( 100% - 320px ); /* die 320 scheinen sich aus den 250 für die header-Höhe + 70 für was???? [line-height ul?] zu rechnen */
}

#contentLi, #contentRe, #content {
	/* Diese Konstruktion (Zeile 1-4) schafft es, dass die Hintergrundbilder immer bis zum unteren Fensterrand reichen. */
	min-height: 100%;
	height:auto !important;
	height:100%;
	margin:auto;
	float:left;
}

#contentLi {
	background-image:url(../_i/bg-content-links.jpg);
	background-repeat:no-repeat;
	padding:40px 20px 30px 20px;
	width:437px;
	border-right:1px solid #FFF;
}

#contentLi.farbig {
	background-image:url(../_i/bg-content-links-c.jpg);
}

#contentRe {
	background-image:url(../_i/bg-content-rechts.jpg);
	background-repeat:no-repeat;
	background-color:#EEE;
	padding:20px 20px 50px 20px;/* die 50, damit der bg bis unten geht. Warum? */
	width:calc( 100% - 518px );/* 437 Breite contentLi + 80 für padding (re+li) + 1px Linie */
}

#contentRe.farbig {
	background-image:url(../_i/bg-content-rechts-c.jpg);
}

#contentRe img {
	width:100%;
	height:auto;
}

#contentRe.klein {
	text-align:center;
}

#contentRe.klein img {
	width:70%;
	height:auto;
}

#contentRe.farbig {
	background-image:url(../_i/bg-content-rechts-c.jpg);
}

#contentRe.datenschutz {
	padding:40px 20px 20px 20px;
}

#content {
	width:calc( 100% - 40px - 1px );/* der 1 ist für die senkrechte weiße Linie */
	background-image:url(../_i/bg-content-kplt.jpg);
	background-repeat:no-repeat;
	background-color:#FFF;
	padding:40px 20px 30px 20px;
}

.blockLi {
	float:left;
	width:437px;
	padding:0 20px 0 0;
}

.blockRe {
	float:left;
	width:calc( 100% - 519px );/* 437 Breite contentLi + 80 für padding + 1px Linie*/
	padding:0 20px 0 20px;
	/*background-color:#EEE;*/
	text-align:center;
}

.blockRe img {
	width:100%;
	max-width:360px;
	height:auto;
	margin-top:20px;/* Kompensation h1 */
}

/* === KOPF-ANIMATION aus Adobe Animate, angepasst ======================================================================== */

#canvas {
	position: absolute;
	display: block;
	width:100%;
	overflow:hidden;
}

#dom_overlay_container {
	pointer-events:none;
	overflow:hidden; 
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width:100%;
	max-width:100%;
	height:169px;
}

#animation_container {
	width:100%;
	height:169px;
	margin:0;
	padding:0;
	overflow:hidden; 
	border-bottom:#FFF solid 1px;
}

/* === T O O L S ======================================================================== */

.umbruch {
	clear:both;
}

.linie {
	clear:both;
	padding-top:15px;
	border-bottom:#066194 dotted 1px;
}

/* === S P E Z I A L ======================================================================== */

#sprachen {
	margin:20px 0 0 2px;
}

/* === N A V I ======================================================================== */

nav {
	height:40px;
}

nav ul {
	position:absolute;
	left:0;
	bottom:0;
	margin:0;
	padding:0;
	line-height: 40px;
}

nav ul li {
	/*display:inline;*/
	float:left;
	text-align:center;
	background-color:#066194;
	border-right:1px solid #FFF;
	border-top:1px solid #FFF;
	list-style: none;
	
	font-size:0.75em;
	font-weight:700;
	color:#FFF;
	padding:0 20px 0 20px;
	margin:0;
}

nav ul li a, nav ul li a:visited {
	display: block;
	margin: 0;
	height: 100%;
	text-decoration:none;
	color:#FFF;
	/*transition: background-color .20s ease-out;*/
}	

nav ul li:hover {
	/* nicht »nav ul li a:hover«: dann wird nur der Text ohne padding gehighlightet. */
	/*display: block;*/
	background-color:#ffae00;
	text-decoration:none;
}

nav ul li a:hover {
	color:#FFF;
	text-decoration:none;
}

nav #binhier, nav #binhier:hover {
	display: block;
	color:#FFF;
	/*border-top: 1px dotted #DDD;*/
	background-color:#022c43;
}

nav ul li:last-of-type {
	border-top-right-radius:10px;
}

/* === T Y P O ======================================================================== */

p {
	font-size:0.9rem;
	font-weight:400;
	line-height:130%;
	margin-bottom:0.2rem;
}

p.laut {
	font-weight:600;
}

p.neg {
	color:#FFF;
}

#contentRe p {
	margin:0;
}

#contentRe p:last-of-type {
	margin-bottom:20px;
}

a, a:visited {
	color:#066194;
	text-decoration:none;
}

a:hover {
	color:#066194;
	text-decoration:underline;
}

logo {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
	font-size: 1em;
}

ausz {
	font-style: italic;
}

/* ------------------------------------------------------------------------------------- */

h1 {
	font-size:1.2rem;
	font-weight:700;
	color: #003271;
	margin-top:0;
}

h2 {
	font-size:1rem;
	font-weight:600;
	color: #003271;
	margin-top:30px;
}

.blockLi h2 {
	font-size:2rem;
	font-weight:300;
	margin:10px 0 0 0;
}

h3 {
	font-size:0.9rem;
	font-weight:600;
	color: #000;
	margin:10px 0 4px 0;
}

h4 {
	font-size:0.9rem;
	font-weight:300;
	color: #000;
	margin:15px 0 0 0;
}

/* ------------------------------------------------------------------------------------- */

ul {
	margin:20px 0 0 0;
	padding:0;
	list-style-position:inside;
}

ul li {
	list-style-image:url(../_i/eck-re-blau.svg);
	margin:0 0 5px 2px;
	padding:0;
	font-size:0.9rem;
	font-weight:600;
	
}

#contentRe.datenschutz ul li {
	list-style-image:url(../_i/eck-re-schw.svg);
	font-weight:400;
}

#contentRe.datenschutz ul li:first-of-type {
	margin-top:-15px;
}


/* ==================================================================================== */
/* === S M A R T ====================================================================== */
/* =========== ======================================================================== */


@media screen and (max-width:740px) {
/* fast 1-spaltig: Fenster zu schmal */

.blockLi, .blockRe {
	float:none;
	text-align:left;
	width:100%;
	max-width:437px;
	margin:0;
	padding:0;
}

.blockLi img, .blockRe img {
	width:100%;
	max-width:100%;
}

#contentLi, #contentRe {
	float:none;
	width:calc( 100% - 40px - 1px );/* der 1 ist für die senkrechte weiße Linie */
}

#contentRe.klein img {
	width:100%;
}

}

@media screen and (max-width:440px) {
/* 1-spaltig: Smartphone */

header {
	background-image:none;
	height:calc( 160px + 17vw );
}

nav ul {
	width:100%;
}

nav ul li {
	/*display:inline;*/
	float:none;
	border-right:none;
}

nav ul li:last-of-type {
	border-top-right-radius:0;
}

#logo {
	height:17vw;
}

#logo img {
	width:97%;
	height:auto;
	margin-top:0;
}

#canvas {
	display:none;
}

#animation_container {
	display:none;
}

}