/* --- SCHMUCKFARBEN --- */

/* Siehe common.css, dito fontawesome- und reset-css. Grautöne und rot siehe zuunterst in masse.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: 16px;
	font-size: clamp(15px, 1.6vw, 18px);
	
	line-height: 1.5;
	-webkit-font-smoothing:antialiased; /* Safari: Schrift wird dünner */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
}
p { margin:0 0 15px 0; padding:0; } /* default ist margin: 1em 0px */
/*table { max-width: 100%; text-align: left; font-size: 20px; }*/ /* prop Table-Content aus RTEditor, siehe tmplt_2spalten.css */

hr { height:1px; margin-bottom:7px; margin-top:7px; border:none; width:100%; text-align:left; 
	/*Verlauf:*/
	display:block;
    /*background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 550, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.0)));*/
	/*dotted:
	border-top:1px dotted #f00;*/
}



h1 {
	font-size:36px;
	line-height:1.2;
	margin-top: 0px;
	margin-bottom:16px;
	/*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*/
}
table h1 { /* prop Become a member » faor */
	margin-bottom:6px;
}
h2 { 
	font-size:19px; /* auf home 14px und sonst? */
	line-height:1.5;
    margin-top: -3px; /* Test, damit mit p bündig: -3px statt 0px */
	margin-bottom:11px;
	/*letter-spacing:0px;*/
}
h3 { 
	font-size:46px;
	line-height:1.2;
    margin-top: -3px; /* Test, damit mit p bündig: -3px statt 0px */
	margin-bottom:19px;
	/*letter-spacing:0px;*/
}
@media only screen and (max-width: 1070px) {
	h3 { 
		font-size:40px;
		margin-bottom:15px;
		line-height:1.2;
	}
}
@media only screen and (max-width: 970px) {
	h3 { 
		font-size:30px;
		margin-bottom:11px;
		line-height:1.2;
	}
}
/*h3 { font-size: clamp(27px, 3.2vw, 44px); }*/ /* optional »daus */


/*iframe { width: 100% !important; max-width: 100%; }*/ /* prop iframe-Content aus RTEditor. Allenfalls entfernen: width: 100% !important; */

p { margin:0 0 15px 0; padding:0; } /* default ist margin: 1em 0px */

table { width: 100% !important; max-width: 100%; text-align: left; border: none; } /* prop Table-Content aus RTEditor. Allenfalls entfernen: width: 100% !important; */
/*table td { padding: 0.8rem !important; }*/ /* Mobile: Table-Content aus RTEditor */

sup { font-size: 80%; }



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

/* Google-Translate-Bar */
/*.headerTopTranslBtn { top: 38px !important; }
header {
	transition: all 0.3s ease-out;
}*/


/*#containerFnct {}*/ /* Bsp. Namenskonvention */

#header {
	width: 100%;
    min-width: 580px; /* Desktop-Safari-Min.: 560px */
	text-align: center;
	color:inherit;
	
    /*background-color: rgba(255,255,255,0.33);
    background-color: rgba(0,0,0,0.23);*/    
	background-color:#fff;
	opacity: 0.95;
    
	position:absolute;
	top:0;
	left: 0;    
	z-index:4;
}
#header a {
	color:inherit;
}
#header a:hover {
	color:inherit;
}
#header h2 {
	color:inherit;
	margin-bottom:3px;
}
#logo {
	/* responsive-Styles » navigation.css */
    
    margin-top: 12px;
    transition: all .2s ease-out; 
    transform-origin: left;

    position: relative;
    z-index: 9;
}
/*#logo img {
	 width » inline Style 
}*/
#logoSchmal { 
    display: none;
    
    margin-top: 12px;
    transition: all .2s ease-out; 

    position: relative;
    z-index: 2;
}
#logo #claim {
	font-size: 20px;
	font-family: 'Nunito Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;  
	text-align: right;
	margin: 0;
	color: #039b9d;
}
#logo h1 {
	margin: 28px 0 3px 0;
	line-height: 1;
   	font-size: 29px;
}

/*#logoAbsolute {
    width: 192px;
    transition: all .4s ease-out; 
    
    top: 7px;
    position: absolute;
    z-index: 10;
}
@media only screen and (max-width: 1080px) {
    #logoAbsolute {
        width: 171px;
        top: 14px;
    }
}
@media only screen and (max-width: 840px) {
    #logoAbsolute {
        width: 141px;
        top: 19px;
    }
}*/

.adressen { line-height: 1.5; margin-top: 11px; }


/*
optional » ossu
#headerBgWeiss {
	width: 100%;
	height:132px;
	position:absolute;
	top:0;
	left: 0;
    background-color: rgba(255,255,255,0.9);
	z-index:1;
}
#headerBgGruen {
	width: 100%;
	height:50px;
	position:absolute;
	top:132px;
	left: 0;
	background-color:rgba(157,201,050,0.85);
	z-index:2;
}*/


#container {
	margin-top: 632px; /* 530px oder default 632px bzw. calc(632px + 40px) »clty. Fullscreen 100vh. ovrt tmplt....php bei #container: mit Slider 632, ohne Slider: 245 */
	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.png);*/ /* fallback für dynamischen BG */
	/*background-color: #f0f;*/
	/*background-attachment: fixed;*/
}

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

#filterNavi {
	font-family: 'Nunito Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 13px; /* Fallback */    
	font-size: clamp(13px, 1.7vw, 18px);
}


/* alt aus » faor-Vorlage. Neu in common */
/*.reiheFlex {
	background-color: rgba(255,255,255,0.9);
	text-align: left;

	
	overflow: auto;
	overflow-y:hidden;
	width: 100%;

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


/*#footer {
	margin: 18px auto 0 auto;
	width:900px;
}*/
/*#footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	min-height: 27px;
	text-align: center;

	line-height: 1.4 !important;
	background-color:rgba(255,255,255,0.7); 
	z-index: 10 !important;
}*/
@media only screen and (max-width: 980px) {
   #footer { font-size: 14px; }
}
@media only screen and (max-width: 940px) {
   #footer { font-size: 13px; }
}
#footer a { color: #fff; }
#footer a:hover { text-decoration:underline; }
#footerContent {
    /*border-top: 2px solid #039b9d;*/
    padding: 5px 0px;
    /*background-color: rgba(0,0,0,0.1);*/
	/*background-color: rgba(255,255,255,0.8);*/
    margin: auto;
}



/* 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: 300;
	font-size:70px; /*Mobile 140px*/
	line-height:1;
	color: #adadad;
	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: inherit; }
#back-top a:hover { text-decoration: none; }




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


/* Text-Pfeil. Alternativ mit css-before oder -after mit Zeichen ‹› bzw. "<span class="pfeil">›</span>" oder mit FA fa-angle-right bzw. &#xf105; siehe unten «.icon::before» */
.pfeilKlein { font-size:31px; line-height:1px; vertical-align:-3px; font-family:'Lato', 'Courier', sans-serif; font-weight: inherit; text-decoration:none; display:inline-block; }
.pfeil { font-size:1.9em; line-height:1px; vertical-align:calc(-0.1em + 0.5px); font-family:'Lato', 'Courier', sans-serif; font-weight: inherit; text-decoration:none; display:inline-block; }
.pfeilGross, .pfeilH1 { font-size:40px; line-height:1px; vertical-align:-3px; font-family:'Lato', 'Courier', sans-serif; font-weight: inherit; text-decoration:none; display:inline-block; }

.filsonPfeil { /* SPEZ */
    font-weight: 300;
    font-size: clamp(25px, 2.6vw, 30px);
    line-height: 0;
    vertical-align: -2px;
}

/*.pfeilNachUnten {
	font-size: 50px;
	font-weight: 300;
	font-family: 'Lato', Courier, sans-serif; 
	line-height:1px;

	transform: rotate(90deg);

	padding-bottom: 29px;
	display: inline-block;
	margin: 0;

    transform: rotate(90deg);
    transform-origin: 40% 29%;
	transition: all 0.3s ease-out;
}*/
.pfeilNachUnten { /* FA fa-angle-up bzw. &#xf106; oder fa-angle-down bzw. &#xf107; */
	font-size: 50px;
	font-weight: 300;
	font-family: 'Lato', Courier, sans-serif; 
	line-height:0;

	padding: 0 14px 11px 0; /* rechts ist top und unten ist left */
	display: inline-block;
    
    transform: rotate(90deg);
    /*transform-origin: 40% 29%;*/ /* Achse zentrieren */
	/*transition: all 0.3s ease-out;*/    
}

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

	transform: rotate(-90deg);

	padding-bottom: 12px; /* horizontaler Versatz. Top-Abstand: .mt in Parent-div. */
}
.pfeilNachObenAccUp { /* FA fa-angle-up bzw. &#xf106; oder fa-angle-down bzw. &#xf107; */
	font-size: 68px;
	font-weight: 300;
	font-family: 'Lato', Courier, sans-serif; 
	line-height:1px;

	transform: rotate(-90deg);

	padding-bottom: 32px; /* horizontaler Versatz. Top-Abstand: .mb in Parent-div. */
	display: inline-block;
	margin: 0 0 0 12px;
}
.accordionInhalt {
	display:none;
}
/*.accordionInhalt h2 {  }*/
.accordionClose {
	margin:19px 0 0 6px;
	width:100px;
	height:23px;
}

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


/* FontAwesome ff 
» fontawesome.min.css
*/


/*alte Logik mit FA v4.7
.iconKlein::before {
	display: inline-block;
	margin-right: .5em;
	font: normal normal normal 29px/1 FontAwesome;
	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 49px/1 FontAwesome;
	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 */
}


/* 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 {
	border-radius: 14px;
	overflow:hidden;
}
.eckenRundenHalb {
	/*border-radius: 7px;
	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) {}