@charset "utf-8";



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

@import url('fontawesome.min.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, .txtDunkelblau { color:#00436d; } /* default */
.txtBlau { color:#00a8e2; }
.txtDunkelblau { color:#00436d; }
.txtSand, .txtHellblau { color:#d1effa; }
/*.txtPeach { color:#00a8e2; }*/
.txtSilber { color:#e5e5e5; } /* entspricht 10% schwarz */

.bg { background-color:#d1effa; } /* default */
.bgBlau, .bgDunkelblau { background-color:#00436d; } /* .bgBlau fix: stellvertretend für dunklen BG mit Schrift mit .invers */
.bgTextlblau { background-color:#00a8e2; }
.bgSand, .bgHellblau { background-color:#d1effa; } /* .bgSand fix: stellvertretend für hellen BG */
/*.bgPeach { background-color:#00a8e2; }*/
.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 ----- */

body {
	line-height: 1.7;
	color: #00436d; /*default #222*/
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; /* eingebettet: 400, 700 */ 
	font-weight: 400;
	background-color: #fff; /* # fcfcf5 */
	/*-webkit-font-smoothing:antialiased;  Safari: Schrift wird dünner */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
}

a { color:#00436d; text-decoration:none; outline: none; }
a:hover { color:#00a8e2; text-decoration:none; }

h1 {
	/*font-family: 'Montez', 'Brush Script MT', cursive;
    font-weight:400;
    */   
	font-family: 'Ubuntu', 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:700; /* light 100, book 300, regular 400, bold 700, heavy 800 */
    color: inherit;
}
h2 { 
	font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:700; /* light 100, book 300, regular 400, bold 700, heavy 800 */
    color: #00a8e2;
}
h2 a { 
    color: #00a8e2;
}
h2 a:hover { 
    color: #00436d;
}
h3 { 
	font-family: 'Ubuntu', 'Helvetica Neue', Arial, Helvetica, sans-serif;   
	font-weight:700; /* 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: #00a8e2;
	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: #00a8e2 !important; } /* optional nebst h6 auch italic für Textauszeichnung «Farbig» verwenden. Achtung: i-Tag dient FA. */
h2 em { color: #00a8e2 !important; } /* optionale Ausnahme. Achtung: i-Tag dient FA. */
em a:hover { text-decoration: underline; }

hr { color:#00436d; background-color:#00436d; }

td { vertical-align: top; }



/* prop tmplt foet: helle Schrift auf dunklem Hintergrund */	
.invers { 
	color: #fff!important; /* prop Mobile: !important */
	/*background-color: #00436d; » reiheItemDarstellung.php */
}
.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; }



/* ----- 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: #00436d !important; }
#cookiedingsbumsClose {
   cursor:pointer;
    font-weight: bold !important;
    background-color:rgba(255,255,255,0.9);
    padding: 2px 5px 2px 5px;
    color: #00436d;
    
    /*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: #00436d;
    background-color:rgba(255,255,255,0.9);

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


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

.btnRundBlau, .btnBlau  {
	color: #00a8e2;
	/*text-transform: uppercase;*/
	font-weight: 700;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #00a8e2;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRundBlau:hover, .btnBlau:hover {
	color: white;
	background-color: #00436d!important;
	border:1px solid #00436d;
	/*border:1px solid #00436d;*/
	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: #00a8e2!important;
	border:1px solid #00a8e2;
	text-decoration: none!important;
}
.btnRundPeach, .btnPeach {
	color: #00a8e2;
	text-transform: uppercase;
	
	background-color:transparent;
	border-radius:22px;
	border:1px solid #00a8e2;
	padding:7px 19px;
	display: inline-block;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 29px;
}
.btnRundPeach:hover, .btnPeach:hover, .btnHoverOnlyGruen:hover {
	color: #d1effa!important;
	border:1px solid #d1effa;
}


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

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

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


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