/* GRUNDDEFINITIONEN ********************************************************************/

/* Tags */
html { min-height:100.1%; }
body { margin:0; }
header, 
div,
figure,
footer { display:block; }
h1 { font-size:27px; line-height:33px; font-weight:normal; color:#000000; margin:0; padding:0 0 55px 0; }
h2 { font-size:17px; line-height:25px; font-weight:normal; color:#cd5b5f; width:40%; margin:0; padding:0 0 110px 0; }
p { font-size:17px; line-height:25px; }
a { text-decoration:none; color:#000000; transition:color ease-out 0.3s; }
a:hover { color:#cd5b5f; }
figure { margin:0; }
ul { margin:0; padding:0; }
li { font-size:15px; line-height:23px; list-style-type:none; color:#000000; }
blockquote { margin:17px 0; }
blockquote p { font-size:15px; line-height:23px; color:#000000; padding-left:19px; }
blockquote p span { margin-left:-29px;}
img { border:0; }
/* Klassen */
.slash { color:#cd5b5f; padding:0 10px 0 12px; }
h1 span.slash { padding:0 5px 0 12px; }
.einzug { font-size:15px; line-height:23px; padding-left:19px; }
.einzug span.slash { margin-left:-29px; }
.bild { position:absolute; top:110px; right:0; width:40%; text-align:right; }
.text { width:60%; }
/* Bildplatzierung */
img#innere-weisheit { padding-top:10%; }
img#cranium-sacrum { padding-top:10%; }
img#schwingung { padding-top:50%; }
img#krafttier-papagei { padding-top:18%; }
img#kraftbild-baum { padding-top:110%; }
img#craniosacrale-behandlung { padding-top:13%; }
img#portrait { padding-top:0; }
img#kontakt { padding-top:19%; }
img#copyright { padding-top:39%; }
/* Spezial */
div#lageplan-praxis.bild { padding-top:15%; }


/* LAYOUT *******************************************************************************/

/* Body */
body { background:#ffd4cb url('../img/design/hintergrund-spirale.png') left bottom no-repeat; background-size:100% auto; }

/* Main */
div#main {  }

/* Header */
header { margin:0 auto; width:100%; height:220px; background:url('../img/design/hintergrund-spirale.png') center repeat-y; background-size:cover; /*transition:height ease-out 2s;*/ }
.home header { height:440px; }
/* Logo */
div#logo { margin:0 auto; padding:50px 0 0 0; width:950px; max-width:82%; height:100px; }
.home div#logo { padding:0; }
div#logo a { display:block; font-size:12px; line-height:18px; color:#000000; text-decoration:none; padding-left:10px; }
div#logo a img { margin-left:-3px; }
div#logo a strong { font-size:21px; line-height:25px; font-weight:normal; margin-left:-3px; }
/* Zitat */
div#zitat { margin:0 auto; padding-top:150px; width:950px; max-width:82%; height:120px; }
div#zitat p { padding-left:33%; text-align:center; }
div#zitat > p { font-size:12px; line-height:18px; color:#cd5b5f; }
div#zitat blockquote p { text-align:center; font-size:17px; line-height:25px; }
div#zitat blockquote p strong { font-weight:normal; font-size:27px; }
/* Hauptmenu */
div#hauptmenu { width:100%; padding-top:20px; }
div#hauptmenu > div { margin:0 auto; padding:17px 0 0 25px; width:925px; max-width:82%; height:35px; min-height:35px; background-color:#ffe9e4; border-radius:10px 10px 0 0; box-shadow: 0 0 5px #cd5b5f; transition:height ease-out 2s; }
div#hauptmenu ul { margin:0 auto; padding:0; }
div#hauptmenu ul li { display:inline; list-style-type:none; }
div#hauptmenu ul li a { text-decoration:none; color:#000000; transition:color ease-out 0.3s; }
div#hauptmenu ul li a:hover { color:#cd5b5f; }
div#hauptmenu ul li span { color:#cd5b5f; }
/* Menubutton */
div#menubutton { display:none; }
div#menubutton p { margin:0; }
div#menubutton p#close { display:none; }
div#menubutton p a { font-size:15px; line-height:23px; text-decoration:none; color:#000000; transition:color ease-out 0.3s; }
div#menubutton p a:hover { color:#cd5b5f; }

/* Content */
div#content { width:100%; height:auto; background-color:#ffffff; box-shadow: 0 0 5px #cd5b5f; }
div#content > div { margin:0 auto; padding:35px 0 145px 0; width:950px; max-width:82%; height:auto; background-color:#ffffff; }
div#content > div > div.section { position:relative; padding:110px 0 0 0; }
div#content ul li { padding-left:19px; }
div#content ul li span { margin-left:-29px; }
div#content img { margin:0; }
div#content div.bild figure  { text-align:center; }
div#content div.bild figure img { width:auto; max-width:100%; height:auto; }


/* Footer */
footer {  }
footer > div { margin:0 auto; padding:17px 0; width:950px; max-width:82%; height:50px;  }
footer p,
footer p a { margin:0; font-size:12px; line-height:18px; color:#cd5b5f; transition:color ease-out 0.3s; }
footer p a:hover { color:#000000; }
footer p span { color:#000000; }

/* Nachoben-Button */
div#nachoben { position:fixed; bottom:40px; right:0; margin:0; padding:0; width:48px; height:48px; background-color:#cd5b5f; -webkit-box-shadow:0 0 5px #cd5b5f; box-shadow:0 0 5px #cd5b5f; border-radius:12px 0 0 12px; }
div#nachoben img { width:25px; height:30px; padding:10px 0 0 12px; }


/* RESPONSIVE ***************************************************************************/
/* bis 1250 px */
@media screen and (max-width:1250px) {
	/* Tags */
	h2 { padding-bottom:55px; }
	/* Klassen */
	.bild { top:55px; }
	/* Content */
	div#content > div { padding-bottom:90px; }
	div#content > div > div.section { padding-top:55px; }
}
/* bis 1000 px */
@media screen and (max-width:1000px) {
	/* Klassen */
	.bild { width:30%; top:125px; }
	.text { width:70%; }
	/* Content */
	div#content div.bild figure img { width:auto; max-width:82%; height:auto; }
}
/* bis 800 px */
@media screen and (max-width:800px) {
	/* Tags */
	h1 { padding-bottom:30px; }
	h2 { padding-bottom:30px; }
	/* Klassen */
	.bild { position:relative; width:100%; top:0; }
	.text { width:100%; }
	/* Bildplatzierung */
	img#innere-weisheit, 
	img#cranium-sacrum,
	img#schwingung,
	img#krafttier-papagei,
	img#kraftbild-baum,
	img#craniosacrale-behandlung,
	img#portrait,
	img#kontakt,
	img#copyright { padding:4.5% 0 9% 0; }
	div#lageplan-praxis.bild { padding:0 0 4.5% 0; }
	/* Header */
	header { height:auto; }
	.home header { height:auto; }
	/* Zitat */
	div#zitat { padding-top:40px; }
	div#zitat p { padding-left:25%; text-align:right; }
	div#zitat > p { margin-top:-12px; }
	div#zitat blockquote p { font-size:15px; line-height:23px; text-align:right; }
	div#zitat blockquote p strong { font-weight:normal; font-size:21px; }
	/* Menubutton */
	div#menubutton { display:block; }
	/* Menubutton */
	div#hauptmenu > div { height:0; overflow:hidden; transition:height ease-out 1s; }
	div#hauptmenu ul { opacity:0; }
	div#hauptmenu ul li { display:block; padding:9px 0 8px 0; }
	div#hauptmenu ul li:first-child { padding-top:4px; }
	div#hauptmenu ul li:last-child { padding-bottom:17px; }
	div#hauptmenu ul li span.slash { display:none; }
	/* Content */
	div#content > div { padding-bottom:65px; }
	div#content > div > div.section { padding-top:30px; }
	div#content div.bild figure { text-align:center; }
	div#content div.bild figure img { max-width:100%; }
}
/* bis 500 px */
@media screen and (max-width:500px) {
	/* Tags */
	h1 { padding-bottom:17px; }
	h2 { padding-bottom:17px; width:60%; }
	/* Zitat */
	div#zitat { padding-top:30px; padding-bottom:45px; }
	div#zitat p { padding-left:20%; }
	
	/* Logo */
	div#logo { padding-top:40px; height:90px; }
	/* Content */
	div#content > div { padding-bottom:52px; }
	div#content > div > div.section { padding-top:17px; }
}


/* PRINT */
@media print {
	/* Tags */
	html { min-height:0.1%; }
	h1 { font-size:27px; line-height:33px; padding:0 0 20px 0; }
	h2 { font-size:12px; line-height:16px; color:#f5b0a5; width:100%; padding:20px 0 20px 0; }
	p { font-size:12px; line-height:16px; }
	li { font-size:10px; line-height:13px; }
	blockquote { margin:12px 0; }
	blockquote p { font-size:10px; line-height:13px; padding-left:11px; }
	blockquote p span { margin-left:-19px;}
	/* Klassen */
	.slash { padding:0 7px 0 8px; }
	.einzug { font-size:10px; line-height:13px; padding-left:11px; }
	.einzug span.slash { margin-left:-19px; }
	.bild { position:absolute; top:-10px; right:20px; width:10%; }
	.text { padding-right:0; width:100%; }
	/* Bildplatzierungen */
	img#innere-weisheit, 
	img#cranium-sacrum,
	img#krafttier-papagei,
	img#kraftbild-baum,
	img#portrait,
	img#kontakt,
	img#copyright { padding:0; height:auto; max-height:70px; }
	img#schwingung { padding-top:20px; }
	img#craniosacrale-behandlung { padding-top:10px; }
	div#lageplan-praxis.bild { position:relative; top:0; right:0; width:40%; padding:0; }
	/* Layout */
	header { height:auto; background:none; }
	div#zitat { padding:75px 0; }
	div#logo { padding:20px 0 0 0; }
	div#logo a { padding-left:0; font-size:10px; line-height:16px; }
	div#logo a img { margin-left:-2px; width:40px; }
	div#logo a strong { margin-left:-2px; font-size:19px; line-height:23px; }
	div#hauptmenu { display:none; }
	div#content { padding:0; background-color:none; box-shadow:none; }
	div#content > div { padding:20px 0 0 0; }
	div#content > div > div.section { padding:0; }
	div#content ul li { padding-left:11px; }
	div#content ul li span { margin-left:-19px; }
	footer { display:none; }
}



/* TARGETS ******************************************************************************/
#hauptmenu:target > div { height:245px; }
#hauptmenu:target ul { opacity:1; }
#hauptmenu:target div#menubutton { display:none; }