@font-face {
    font-family: 'philosopherbold';
    src: url('../fonts/philosopher-bold-webfont.eot');
    src: url('../fonts/philosopher-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/philosopher-bold-webfont.woff') format('woff'),
         url('../fonts/philosopher-bold-webfont.ttf') format('truetype'),
         url('../fonts/philosopher-bold-webfont.svg#philosopherbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'philosopherregular';
    src: url('../fonts/philosopher-regular-webfont.eot');
    src: url('../fonts/philosopher-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/philosopher-regular-webfont.woff') format('woff'),
         url('../fonts/philosopher-regular-webfont.ttf') format('truetype'),
         url('../fonts/philosopher-regular-webfont.svg#philosopherregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


*
{ color: #3a390e; font-family: philosopherregular, Arial, sans-serif; font-style: normal; text-decoration: none; padding: 0; margin: 0; }

html
{ height: 100%; }

body
{ font-size: 126%; line-height: 145%; height: 92%; background: #ffffff; padding: 0; border: none; padding: 0; }

body#var1
{ font-size: 92%; height: auto; }

#inhalt
{ position: relative; width: 500px; height: 80%; background: rgba(250, 250, 250, 0.84); padding: 36px 50px 50px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 2px 2px 15px -3px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 15px -3px rgba(0,0,0,0.3); box-shadow: 2px 2px 15px -3px rgba(0,0,0,0.3); margin: 3% auto; }

#var1 #inhalt
{ position: static; width: 92%; max-width: 800px; height: auto; background: none; padding: 20px 4% 30px; -webkit-border-radius: none; -moz-box-border-radius: none; border-radius: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin: 0 auto; }

#kopf
{ padding: 0 0 0.6em; border-bottom: 1px solid #ccccaa; margin: 0 0 1.8em; }

#var1 #kopf
{ display: none; }

#kopf h1
{ color: #8c8a6c; font-size: 1.5em; font-weight: 400; margin: 0; }

#kopf h1 span
{ color: #8c8a6c; font-size: 0.6em; font-weight: 400; margin-left: 20px; }

#kopf a:link, #kopf a:visited
{ color: #8c8a6c; }

#kopf a:hover, #kopf a:active, #kopf a:focus
{ color: #acaa8c; }


#navi
{ position: absolute; bottom: 25px; font-size: 0.8em; width: 500px; padding: 0.6em 0 0; border-top: 1px solid #ccccaa; }

#var1 #navi
{ position: static; font-size: 1.1em; width: auto; padding: 1em 0 0; margin: 2em 0 0; }

#navi .prev
{ margin-right: 1.2em; }

#navi .next
{ margin-right: 2em; }

#navi .right
{ float: right; text-align: right; line-height: 110%; width: 44%; color: #6c6a4c; font-size: 0.9em; }

#navi .foto
{ display: block; color: #6c6a4c; font-size: 0.9em; }

#navi .impressum
{ display: block; font-size: 0.9em; margin-left: 1em; }




#navi a:link, #navi a:visited
{ color: #6c6a4c; }

#navi a:hover, #navi a:active, #navi a:focus
{ color: #8c8a6c; }


#fuss
{ display: none; }


a:link, a:visited
{ color: #000000; }

a:hover, a:active, a:focus
{ color: #444444; }


.csc-frame-frame1
{ font-size: 0.85em; line-height: 135%; }



/* example
@media only screen and (min-width: 641px) and (max-width: 970px) {
  #inhalt 
  { width: 95%; }
}
*/

@media only screen and (max-width: 640px) {
	body
	{ font-size: 110%; }
	
	#inhalt
	{ width: 450px; padding: 30px 30px 40px; }

	#inhalt::after
	{ content: ""; display: block; height: 160%; }

	#navi
	{ bottom: 20px; width: 450px; }
}

@media only screen and (max-width: 550px) {
	body
	{ font-size: 100%; }
	
	#inhalt
	{ width: 400px; min-height: 370px; padding: 20px 30px 30px; }
	
	#navi
	{ bottom: 15px; width: 400px; }
}


@media only screen and (max-height: 610px) {
	body
	{ font-size: 100%; }
	
	#inhalt
	{ width: 400px; min-height: 370px; padding: 20px 30px 30px; }
	
	#navi
	{ bottom: 15px; width: 400px; }
}


@media only screen and (max-width: 500px) {
	body
	{ font-size: 90%; }
	
	#inhalt
	{ width: 81%; min-height: 370px; padding: 20px 6% 30px; }
	
	#navi
	{ bottom: 15px; width: 87%; }
}

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

	#navi .right
	{ float: none; width: 100%; }
}