@charset "utf-8";



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

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



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

.txt { color:#515151; } /* default */
.txtSchmuck { color:#7a0a1f; } /* default Schmuckfarbe */
.txtBordeaux { color: #7a0a1f; }
.txtBlau { color: #0000FF; }
/*.txtGrau { color:#515151; } » siehe unten
.txtHellgrau { color:#979797; }
.txtDunkelgrau { color:#373737; }*/

.bg { background-color: #515151; } /* default */
.bgSchmuck { background-color:#7a0a1f; } /* default Schmuckfarbe */
.bgBordeaux { background-color: #7a0a1f; }
.bgBlau { background-color: #0000FF; }
.bgSand { background-color:#efeae5; }
.bgBeige { background-color:#fcfcf5; } /* body-BG #fcfcf5 = rgba(252,252,245,1.00) */
.bgBeige95prz { background-color:rgba(252,252,245,0.95); } /* body-BG #fcfcf5 = rgba(252,252,245,1.00) */

/* Standard-Farben und -Grautöne und -Schriftgrössen » zuunterst */



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

body {
	line-height: 1.7;
	color: #515151; /*default #222*/
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; /* eingebettet: 100, 400, 700, 800 */ 
	font-weight: 400;
	-webkit-marquee-increment: 0vw; /* Bugfix Safari clamp() */	
	
	background-color: #fcfcf5; /* default #fcfcf5 = 252,252,245. dev #0277A5 */
	/*-webkit-font-smoothing:antialiased;  Safari: Schrift wird dünner, bei Squarespace default */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
}

a { color:#515151; text-decoration:none; outline: none; }
a:hover { color:#7a0a1f; text-decoration:none; }

h1 {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;    
	font-weight:400; /* strong-Wert auch in fonts.php einbetten */
	/*color: #004489;*/
}
h2 {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;    
	font-weight:700; /* strong-Wert auch in fonts.php einbetten */
	/*color: #004489;*/
}
h3 {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;    
	font-weight:400; /* strong-Wert auch in fonts.php einbetten */
	/*color: #004489;*/
}

h6, h6 a { /* eigenes CKEditor-Format: z.B. «Farbe». In CKEditor anpassen » contents.css, config.js, de.js, icons_hidpi.png) */
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: #f00 !important;
}
h6 a:hover { text-decoration: underline; }
.hInherit { font-size:inherit; font-weight: inherit; line-height:inherit; margin-top:inherit; margin-bottom:inherit; letter-spacing:inherit; text-transform: inherit; }

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

em, em a { font-style: normal; color: #f00 !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:inherit; background-color:#979797; }

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, tasy */
#cookiedingsbums {
	/* prop Position fixed: */
    /*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: absolute;
    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: -2px; /* zum Ausrichten, ev. negativ */
	vertical-align: middle; /* zum Ausrichten */

	display: inline-block;
    color: black;
    background-color:rgba(233,233,233,1);

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



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

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

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



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

.btnRund, .btn, .btnBlau { /* default blau */
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	
	background-color:#004b95;
	border-radius:22px;
	border:1px solid #004b95;
	
	box-sizing: border-box;
	padding:5px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRund:hover, .btn:hover, .btnBlau:hover {
	color: #7a0a1f;
	border-color: #7a0a1f;
	text-decoration: none!important;
}

/* Bild 100% gross. Klasse für img-Tag! */
.imgResponsive {
	max-width: 100%;
	/*margin: 0;*/
  	border: 0;
  	vertical-align: middle;
}
.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; }
.inlineBlocki { display:inline-block!important; } /* flex überschreiben */
.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;
	line-height: 2.1;
}

.vat { vertical-align: top; }
.vam { vertical-align: middle; }
.vab { vertical-align: bottom; }


.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; }
.rightFlex { margin-left: auto; order: 1; } /* bei flex-Parent */
.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; } /* 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. ACHTUNG: dynamische Höhe geht verloren! » .vEingemittetCell */
	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%);*/
}
.childVeinmitten { display: flex; align-items:center; } /* z.B. für float-Children von .reihe */
.vEingemittetCell { display: table-cell; vertical-align: middle; } /* Vertikal einmitten. ACHTUNG: funzt nur ohne float, sonst .vEingemittet */
.ma { margin: auto; }


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

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



/* -----  STANDARD-FARBEN UND SCHRIFTGRÖSSEN -----  */

.txtWeiss { color:#fff; }
.txtGrau { color:#515151; }
.txtHellgrau { color:#979797; }
.txtHellgrauNoPointer { color:#979797; cursor: default; }
.txtHellgrauNoPointer:hover { color:#979797; cursor: default; }
.txtHellgraui { color:#979797!important; }
.txtHellgrauiNoPointer { color:#979797!important; cursor: default; }
.txtHellgrauiNoPointer:hover { color:#979797!important; cursor: default; }
.txtDunkelgrau { color:#373737; }
.txtDunkel { color:#222; }
.txtSchwarz { color:#000; }
.txtRot { color:#ff0404; }
.txtDebug { color:#f0f !important; }

.bgWeiss { background-color:#fff; }
.bgLicht { background-color:#F9F8F7; }
.bgWeiss50prz { background-color: rgba(255, 255, 255, 0.5); }
.bgWeiss70prz { background-color: rgba(255, 255, 255, 0.7); }
.bgWeiss85prz { background-color: rgba(255, 255, 255, 0.85); }
.bgWeiss90prz { background-color: rgba(255, 255, 255, 0.9); }
.bgBlk10prz, .bgSilber { background-color: rgba(0, 0, 0, 0.1); }
.bgBlk50prz { background-color: rgba(0, 0, 0, 0.5); }
.bgGrau { background-color:#515151; }
.bgHellgrau { background-color:#979797; }
.bgDunkelgrau { background-color:#373737; }
.bgDunkel { background-color:#222; }
.bgTransparent { background-color:rgba(255, 255, 255, 0); }
.bgDebug { background-color:#f0f !important; }


.px0 { font-size: 0 !important; }
.px14 { font-size:14px; }
.px16 { font-size:16px; }
.px18 { font-size:18px; }
.px22 { font-size:22px; }
.px24 { font-size:24px; }

.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }

.lh1 { line-height: 1!important; }

.ohneUmbruch { white-space: nowrap; }


/* ----- ALERTS FORMULAR ----- */

.txtRotForm { color:red !important; }
/*.txtRotForm { color:red !important; display: block; }*/
.rahmenRotForm { border: 1px solid red !important; }
.rahmenRotForm + .label-for-check { color:red!important; }
/* mit BG */
/*input[type="text"].rahmenRotForm, textarea.rahmenRotForm { { 
	border: 1px solid red !important; 
	background-color:rgba(255,0,4,0.08)!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; }

@media screen and (orientation: landscape) {
	/* Vorlage */
}