@charset "utf-8";



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

@import url('fontawesome.min.css');
/*@import url('fontawesome.min_regular.css');*/
@import url('reset.css');
/*@import url('fonts.css'); optionale lokale Fonts*/



/* ----- SCHMUCKFARBEN ----- */

.txt { color:#615652; } /* default */
.txtGruen { color:#85bb00; }
.txtBlau { color:#25509f; }
.txtSand { color:#f6f2ed; } /* #f6f2ed oder #fcfcf5 */
.txtBraun { color:#615652; }
.txtSilber { color:#e5e5e5; } /* entspricht 10% schwarz */

.bg { background-color:#9dc932; } /* default */
.bgGruen { background-color:#9dc932; } /* RGB rgba(157,201,050,1) */
.bgGruen60prz { background-color:rgba(157,201,050,0.6); } /* RGB  */
.bgBlau { background-color:#25509f; }
.bgSand { background-color:#f6f2ed; } /* #f6f2ed oder #fcfcf5 */
.bgBraun { background-color:#615652; }
.bgBody { background-color:#fafaf5; }
/*.bgSand { background-color:#efeae5; }*/ /* ff-Ton */

.bgSilber { background-color:#e5e5e5; } /* entspricht 10% schwarz */
.bgGrau90prz { background-color: rgba(222,222,222,0.9); }

/* Grautöne und rot siehe zuunterst in farben_masse.css bzw. farben_masse_mobile.css */



/* ----- BASIC TAGS ----- */

a { color:#85bb00; text-decoration:none; outline: none; }
a:hover { color:#25509f; text-decoration:none; }


h1 {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:300; /* light 300, regular400 */
    color: #25509f;
}
h2 { 
	font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;    
	font-weight:400; /* light 300, regular400 */
    color: #85bb00;
}
h3 { 
	font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;    
	font-weight:400; /* light 300, regular400 */
    color: #85bb00;
}

h6, h6 a { /* eigenes CKEditor-Format: z.B. «Farbe». In CKEditor anpassen » contents.css, config.js, de.js, icons_hidpi.png) */
	font-size: inherit;
	line-height: inherit;
	color: #85bb00;
	font-weight: inherit;
}
h6 a:hover { text-decoration: underline; }


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

em, em a { font-style: normal; color: #85bb00 !important; } /* optional nebst h6 auch italic für Textauszeichnung «Farbig» verwenden. Achtung: i-Tag dient FA. */
h2 em { color: #25509f !important; } /* optionale Ausnahme. Achtung: i-Tag dient FA. */
em a:hover { text-decoration: underline; }

hr { color:#85bb00; background-color:#85bb00; }

td { vertical-align: top; }



/* prop tmplt foet: helle Schrift auf dunklem Hintergrund */	
.invers { 
	color: #fff; 
	background-color: #25509f;
}
.invers a { color: #fff; }
.invers a:hover { color: #fff; text-decoration: underline; }
.invers h1 { color: #fff; }
.invers h2 { color: #85bb00; }
.invers h6 { color: #fff; }
.invers em { color: #fff; }



/* ----- ID-TAGS ----- */

/* » bren */
#cookiedingsbums {
    padding: 20px 20% 20px 0;
    width: 100%;
    color: inherit;
    line-height: 1.6;
    text-align: center;
    background-color: rgba(255,255,255,0.9);
    position: fixed;
    left: 0 !important;
    bottom: 0;
    z-index: 999999;
}
#cookiedingsbums a { color: #42bccb !important; }
#cookiedingsbumsClose {
   cursor:pointer;
    font-weight: bold !important;
    background-color:rgba(233,233,233,0.90);
    padding: 2px 5px 2px 5px;
    color: #42bccb;
    
    /*margin-top: 8px;
    display: block;
    color: inherit;*/
}
#cookiedingsbumsCloseKreuz {
    cursor:pointer;
    font-weight: normal !important;
    padding: 0px 4px 2px 4px;
    margin-top: 0px;
    display: inline-block;
    color: black;
    background-color:rgba(233,233,233,1);

    font-family: sans-serif; 
    font-size: 18px; 
    line-height: 1;
    /*line-height: 0;*/
}


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

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



/* ----- SHOP ----- */

.mr1_5prz { margin-right:1.5%; } /* prop Mobile Checkout */

.ml1_5prz { margin-left:1.5%; } /* prop Mobile Checkout */



/* ----- 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; }
.inlineBlock { display:inline-block; }
.block { display:block; }
.none { display:none; }

.tal { text-align: left; }
.tar { text-align: right; }
.taj { text-align: justify; }
.tac { text-align: center; }
.tac ul {
    text-align: center;
    list-style: inside;
}

.reiheFlex { /* horizontales section-parent mit flex mit float-fallback */
	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;
}

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

.rel { position: relative; }
.abs { position: absolute; }
.fix { position: fixed; }

.z0 { z-index: 0; }
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z9999 { z-index: 9999; }
.zDebug { z-index: 999999; }


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

.uppercase { text-transform: uppercase; }

/* justifiy für nur 1 Zeile*/
.justifyEineZeile { text-align:justify; text-align: center; }
.justifyEineZeile div { display: inline-block; }

.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 */

.linksbuendig { margin: auto auto auto 0; }
.rechtsbuendig { margin: auto 0 auto auto; }

.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%);
	
	/* zusätzlich auch horizontal eingemittet */
	/*left: 50%;
	transform: translateX(-50%);*/
	/*-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);*/
}
.vEingemittetCell { display: table-cell; vertical-align: middle; } /* Vertikal einmitten. ACHTUNG: funzt nur ohne float, sonst .vEingemittet */


/* Aufzählungszeichen anschmiegen */
.ulStyleEinspaltigCentriert ul {
    text-align: center;
    list-style: inside;
}

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

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


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



/* Alerts */
.txtRotForm { color:red !important; }
.rahmenRotForm { border: 1px solid red !important; }

/* Debug */
.pm0i { padding:0 !important; margin:0 !important; } /* zum Debugen mit background-color:#f0f !important; border: 1px solid pink !important; */
.mai { margin:auto !important; }
.taci { text-align:center !important; }