/* Die Klanginsel */

html, body {	height: 100%;	width: 100%; 	font-family: 'Cabin', sans-serif;	font-weight: 400;	color: black; 	font-size: 20px; 	line-height: 140%; }
	
a, a:link, a:visited { text-decoration: underline; color: black; }

a:hover, a:active { color: #b49358; }

h1 { font-size: 36pt; line-height: auto; font-style:  normal; font-weight: 600; margin: 0;}

p { margin: 0; padding: 0; }

bold {font-weight: 700;}

.schwarz { color: black;}

.weiss { color: white;}

.zitat { color: #b49358;}

.header {	width: 100%; margin: 0; background:  black;	color: white; }

/** #menue { max-width: 100px; background: red; float: left;} **/

#logo { max-width: 1080px; margin: 0 auto; text-align: center; padding: 30px; }


.wrapper {
}




/* Peter Hess */

#peter_hess img { 	width: 100%;	height: auto;	padding: 0; margin: 0; margin-bottom: -10px; }

/* Klangschalenbild */

.klangschale {	background:  #b49358;	padding: 0; margin: 0;}

.klangschalenbild img {	width: 100%;	height: auto;	padding: 0; margin: 0; margin-bottom: -10px;}

#wirkungsmerkmale .kleiner img {	width: 47.5%;	height: auto;	padding: 0; margin: 0; margin-bottom: 40px; margin-right: 4.5%;	float:  left;}

#wirkungsmerkmale .kleiner_r img {	width: 47.5%;	height: auto;	padding: 0; margin: 0; margin-bottom: 40px; margin-right: 0;	float: left;}

.cl { clear: left; }

.cb { clear: both; }

/* Willkommenstext */

.willkommen {	width: 100%;	background: #b49358;}

.willkommen h1 { color: black; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}

.willkommen a, .willkommen a:link, .willkommen a:visited { text-decoration: underline; color: white; }
.willkommen a:hover, .willkommen a:active { color: black; }

.text {	max-width: 1008px;	width: auto;	margin: 0 auto;	padding: 40px;}

.quellangabe {font-size: 80%; line-height: 100%; padding-top: 24px;}

#fn-1, #fn-2 { width: 100%; float:  left;}

.fn_l {
	width: 20px;
	float: left;
}

.fn_r {
	float: left;
	width: 90%;
}

/* Peter Hess */

#peter_hess {	width: 100%;	background: white;	color: black;}

#peter_hess h1 { color: #b49358; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}

#peter_hess a, #peter_hess a:link, #peter_hess a:visited { text-decoration: underline; color: #b49358; }
#peter_hess a:hover, #peter_hess a:active { color: black; }

#peter_hess p {margin: 0;  padding-bottom: 20px; }

article {	  -webkit-columns: 2 360px;     -moz-columns: 2 360px; columns: 2 360px;  -webkit-column-gap: 2em;     -moz-column-gap: 2em;  column-gap: 2em;}

/* Vorgehensweise */

#vorgehensweise {	width: 100%;	background: white;	color: black;	border-top: 10px solid #b49358;}

#vorgehensweise h1 { color: #b49358; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}

#vorgehensweise a, #vorgehensweise a:link, #vorgehensweise a:visited { text-decoration: underline; color: #b49358; }
#vorgehensweise a:hover, #vorgehensweise a:active { color: black; }

#vorgehensweise p {margin: 0;  padding-bottom: 20px; }

#vorgehensweise img {	width: 100%;	height: auto;	padding-top: 20px;}

/* Wirkungsmerkmale */

#wirkungsmerkmale {	width: 100%;	background: white;	color: black;	border-top: 10px solid #b49358;}

#wirkungsmerkmale h1 { color: #b49358; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}

#wirkungsmerkmale a, #wirkungsmerkmale a:link, #wirkungsmerkmale a:visited { text-decoration: underline; color: #b49358; }
#wirkungsmerkmale a:hover, #wirkungsmerkmale a:active { color: black; }

#wirkungsmerkmale p {margin: 0;  padding-bottom: 20px; }

#wirkungsmerkmale img {	width: 100%;	height: auto;	padding-top: 20px;}

article {	  -webkit-columns: 2 360px;     -moz-columns: 2 360px;          columns: 2 360px;  -webkit-column-gap: 2em;     -moz-column-gap: 2em;          column-gap: 2em;}

ul, menu, dir {    -webkit-padding-start: 20px; }

/* Kontakt */

.kontakt {	width: 100%;	background: #b49358;}

.kontakt img {	width: 100%;	height: auto;	padding: 0; margin: 0; margin-bottom: 0;}

.kontakt img.logo {	width: 20%;	height: auto;	padding: 0; padding-right: 42px;  margin: 0; margin-bottom: 20px; }
.kontakt img.logo_c { width: 22.251%;	height: auto;	padding: 0;  margin: 0; margin-bottom: 20px; }

.kontakt h1 { color: white; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}
.kontakt h2 { color: white; font-size: 1em; font-weight: 400;  line-height: 120%; }

.kontakt a, .kontakt a:link, .kontakt a:visited { text-decoration: underline; color: white; }
.kontakt a:hover, .kontakt a:active { color: black; }

.kontakt p { color: white; padding: 0; margin: 0; margin-bottom: 20px;}

.kontakt .links, .kontakt .mitte, .kontakt .rechts { width: 33%; float: left;}

/* Impressum */

.impressum {	width: 100%;	background: black; }

.impressum h1 { color: #b49358; line-height: 100%; font-size: 28pt; line-height: 120%; margin: 0 0 40px 0;}
.impressum h2 { color: #b49358; font-size: 1em; font-weight: 400;  line-height: 120%; }

.impressum a, .impressum a:link, .impressum a:visited { text-decoration: underline; color: white; }
.impressum a:hover, .impressum a:active { color: #b49358; }

.impressum p { color: white; padding: 0; margin: 0; margin-bottom:  20px;}

.impressum article {	  -webkit-columns: 3 225px;     -moz-columns: 3 225px; columns: 3 225px;  -webkit-column-gap: 2em;     -moz-column-gap: 2em; column-gap: 2em;	padding-bottom:  40px; }

p.korr {color: #FF0004;}


@media only screen and (max-width : 1023px) {

	

		
		
}

 
@media only screen and (max-width : 768px) {
	


	
}

 
@media only screen and (max-width : 568px) {
	
html, body {	font-size: 18px;	line-height: 140%;}
	
h1 { font-size: 30pt; line-height: auto; font-style:  normal; font-weight: 600; margin: 0;}

.willkommen h1, #peter_hess h1, #wirkungsmerkmale h1, .kontakt h1, .impressum h1 { font-size: 22pt; line-height: 100%; margin: 0 0 20px 0; }

.willkommen h1, #peter_hess h1, #vorgehensweise h1, .kontakt h1, .impressum h1 { font-size: 22pt; line-height: 100%; margin: 0 0 20px 0; }

.text {	padding: 20px; }
	
.kontakt .links, .kontakt .mitte, .kontakt .rechts { width: 90%; float: left;}

.kontakt img.logo { width: 40%; padding-right: 21px; }
.kontakt img.logo_c { width: 44.502%; }
	
#wirkungsmerkmale .kleiner img, #wirkungsmerkmale .kleiner_r img {	margin-bottom: 20px; }
	
#vorgehensweise .kleiner img, #vorgehensweise .kleiner_r img {	margin-bottom: 20px; }

ul, menu, dir {    -webkit-margin-before: 0;    -webkit-margin-after: 0; }
 
@media only screen and (max-width : 399px) {
	



}