@charset "utf-8";



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


/*@import url('fontawesome.min.css'); v6 Free */
/*@import url('fontawesome.min_regular.css');*/
/*@import url('fontawesome.min_ohne_brands.css');*/
@import url('font-awesome.min.css?rdm=1');/* v4.7, leichter »tasy */
/*@import url('bootstrap-icons.css');*/
@import url('reset.css');
/*@import url('fonts.css'); optionale lokale Fonts*/



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

.txt { color:#87a800; } /* default */
.txtOrange { color: #ec7331; }
.txtGruen { color: #87a800; }
.txtGruenI { color: #87a800!important; }
.txtDunkelgruen { color: #548c0b; }
.txtBraun { color: #cc9966; }
.txtBraunI { color: #cc9966!important; }

.bg { background-color: #F3ECE8; } /* default */
.bgOrange { background-color: #ec7331; }
.bgOrange95prz { background-color: rgba(236,115,49,0.95); } /* = #ec7331 bei 100alpha wie Header. */
.bgGruen { background-color: #91b72f; } /* Footer */
.bgSand { background-color: #F3ECE8; } /* Chart */
.bgBeige { background-color: #F8F4F2; } /* Browser-BG-Weiss */

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



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

a { color:#87a800; text-decoration:none; outline: none; }
a:hover { color:#cc9966; text-decoration:none; }


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: #87a800 !important;
	font-weight: inherit;
}
h6 a:hover { text-decoration: underline; }


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

em, em a { font-style: normal; color: #87a800 !important; } /* nebst h6 auch italic für Textauszeichnung verwenden. Achtung: i-Tag dient FA. */
em a:hover { text-decoration: underline; }



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

/* » bren */
#cookiedingsbums {
    /*padding: 20px 20% 20px 0;*/
    width: 100%;
    color: inherit;
    font-size: 14px; /* Mobile » ovrt 3.1rem*/
    line-height: 1.6;
    
    padding-top: 3px;
    position: fixed;
    left: 0 !important;
    bottom: 0;
    opacity: 0.85;
    background-color:#CFCFCF; /* .bgHellgrau */
    
    z-index: 11;
}
#cookiedingsbums a { color: inherit; text-decoration: none; }
#cookiedingsbums a:hover { color: #87a800; text-decoration: underline; }
#cookiedingsbumsClose {
   cursor:pointer;
    font-weight: 400 !important;
    background-color:rgba(233,233,233,0.60);
    padding: 2px 3px 0px 3px;
    /*margin-top: 9px;*/
    display: inline-block;
    color: black;
    
    /*font-family: sans-serif; 
    font-size: 25px;*/ 
    line-height: 1;
}
#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 */
}
.imgResponsiveObjectFit { /* bei height 100% proportional richtige Breite */
	max-width: 100%;
	/*margin: 0;*/
  	border: 0;
  	vertical-align: middle;
	object-fit: cover;
}
.imgResponsiveUpscale {
	max-width: 100%;
	/*margin: 0;*/
  	border: 0;
  	vertical-align: middle;
	width:3000px; /* Falls parent grösser als Bild. Evtl. auch .w100prz */
}

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

.inline { display:inline; }
.inlineBlock { display:inline-block; }
.block { display:block; }
.none { display:none!important; }

.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;
	/*justify-content: space-around;*/
}
.reiheItemGleicheBreite {
	display: flex;
  	flex-direction: column;
  	flex-basis: 100%;
  	flex: 1;
}
.reiheItemGleicheBreite img { /* optional stretch auf Bildern */
	align-self: start;
	flex-shrink: 0; /* Patch für IE 11 */
}

.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; }
.wortNoBreak { white-space: nowrap; }

/* 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; } /* proportionale Höhe: 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 */
.fussbuendigFlex { align-self: flex-end; } /* in flex-child */

.zentriert { /* v und h zentriert */
	display: flex;
  	justify-content: center;
  	align-items: center;	
	
	width: 100%;
	height: 100%;
	/*object-fit: cover;*/ /* nur für Bilder? */
}
.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 verwenden */


/* 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); }


/* Middle Dot · */
.middleDot {
    font-size: 33px;
    display: inline-block;
    vertical-align: text-bottom;
    line-height: 11px;
}


.ulStyleEinspaltigCentriert ul {
    text-align: center;
    list-style: inside;
}



/* 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; }