@charset "utf-8";
/*@charset "iso-8859-1";*/


/* ----- IMPORTS ------ */

/*@import url('fonts.css'); optionale lokale Fonts*/
@import url('font-awesome.min.css');
@import url('reset.css');



/* ----- TAG-ELEMENTE ------ */

/* Mobile 
html {*/
	/* Optional keine Tap-Auszeichnung in Safari */
	/*-webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-select: none;
    -webkit-touch-callout:none;*/
	
	/*font-size: 62.5%;
}*/

body {
	font-size: 18px;
	line-height: 1.5;
	color: #fff; /*default #222*/
	font-family: 'Rajdhani', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-weight: 500;
	background-color: #fff;
	/*-webkit-font-smoothing:antialiased;  Safari: Schrift wird dünner */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
	
 	background-image: url(../images/bg-kachel-orange.png); 
}
p { margin:0 0 15px 0; padding:0; } /* default ist margin: 1em 0px */
/*table { max-width: 100%; text-align: left; font-size: 18px; }*/ /* prop Table-Content aus RTEditor, siehe tmplt_2spalten.css */
hr { color:#fff; background-color:#fff; height:2px; margin-bottom:37px; margin-top:10px; border:0; width:100%; text-align:left; 
	display:block;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 550, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.0)));
	/*box-shadow: 10px 10px 30px grey; funzt nicht*/
}

a { color:#fff; text-decoration:none; outline: none; }
a:hover { color:#009cff; text-decoration:none; }

strong { font-weight: 600; } /* Achtung: auch in fonts.php einbetten */

em { /*optional nebst h6 auch italic für Textauszeichnung verwenden*/
	/*color: #e42c2a;*/
	font-style: normal;
	font-family: CamplandLetters, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

h1 {
	font-size:32px;
	line-height:1.4;
	font-weight:500;
	margin-top: -6px;
	margin-bottom:17px;
	letter-spacing:0px;
	/*text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 10px;*/
	/*text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);*/ /*harter Schlagschatten*/

}
h2 { /* Teaser mit CamplandLetters */
	font-family: CamplandLetters, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:24px;
	line-height:1.4;
	font-weight:normal;
	margin-bottom:12px;
	letter-spacing:0px;
}
h2 a { display: block; padding: 1px 0 0 0; } /* Patch prop Campland-Font */

h3 { /* Teaser */
	font-size:22px;
	line-height:1.4;
	font-weight:normal;
	margin-bottom:12px;
	letter-spacing:0px;
}
h4 { /* Slider-Legende */
	font-family: CamplandLetters, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:31px;
	line-height:1.2;
	font-weight:normal;
	margin-bottom:0px;
	letter-spacing:1px;
	color: #009cff;
}
h6 { /* RTEditor-Format «Farbe», möglichst wie body-default. RTEditor » contents.css (und config.js, de.js) */
	font-size: inherit;
	line-height: inherit;
	color: #009cff;
	font-weight: inherit;
}
sup { font-size: 80%; }


/* ----- ID-ELEMENTE MIT ZUGEHÖRIGEN KLASSEN ------ */

/*#containerFnct {}*/

/*#logo { hier nur fnct }*/

#headerBg {
	background-image: url(../downloads/header.png);
	width: 100%;
	height:108px;
	position:absolute;
	top:0;
	left: 0;
	z-index:1;
}
#header {
	width: 100%;
	height:124px;
	position:absolute;
	top:0;
	left: 0;
	text-align: center;
	background-color: rgba(255,255,255,0.1);
	z-index:2;
}

#header img { width: 376px; }
@media only screen and (max-width: 1080px) {
	#header img { width: 34vw; }
}
@media only screen and (max-width: 980px) {
	#header {
		text-align: left;
	}
	#header img {
		margin-left: 4vw;
		margin-top: 1vw;
	}
}



.sliderItem {
	height: 523px !important;
	width: 100%;
	overflow: hidden;
	
	position:fixed;
	top:0;
	left: 0;
	z-index:0;
    background-size:cover;
	background-position: center;
    /*
        background-position: center top 0px; BG-Bild optional kopfbündig !!!!!!!!!!! 
        Bild-CSS für folle Viewport-Breite » CMS_Vorlage/Vorlage/vorlage_slider-styles.html
    */
    background-repeat: no-repeat;
}

#container {
	margin-top: 507px; /* alt 483px*/
	position: relative;
	z-index: 3;
}

#transpBalken { 
	height: 16px;
	background-color: rgba(255,255,255,0.15);
}

#chart {
	min-height:354px;
	background-image: url(../images/bg-kachel-orange.png); /* fallback für dynamischen BG */
	/*background-color: #f0f;*/
	/*background-attachment: fixed;*/
}

#claim {
	font-family: CamplandLetters, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	min-height: 50px;
	background-color: rgba(255,255,255,0.2);
	margin-bottom: 44px !important;
	text-align: center;
}



.reiheFlex { /* horizontales section-parent mit flex mit float-fallback */
	background-color: rgba(255,255,255,0.9);
	text-align: left;

	
	/* für float-fallback: Ersatz für clear:both;*/
	overflow: auto;
	overflow-y:hidden; /* Patch Safari */
	width: 100%;

	display: flex;
	justify-content: space-between;
}


/*#footer {
	margin: 18px auto 0 auto;
	width:900px;
}*/



/* Zu top scrollen */
#back-top {
	position: fixed;
	left: -1px;
	bottom: 23px;
	margin:auto;
	display: none;
    z-index: 99999 !important;
}
#back-top span { 
	font-family: 'Lato', 'Courier', sans-serif; 
	font-weight: 400;
	font-size:70px; /*Mobile 140px*/
	line-height:1;
	color: white;
	display: block;
	transform: rotate(-90deg);
	background-color:rgba(255,255,255,0.2);
	padding: 0 7px 0px 7px; /*Mobile 0 14px 0px 14px;*/
}
#back-top span:hover { color: #009cff; }



/* ----- FORM-VALIDIERUNG ----- */

.rahmenRotForm { border: 1px solid #ff0000; }
.txtRotForm { color:#ff0000; display:block; }



/* ----- ALLGEMEINE KLASSEN ----- */

/* Bild 100% gross. Klasse für img-Tag! */
.imgResponsive {
	max-width: 100%;
	margin: 0;
  	border: 0;
  	vertical-align: middle;
	/*width:2000px;*/ /* Falls parent grösser als Bild */
}

/* Layout generisch */
.visible { visibility:visible; }
.hidden { visibility:hidden; }

.inline { display:inline-block; }
.block { display:block; }
.none { display:none; }

.left { float:left; }
.right { float:right; }
.clear, .clearfix:after { clear: both; content: ""; display: table; }
.clearOhneClear { 
	overflow: auto;
	overflow-y:hidden; /* Patch Safari */
	width: 100%;
}

.bb { /* padding nach innen */
    box-sizing: border-box;
	/*-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;*/
}

.uppercase { text-transform: uppercase; }


.fluideMaskeProportional { padding-bottom: 51%; height:0; display:block; overflow:hidden; position:relative; } /* z.B. padding-bottom für die Höhe in Prozent der Elementbreite, z.B. 51% für die Proportion 588zu300 */

.fussbuendig { display: table-cell; vertical-align: bottom; }/* Fussbündig. ACHTUNG: funzt nur ohne float */
.vEingemittet { /* Vertikal einmitten, zentrieren */
	position: absolute; /* oder relative */
	top: 50%;
	transform: translateY(-50%);
	/*-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);*/
}
/* Alternative: .vEingemittet { display: table-cell; vertical-align: middle; }*/ /* Vertikal einmitten. ACHTUNG: funzt nur ohne float, sonst .vEingemittet */


.containerEinmitten { /* ACHTUNG: body muss height und width mit 100% haben */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -447px;
	margin-top: -273px; 
}


/* Text-Pfeil. Alternativ mit css-before oder -after mit Zeichen "›" oder mit FA fa-angle-right bzw. &#xf105; siehe unten «.icon::before» */
.linkTextPfeil { font-size:32px; line-height:1px; vertical-align:-2px; font-family:'Lato', 'Courier', sans-serif; font-weight: 400; }
.linkTextPfeilH1 { font-size:59px; line-height:1px; vertical-align:-5px; font-family:'Lato', 'Courier', sans-serif; font-weight: 300; }

.pfeilNachUnten { /* FA fa-angle-up bzw. &#xf106; oder fa-angle-down bzw. &#xf107; */
	font-size: 189px;
	font-weight: 300;
	font-family: 'Lato', Courier, sans-serif; 
	line-height:1px;

	transform: rotate(90deg);

	padding-bottom: 46px; /* ca. 1/4 font-size */
	display: inline-block;
	margin: 0;
}

.rotate90 {
    transform: rotate(90deg);
	/*-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);*/
}


/* Font Awesome vorangestellt */
.iconKlein::before {
	display: inline-block;
	margin-right: .5em;
	font: normal normal normal 29px/1 FontAwesome;
	/*font-size: inherit;*/
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}
.icon::before {
	display: inline-block;
	margin-right: .5em;
	font: normal normal normal 29px/1 FontAwesome;
	/*font-size: inherit;*/
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}


/* konventionelles Icon mit Grafik:
#chart a:after {
    display: inline-block;
    content: url('../images/pfeil.png');
    width: 49px;
    height: 49px;
}
*/

/* Schliessen-Kreuz mit Zeicheb «×» in Klasse <a> */
.schliessenKreuz {
	font-family: helvetica, arial, sans-serif;
  	font-size:39px; 
	line-height: 1;
  	color:#9c9e9f;
  	text-decoration: none;
  	text-shadow: 0 1px 0 #fff;
	display: inline-block;
	/* text-align: right; muss auf parent liegen*/
}
.schliessenKreuz:after {
  content: '×'; /* UTF-8 Kreuz-Symbol */
}



/* Video-iFrame. Erf. feldCopt.. und feldDopt.. */
.videoContainer {
	position: relative;
    width: 100%;
	margin-top: 3px;
	
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ANFANG Sprite-Button */
/*.btnSprite {
	padding:2px 0;
	height:19px;
	width:132px;
	text-align:center;
	background-image:url(../images/btnSprite.png);
	background-size:28px 42px;
}
.btnSprite:hover {
	background-position: 0 -19px;
}
.btnSprite a {
	line-height:18px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	display:block;
}
.btnSprite a:hover {
	color:#00ffff;
}*/
/* ENDE Sprite-Button */

/* ANFANG Div-Tabelle */
/*.divTblReihe {
	width: 670px; 
	padding:0; 
	margin: 0;
	overflow: hidden; 
}
a:hover .divTblReihe p { color:#ff0000; }
.tabellenZelle {
	float: left; 
	padding:3px 0;
	margin: 0;
	color:#333;
}

.breiteZelle1 { width: 105px; }
.breiteZelle2 { width: 75px; }
.breiteZelle3 { width: 160px; }
.breiteZelle4 { width: 330px; }

.divTblTrennlinie { height:2px; margin:11px 0; }*/
/* ENDE Div-Tabelle */


/* ANFANG PDF-Link */
/*.pdfLinkMitLi ul { 
	margin-left:0;
	padding-left:0;
	list-style:none;
}
.pdfLinkMitLi li {
	color:#fff;
	line-height:21px;
	padding:0 0 0 17px;
	margin:0;
	background: url(../images/pdfIcon.png) 0 3px no-repeat;
}
.pdfLinkMitLi li a { color:#f00; }
.pdfLinkMitLi li:hover { background: url(../images/pdfIconOver.png) 0 3px no-repeat; }

.pdfLinkMitLi li a:hover { color:#fff; }*/
/* ENDE PDF-Link */


.eckenRunden {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	-khtml-border-radius:12px;
	border-radius: 12px;
	overflow:hidden;
}
/*
.eckenRundenOben {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	overflow:hidden;
}
.eckenRundenUnten {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	overflow:hidden;
}
.randUnten { border-bottom:3px groove #919898; } 
*/

.textSchatten { text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5); }
.textSchattenHart { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }
.txtGluehen { text-shadow: 0 0 0.2em #fff, 0 0 0.1em #fff; }
.boxSchatten { box-shadow: 0px 0px 30px grey; }



/* ANFANG Animation */
.schwebeReinKlasse { 
	animation: schwebeRein 1.9s; /* Totale Timeline-Dauer */
	animation-fill-mode: forwards;  
}

@keyframes schwebeRein {
	0% { /* Keyframe-Position in Timeline. Hier ein Delay, weil bis 60% nichts passiert. */
		opacity: 0;
		transform: translate(0, 30px) scale(1, 0.5); /* Achtung: hier müssen schon ALLE Eigenschaften rein, auch wenn sie erst später benötigt werden */

	}
	50% { /* Keyframe-Position in Timeline, z.B. für ein Delay */
		opacity: 0.0;
		transform: translate(0, 30px) scale(1, 0.5);

	}
	100% { /* Keyframe-Position in Timeline, Endzustand */
		opacity: 1;
		transform: translate(0px, 0) scale(1, 1); /* x und y-Position*/

	}
}
/* ENDE Animation */






/* ANFANG Browser-Patches */
/*.ie8imgPatch { max-width: none; }
.androidUmbruchPatch { background-image: url(../images/shim.gif); }*/
/* ENDE Browser-Patches */



/* 	ALLGEMEINE MEDIA QUERIES
====================================================================== */
/*@media (-Webkit-min-device-pixel-ratio: 1.5),
 (-moz-min-device-pixel-ratio: 1.5),
 (-o-min-device-pixel-ratio: 3/2),
 (min-device-pixel-ratio: 1.5),
 (min-resolution: 1.5dppx) {
	 .meineKlasse {
		 display: block;
	 }
 }
 
@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 980px) {}*/

@media screen and (orientation: landscape) {}