/* agbalumo-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Agbalumo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/agbalumo-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* michroma-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Michroma';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/michroma-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Michroma */
@font-face {
    font-display: swap;
    font-family: 'Michroma';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/michroma-v19-latin-regular.woff2') format('woff2');
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v47-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v47-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-v47-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v47-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



* {
	margin: 0;
	padding: 0;
	}
body {
	height: 100%;
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 100%; 
	line-height: 125%;
	color: #555;
	}
h1 {
	font-size: 2.5em; 
	font-weight: normal;
	}
@media screen and (max-width: 905px) {
	h1 {padding-right: 30%;}
	}
h2 {
	padding-bottom: 10px;
	font-size: 1.55em;
	line-height: 1.25em;
	color: #555;
	}
h3 {
	padding: 40px 0 0 0; 
	font-size: 1.04em;
	font-weight: normal;
	}
h4 {
	font-size: 1.025em;
	font-weight: normal;
	}
h5 {
	padding: 10px 0 15px 0;
	font-size: 1em; 
	color: #555;
	}	
h6 {
	font-weight: normal;
	font-size: 1em;
	color: #555;
	}	
p {	
	color: #555;
	}	
a {color: #555; text-decoration: none;}
a:hover {color: #000;}
a:active {color: #000;}
a img, img a, p a img, p img a {border: none;}
h1 a {
	font-weight: normal;
	color: #555;
	}
table {
	width: 85%;
	border-collapse: collapse;
	}
caption {padding: 1em 0;}		
tr th {
	width: 25%;
	background-color: silver;
	border: 1px solid white; 
	}	
table tr td {
	width: 25%;
	background-color: silver;
	border: 1px solid white; 
	}	
hr {
	margin: 1.5em 0 1.55em 0; 
	width: 96%;
	color: #999; 
	background-color: #ccc; 
	height:1px; 
	border: none;
	}
iframe {
	margin-left: -0.5em;
	overflow: hidden;
	width: 590px;
	height: 650px;
	border: none;
	}	
form  {
	padding-bottom: 1.25em;
	width: 85%;
	}
form p {
	clear: both;
	padding: 1%;
	height: 1em;
	}
input, select, textarea {
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 1em; 
	color: #333;
	}	
input[type="text"] {
	margin-bottom: 2%;
	padding: 1%;
	width: 90%;
	height: 1em;
	}
input[type="submit"] {    
	width: 150px;
	height: 1.70em;
	cursor: pointer;
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 1em;
	color: #666;
	background-color: #fef5f2;
	border: 1px solid #666;
	}
textarea, select {
	float: left;
	margin-bottom: 2%;
	padding: 1%;
	width: 90%;
	height: 100px;
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 93.75%; 
	line-height: 125%;
	border: 1px solid #666;
	}	


/*  --------------------------------------------------------------------------------------------------------------------------- */	
	
	
header,section,footer {
	margin: 0 auto; 
	max-width: 900px;
	}
header {
	padding-top: 25px;
	padding-bottom: 35px;
	background: url(img/hg_header.jpg) 0 162px no-repeat;
	}	
@media screen and (max-width: 900px) {	
	header {background: url(img/hg_header_kl.jpg) 0 162px no-repeat;}
	}
header nav {
	padding: 50px 0 0 75px;
	width: 90%;
	max-width: 850px;	
	height: 47px;
	}
header nav ul li {
	float: left;
	padding-right: 15px;
	font-size: 0.74em; 
	font-weight: bold; 
	letter-spacing: 2px;
	}
@media screen and (max-width: 750px) {	
	header nav ul li {
		font-size: 0.68em; 
		font-weight: bold; 
		letter-spacing: 2px;
		}
	}
header h1 {
	padding-right: 155px;
	max-width: 850px;
	height: 75px;
	text-align: right;
	font-family: 'Agbalumo';	
	}	
nav a {
	font-family: 'Michroma'!important;
	color: #000;
	}	
nav a:hover {
	color: #000;
	}	
nav a:active {
	color: #000;
	}	
nav ul li {
	list-style-type: none;
	padding-bottom: 10px;
	line-height: 1.2em;
	}
nav li a {text-decoration: none;}		

section {
	color: #333;
	min-height: 310px;
	background: url(img/hg_navi2.jpg) 0 0 no-repeat;
	}	
@media screen and (max-width: 914px) {
	section {padding: 0; background: url(img/hg_section_900.jpg) 0 0 no-repeat;}	
 	}	
section nav {
	float: left;
	padding-top: 25px;
	padding-right: 4%;
	width: 26%;
	text-align: right;
	font-size: 0.7em;
	letter-spacing: 2px;
	}	
@media screen and (max-width: 900px) {
	section nav {padding-left: 10px; max-width: 150px;}
 	}	
section nav ul {
	padding: 3px 0 30px 0;
	}	
section nav a {
	color: #444;
	}	
section h2 {
	float: right;
	width: 70%;
	}	
@media screen and (min-width: 915px) {
	section h2 {
		background: url(img/hg_h2.jpg) 100% 0 no-repeat;
		}	
	}
article {
	margin-left: 30%;
	padding-right: 4%;
	padding-bottom: 20px;
	width: 66%;
	}
@media screen and (min-width: 915px) { 
	section article {background: url(img/hg_txt.jpg) 100% 0 repeat-y; min-height: 360px;}
	}
article ul {
	padding-left: 15px;
	color: #555;
	}	
footer {
	clear: both;
	padding-top: 10px;
	max-width: 900px;
	height: 150px;
	background: url(img/hg_footer.jpg) 0 0 no-repeat;
	}	
footer .oben {
	margin-left: 30%;
	padding: 15px 0 0 0; 
	width: 65%;
	height: 95px;
	color: #888;
	border-top: 1px solid #ccc;
	}
footer .obenOhne {
	margin-left: 30%;
	padding: 15px 0 0 0; 
	width: 65%;
	height: 95px;
	color: #888;
	}
footer .oben a {
	color: #888;
	}	
footer .unten {
	padding-right: 100px;
	text-align: right;
	font-family: 'Michroma'!important;
	font-size: 0.65em;
	letter-spacing: 1px;
	color: #000;
	}	
	

/* IDs ---------------------------------------------------------------------------------------------------------------------------------------------------- */


#logo {
	padding-right: 70px;
	text-align: right;
	}
@media screen and (max-width: 900px) {	
	#logo {padding-right: 5%;}
	}
#akkordeon h5 {
	padding: 8px 0 5px 0;
	width: 100%;
	cursor: pointer;
	color: #666;
	}
#akkordeon div {
	padding: 7px 0 0 12px;
	height: auto !important;
	}
#akkordeon div p.zeile2 {
	padding: 0 0 15px 0;
	color: #cb8877; 
	}	
#akkordeon hr {
	margin: 0;
	background: url(img/hg_hr_dotted.gif) 0 0 repeat;
	}

    img.w100pDeskKl {
    display: none!important;
}


/* Klassen ------------------------------------------------------------------------------------------------------------------------------------------------------ */


.illu {
	padding: 100px 59px 0 0!important;
	float: right;
	}
	
.logo1 {
	width: 249px;
	height: 94px;
	}	
.logo2 {
	padding-right: 4px;
	width: 235px;
	height: 46px;
    display: none;
	}

.grau.txtKl.noMob {
    width: 100%;
}
	
@media screen and (min-width: 905px) {
	.kosmBehandlung {
		margin-top: 30px;
		height: 30px; 
		background: url(img/hg_kosmetische-behandlung.gif) 0 0 no-repeat;
		}
	}
@media screen and (max-width: 904px) {
	.kosmBehandlung {
		margin-top: 30px;
		height: 30px;
		background: url(img/border.gif) 0 10px no-repeat;
		}
	}
.achtung {
	margin: 25px 0;
	padding: 5px;
	width: 76.5%;
	color: #f0f;
	border: 1px dotted #f0f;
	}
.ok {
	margin: 20px 0;
	padding: 10px;
	width: 75%;
	color: #d59383;
	border: 1px dotted #d59383;
	}	
.kosmBehandlung p {
	padding-right: 12px;
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 1px;
	color: #999;
	}



@media screen and (min-width: 905px) {	
	.Behandlung {
		margin-top: 30px;
		height: 30px; 
		background: url(img/hg_behandlung.gif) 0 0 no-repeat;
		}
	}
@media screen and (max-width: 904px) {
	.Behandlung {
		margin-top: 30px;
		height: 30px; 
		background: url(img/border.gif) 0 10px no-repeat;
		}
	}
.Behandlung p {
	padding-right: 12px;
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 3px;
	color: #999;
	}	
.hgHr {
	background: url(img/hg_hr.gif) 0 0 no-repeat;
	}	
.borderB {background: url(img/border.gif) 0 100% no-repeat;}	

.noDesk {display: none; visibility: hidden; width: 0; height: 0; overflow: hidden !important;}
@media screen and (max-width: 915px) {	
	.noDeskKl {display: none; visibility: hidden;  width: 0; height: 0; overflow: hidden;}
	.w100 pDeskKl {width: 80%;}
	}
@media screen and (max-width: 900px) {	
	.noDeskKlSec {padding-top: 15px;}
	.w100pDeskKl {max-width: 90px;}
}

.noPointer {cursor: default;}
.pointer {cursor: pointer;}

.flL {float: left;}
.flR {float: right;}
.clB {clear: both;}
.clL {clear: left;}
.clR {clear: right;}

.pad2p {padding: 2%;}
.padT3 {padding-top: 3px;}
.padT5 {padding-top: 5px;}
.padT8 {padding-top: 8px;}
.padT10 {padding-top: 10px;}
.padT20 {padding-top: 20px;}
.padT25 {padding-top: 25px;}
.padT50 {padding-top: 50px;}
.padB5 {padding-bottom: 5px;}
.padB15 {padding-bottom: 15px;}
.padB20 {padding-bottom: 20px;}
.padR20 {padding-right: 20px;}

.w50p {width: 40%;}
.h200 {height: 200px;}
.plh {line-height: 0px;}

.border {border: 1px solid red;}
.borderGr {
    margin-top: -14px;
   margin-left: -1px;
    margin-right: 30px;

}

.neovita-siegel {
    margin-top: -14px;
   margin-left: -1px;
    margin-right: 30px;
max-width: 40px!important;

}

.lSp1 {letter-spacing: 1px;}
.lSp2 {letter-spacing: 2px;}
.txtKl {font-size: 0.75em;}

.grau {color: #888;}