@charset "utf-8";



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

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



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

.txt { color:#555555; } /* default oder #222 */
.txtBlau, .txtDunkelblau { color:#2c4791; } /* RGB: 12,74,131. !!! ALTERNATIVE STÄRKERES BLAU: #04a8e3 !!! */
.txtHellblau { color: #06a7e0; } /* Titel floatform */
.txtLapislazuli { color: #21bbbe; } /* Titel Paola's Delikatessen */
.txtSand, .txtTuerkis, .txtGruen { color:#faf9f4; } /* »swes-PSD-Layout: #01a3c6. Schmuck 2, Alternativen: #383838, #dfd6cc, #cabbaa . »faor: türkis */
.txtPeach { color:#e98b1d; } /* hier orange */
.txtSilber { color:#e5e5e5; } /* entspricht 10% schwarz */
.txtSchmuck { color:#ec6725; } /* Checkout, Kontaktformular */
.txtInvers { color: #fff; } /* vergl. unten .bgInvers und .invers (Text und BG Z. 100) */

.bg { background-color:#fff; } /* default #fcfcf5 oder: dunkler/grauer #faf9f4, créme #fff6dd oder #faf9f0 (weisser Text möglich). Very nice: #d2cdc8 » boer. Oder whitesmoke */
.bgGruen60prz { background-color:rgba(157,201,050,0.6); } /* RGB  */
.bgBlau, .bgDunkelblau, .bgInvers { background-color:#01a2c7; } /* Alternative: #2bb1cf .bgBlau fix: stellvertretend für dunklen BG mit Schrift mit .invers Z. 100, d.h. helle Schrift */
.bgSand, .bgGruen, .bgHellgelb { background-color:#fbfbfd; } /* oder: #F5E0BA (zu stark Pflästerli, oder #fede8e) .bgSand fix: stellvertretend für hellen BG */
.bgPeach, .bgTuerkis { background-color:#039b9d; }

.bgBody { background-color:#fbfbfd; }
.bgOrange { background-color:#ec6725; }
.bgSchmuck { background-color:#01a3c6; } /* Checkout */

/* unten »

.invers (Text und BG Z. 100)

.bgSilber { background-color:#e5e5e5; }
.bgGrau { background-color:#909090; }
.bgHellgrau { background-color:rgb(126,128,130); }
.bgDunkelgrau { background-color:rgb(109,109,109); }*/

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



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

body {
	line-height: 1.7;
	color: #555; /* default #555 (anthrazit) oder heller #6f7370 (grau) oder dunkler #333 (fast schwarz) */
	font-family: filson-pro, 'Helvetica Neue', Arial, Helvetica, sans-serif; /* eingebettet: 100, 400, 700, 800 */ 
	/*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: #faf9f4; /* default #fcfcf5 oder dunkle/grauer: #faf9f4 */
	/*-webkit-font-smoothing:antialiased;  Safari: Schrift wird dünner */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
}

footer { color: inherit; }
footer a:hover { color: white; }

a { color:inherit; text-decoration:none; outline: none; }
a:hover { color:#01a3c6; text-decoration:none; }

h1 {
	font-family: filson-pro, 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:700; /* light 100, book 300, regular 400, bold 700, heavy 800 */
    color: inherit;
}
h2 { 
	font-family: filson-pro, 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:700; /* light 100, book 300, regular 400, bold 700, heavy 800 */
    color: inherit;
}
h3 { 
	font-family: filson-pro, 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:800; /* light 100, book 300, regular 400, bold 700, heavy 800 */
    color: inherit;
}

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


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

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

hr { background-color:#6f7370; }

td { vertical-align: top; }



/* prop tmplt foet: helle Schrift auf dunklem Hintergrund */	
.invers { 
	color: #fff!important; /* prop Mobile: !important */
	background-color: #2c4791;/* gelb #fbb80f oder türkis #039b9d oder dunkleres grau (= .hellgrau): rgb(126,128,130) oder #a79685. .bgSandDunkel #d2cdc8 */
}
.invers a { color: #fff; }
.invers a:hover { color: #fff; text-decoration: underline; }
.invers h1 { color: #fff; }
.invers h2 { color: #fff; }
.invers h3 { color: #fff; }
.invers h6 { color: #fff; }
.invers em { color: #fff; }
.invers hr { background-color: #fff; }



/* ----- LAYOUT PROJEKT ----- */

/* ANFANG Google Translate */
/* » haen & late */
/* ENDE Google Translate */


.reiheItemBg {
	background-color: #fff;
	/*padding: 20px;*/
	box-sizing: border-box;
}
/* mehrfarbige Vignetten » zarn
.reiheItemBgBlau {
	background-color: #73caea;
	box-sizing: border-box;
}.reiheItemBgBlauGruen {
	background-color: #008ab4;
	box-sizing: border-box;
}*/



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

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

	margin-top: -3px; /* zum Ausrichten, ev. negativ */
	vertical-align: middle; /* zum Ausrichten */
	
    display: inline-block;
    color: #adadad;
    background-color:rgba(255,255,255,0.9);

    font-family: sans-serif; 
    font-size: 18px; 
    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 */



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

.btnRund, .btn, .btnBlau { /* default blau */
	color: inherit;
	text-transform: uppercase;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #6f7370;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRund:hover, .btn:hover, .btnBlau:hover {
	color: #ec6725!important;
	border:1px solid #ec6725;
	text-decoration: none!important;
}

.btnRundGruen, .btnGruen  {
	color: #039b9d!important;
	text-transform: uppercase;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #039b9d!important;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRundGruen:hover, .btnGruen:hover {
	color: #ee731b!important;
	border:1px solid #ee731b;
	text-decoration: none!important;
}

.btnRundWeiss, .btnWeiss {
	color: #fff;
	text-transform: uppercase;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #fff;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRundWeiss:hover, .btnWeiss:hover {
	color: #fff!important; /* blau #039b9d */
	background-color: #ee731b!important; /* blau #039b9d */
	border:1px solid #ee731b;
}
.btnRundPeach, .btnPeach {
	color: #ee731b;
	text-transform: uppercase;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #ee731b;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRundPeach:hover, .btnPeach:hover, .btnHoverOnlyGruen:hover {
	color: #fff!important; /* blau #039b9d */
	background-color: #ee731b!important; /* blau #039b9d */
	border:1px solid #ee731b;
}

.rand { 
    border:1px solid #e8e8e8; 
    box-sizing: border-box;
}

/* Bild 100% gross. Klasse für img-Tag! */
.imgResponsive {
	max-width: 100%;
	/*margin: 0;
  	border: 0;*/
  	vertical-align: middle;
}
.imgResponsiveUpscale {
	max-width: 100%;
	/*margin: 0;
  	border: 0;*/
  	vertical-align: middle;
	width:3000px; /* Falls parent grösser als Bild. Evtl. auch .w100prz */
}

.pointer { cursor:pointer; }


/* 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; }
.nonei { display:none!important; }

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

.vat { vertical-align: top; }
.vam { vertical-align: middle; }
.vab { vertical-align: bottom; }
.va0, .va0i { vertical-align: 0!important; }


.flex { 
    display: flex;
	/*flex-wrap: wrap;*/ /* default: nowrap */
}
.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;*/
}
.flex::after, .reiheFlex::after { /* damit letzte Zeile linksbündig bei «flex-wrap: wrap; und justify-content: space-between;» */
  /*content: "";
  flex: auto;*/
}
.reiheItemGleicheBreite {
	display: flex;
  	flex-direction: column;
  	flex-basis: 100%;
  	flex: 1;
	/*flex-grow: 1;*/ /* Raum auffüllen, vergl. width: content-width; Gegenteil: width: fit-content; */
}
.reiheItemGleicheBreite img { /* optional stretch auf Bildern */
	align-self: start;
	flex-shrink: 0; /* Patch für IE 11 */
}


.reiheFlexScrollSnap { /* »caer & »maas & .ff-mobileSnapCarousel (ff-Carousel) »erzl */
    width:100%; /* optional inline überschreiben */
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* make it smooth on iOS */
    scroll-snap-type: x mandatory;
    
    -ms-overflow-style: none; /* Hide scrollbar for IE, Edge */
    scrollbar-width: none; /* Firefox */
}
.reiheFlexScrollSnap::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.reiheFlexScrollSnap > div {
    flex-shrink: 0; /* make sure the width is honored */
    scroll-snap-align: start;
    scroll-snap-stop: normal;	

    /* Einstellungen: item-Breite */
    padding-right: 0rem;
    width: inherit; /* responsive */
    width: 33vmin;
}


.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; } /* 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; } /* funzt auch in flex-Child! */

.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; }

.fussbuendig { display: table-cell; vertical-align: bottom; } /* Fussbündig. ACHTUNG: funzt nur ohne float */
.fussbuendigFlex { align-self: flex-end; } /* in flex-child, überschreibt «align-items:center» von parent */
.topbuendigFlex { align-self: flex-start; } /* in flex-child, überschreibt «align-items:center» von parent */



/* Aufzählungszeichen anschmiegen */
.ulStyleEinspaltigCentriert ul { /* Patch / ovrt damit linksbündig bei «Einspaltig linksbündig, schmal» » .w52prz ul in masse.css */
    text-align: center;
    list-style-position: inside; /* Achtung Einrück-issue */
}
.ulStyleEinspaltigCentriert ul li { margin-left: 19px; }


.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); }
.rotate180 { transform: rotate(180deg); }


/* 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; }
.txtWeissi, .txtWeissi span { color:#fff!important; }
.txtWeissi:hover { color:#00436d; }
.txtGrau { color:#909090; }
.txtHellgrau { color:rgb(126,128,130); }
.txtHellgrauNoPointer { color:rgb(126,128,130); cursor: default; }
.txtHellgrauNoPointer:hover { color:rgb(126,128,130); cursor: default; }
.txtHellgraui { color:rgb(126,128,130)!important; }
.txtHellgrauiNoPointer { color:#979797!important; cursor: default; }
.txtHellgrauiNoPointer:hover { color:#979797!important; cursor: default; }.txtDunkelgrau { color:#373737; }
.txtDunkel { color:rgb(86,90,96); }
.txtSchwarz { color:#1d1d1f; }
.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); }

.bgSilber { background-color:#e5e5e5; } /* entspricht 10% schwarz */
.bgGrau90prz { background-color: rgba(222,222,222,0.9); }
.bgBlk10prz, .bgSilber { background-color: rgba(0, 0, 0, 0.1); }
.bgBlk50prz { background-color: rgba(0, 0, 0, 0.5); }
.bgGrau { background-color:#909090; }
.bgHellgrau { background-color:rgb(126,128,130); }
.bgDunkelgrau { background-color:rgba(36,36,36,1.00); }
.bgSchwarz { background-color:#1d1d1f; }

.bgDunkel { background-color:rgb(86,90,96); }
.bgTransparent { background-color:rgba(255, 255, 255, 0); }
.bgDebug, .bgDev { background-color:#f0f !important; }


.fontFamInh { font-family:inherit!important; }

.px0 { font-size: 0 !important; }
.px12 { font-size:12px; }
.px13 { font-size:13px; }
.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 */
}