@charset "utf-8";



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

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



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

.txt { color:#424242; } /* default */
.txtGruen { color: #000000; } /* H6 und em */
.txtHellgrau { color: #E9E9E9; } /* hr */
.txtGrau { color: #B1B3B3; } /* Navi */
.txtGelb { color: #AF9800; } /*  */
.txtBlau { color: #000; } /* #000000 */
.txtBlk { color: #000000; } /* Galerie Unsere Arbeiten */

.bg { background-color: #000000; } /* default */
.bgBlau { background-color: #000; } /* #000000 */
.bgHellgrau { background-color: #E9E9E9; } /* hr */
.bgGrau { background-color: #B1B3B3; }
.bgGruen { background-color: #000000; }
.bgBlk { background-color: #000000; }

/* Grautöne und rot siehe farben_masse.css */



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

a { color:#B1B3B3; text-decoration:none; outline: none; }
a:hover { 
	color:#B1B3B3; 
	text-decoration:underline; 
	/*border-bottom: 1px solid currentcolor;*/
}


h6, h6 a { /* RTEditor-Format «Farbe», möglichst wie body-default. RTEditor » contents.css (und config.js, de.js) */
	font-size: inherit;
	line-height: inherit;
	color: #B1B3B3 !important;
	font-weight: inherit;
}
h6 a:hover { text-decoration: underline; /*border-bottom: 1px solid currentcolor;*/ }


strong { font-weight: 600; } /* default Visia » 600. Noto bold » 600. Merriweather bold » 700. Oswald » semi-bold 600 strong-Wert auch in fonts.php einbetten */

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

/* bei nicht-Onepage in main.css */
hr { color:#E9E9E9; background-color:#E9E9E9; height:1px; margin-bottom:10px; margin-top:10px; 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;*/
}


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

/* prop Video-iFrame. site-spez: hier statt in farben_masse.css */
.mw100prz { max-width:100%; } /* siehe auch .imgResponsive in main.css */

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

.tal { text-align: left; }
.tar { text-align: right; }
.taj { text-align: justify; }
.tac { text-align: center; }
.tac ul {
    text-align: center;
    list-style: inside;
}
.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 */

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


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


/* Video-iFrame. Erf. feldCopt.. und feldDopt.. */
.videoContainer {
	position: relative;
    width: 100%;
	/*margin-top: 3px;*/ /* ev. prop Mobile */
	
	padding-bottom: 55%; /* default: 56.25% d.h. 16:9 */
	height: 0;
	
	/* site-spez, damit Video in Slider eingemittet. */
	/*top: 50%;
	transform: translateY(10%);*/
}
.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; }