body {
    font-family: 'Comic Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";

min-width: 1002px;
min-height: 177px;
max-width: 1002px;
margin: 15px;
-webkit-text-size-adjust: none; /*Schriftgroessen sollen auch auf Handys im Verhaeltnis gleich gross bleiben!*/

}

/* 

 	font-weight: 100; Comic Neue Light
 	font-weight: 300; Comic Neue Regular 
 	font-weight: 700; Comic Neue Bold
	font-style: oblique; for the oblique equivalents.

  Change 'Comic Neue' to 'Comic Neue Angular' for the Angular variants
  For example Comic Neue Angular Bold Oblique would be:

 	body {
		font-family: 'Comic Neue Angular', sans-serif;
		font-style: oblique;
		font-weight: 700;
    font-size: 1em;
    line-height: 1.5;
 	}
	or in shorthand: body { font: oblique 700 1em/1.5 'Comic Neue Angular', sans-serif; }

*/

/* ==========================================================================
   FONT STACK
   ========================================================================== */

/*	@font-face format credit to Chris Coyier http://css-tricks.com/snippets/css/using-font-face/ */
/*	And John, Kevin & Sven Read http://www.newnet-soft.com/blog/csstypography */
/*	An old but still great article on @font-face performance http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ */

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Light.eot');
  src: url('fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Light.woff2') format('woff2'),
       url('fonts/ComicNeue-Light.woff') format('woff'),
       url('fonts/ComicNeue-Light.ttf')  format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Light-Oblique.eot');
  src: url('fonts/ComicNeue-Light-Oblique.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Light-Oblique.woff2') format('woff2'),
       url('fonts/ComicNeue-Light-Oblique.woff') format('woff'),
       url('fonts/ComicNeue-Light-Oblique.ttf')  format('truetype');
  font-weight: 300;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Regular.eot');
  src: url('fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Regular.woff2') format('woff2'),
       url('fonts/ComicNeue-Regular.woff') format('woff'),
       url('fonts/ComicNeue-Regular.ttf')  format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Regular-Oblique.eot');
  src: url('fonts/ComicNeue-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Regular-Oblique.woff2') format('woff2'),
       url('fonts/ComicNeue-Regular-Oblique.woff') format('woff'),
       url('fonts/ComicNeue-Regular-Oblique.ttf')  format('truetype');
  font-weight: 400;
  font-style: oblique;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Bold.eot');
  src: url('fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Bold.woff2') format('woff2'),
       url('fonts/ComicNeue-Bold.woff') format('woff'),
       url('fonts/ComicNeue-Bold.ttf')  format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Bold-Oblique.eot');
  src: url('fonts/ComicNeue-Bold-Oblique.eot?#iefix') format('embedded-opentype'),
       url('fonts/ComicNeue-Bold-Oblique.woff2') format('woff2'),
       url('fonts/ComicNeue-Bold-Oblique.woff') format('woff'),
       url('fonts/ComicNeue-Bold-Oblique.ttf')  format('truetype');
  font-weight: 700;
  font-style: oblique;
}


footer {
	background: #eeeeee;
	padding-top: 12px;
	padding-right: 36px;
	padding-bottom: 12px;
	padding-left: 15px;
	margin-top: -4px;
	margin-right: 1px;	
/*	margin-bottom: 20px;*/
	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2);
}

*/============================= Bildrahmen im Absatz rechts ausrichten ============================= */
.fotorahmen {
/*float:right;*/
width: 500px;
height: auto;
padding-top: 20px;
padding-bottom: 50px;
border:10px solid #ffffff;
box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 20px;
}

*/============================= Bildschatten in Fotos ============================= */
.foto {
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.2);
}

*/============================= Rechte (und linke) Ausrichtung aufheben ============================= */
.clearing {
clear: both;
}

span.unterlegt {
font-size: 14px;
color:#336699;
line-height:16px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
padding: 10px;
background-color: #ffffff;
}

.linie {
border:solid;
border-top-width:1px;
border-right-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-color:#dddddd;
width: 970px;
}


*/============================= Seitenstruktur ============================= */

article {
	background-color: #ffffff;
	padding-top: 36px;
	padding-right: 50px;
	padding-bottom: 36px;
	padding-left: 60px;
	margin-top: 0px;	
	margin-right: 80px;	
	margin-bottom: 12px;
	margin-left: -1px;
	font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 20px;
	box-shadow: 0 10px 8px rgba(0, 0, 0, 0.2);
	max-width: 1002px;
}



A:link { text-decoration: none; color: #ffffff; }
A:visited { text-decoration: none; color: #ffffff; }
A:hover { text-decoration: none; color: #ffffff; }
A:active { text-decoration: none; color: #ffffff;  background-color: #ffffff;}

a {
display:block;
color:#aaaaaa;
background-color:#6699cc;

width:89px;
height:12px;
padding:5px;
font-size:14px;
line-height:10px;
text-decoration:none;
text-align:center;
margin:0px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
}

a:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a:active {
display:block;
background-color:#999999;
}


a.eng {
width:55px;
}



#Buchschatten440 {
box-shadow: 1px 1px 5px black;
height:300px;
width:440px;
}


/*#Bildrahmen {
width: auto;
height:auto;
border: 1px solid #aaaaaa;
}
will nicht: Wie beim Schatten brauchts die Breite und Hoehe, der Rahmen ist unten und rechts zu weit
*/

a.aktuell:link { text-decoration: none; color: #336699; }
a.aktuell:visited { text-decoration: none; color: #336699; }
a.aktuell:hover { text-decoration: none; color: #ffffff; }
a.aktuell:active { text-decoration: none; color: #336699; background-color: #ffffff; }

a.aktuell {
display:block;
color:#336699;
background-color:#ffffff;

width:300px;
height:12px;
padding:5px;
font-size:14px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
margin:0px;
}

a.aktuell:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.aktuell:active {
display:block;
color:#336699;
background-color:#ffffff;
}




a.blau:link { text-decoration: none; color: #ffffff; }
a.blau:visited { text-decoration: none; color: #ffffff; }
a.blau:hover { text-decoration: none; color: #336699; }
a.blau:active { text-decoration: none; color: #ffffff; background-color: #336699; }

a.blau {
display:block;
color:#ffffff;
background-color:#6699cc;
width:200px;
height:12px;
padding:5px;
font-size:14px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
margin:0px;
}

a.blau:hover {
display:block;
color:#336699;
background-color:#99ccff;
}

a.blau:active {
display:block;
color:#336699;
background-color:#99ccff;
}



a.dunkelblau:link { text-decoration: none; color: #ffffff; }
a.dunkelblau:visited { text-decoration: none; color: #ffffff; }
a.dunkelblau:hover { text-decoration: none; color: #336699; }
a.dunkelblau:active { text-decoration: none; color: #ffffff; background-color: #225588; }

a.dunkelblau {
display:block;
color:#ffffff;
background-color:#225588;

width:100px;
height:12px;
padding:5px;
font-size:14px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
margin:0px;
}

a.dunkelblau:hover {
display:block;
color:#003366;
background-color:#5588bb;
}

a.dunkelblau:active {
display:block;
color:#336699;
background-color:#5588bb;
}



a.schmal:link { text-decoration: none; color: #336699; }
a.schmal:visited { text-decoration: none; color: #ffffff; }
a.schmal:hover { text-decoration: none; color: #336699; }
a.schmal:active { text-decoration: none; color: #ffffff; background-color: #336699; }

a.schmal {
display:block;
color:#336699;
background-color:#ffffff;

width:100px;
height:12px;
padding:5px;
font-size:14px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
margin:0px;
}

a.schmal:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.schmal:active {
display:block;
color:#336699;
background-color:#ffffff;
}


a.drin:link { text-decoration: none; color: #336699; }
a.drin:visited { text-decoration: none; color: #ffffff; }
a.drin:hover { text-decoration: none; color: #336699; }
a.drin:active { text-decoration: none; color: #ffffff; background-color: #336699; }

a.drin {
display:block;
color:#336699;
background-color:#ffffff;

width:100px;
height:6px;
padding:1px;
font-size:14px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
margin:0px;
}

a.drin:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.drin:active {
display:block;
color:#336699;
background-color:#ffffff;
}


a.mini:link { text-decoration: none; color: #ffffff; }
a.mini:visited { text-decoration: none; color: #ffffff; }
a.mini:hover { text-decoration: none; color: #6699cc; }
a.mini:active { text-decoration: none; color: #ffffff; background-color: #336699; }

a.mini {
display:block;
color:#ffffff;
background-color:#6699cc;
width:157px;
height:9px;
padding:3px;
font-size:9px;
font-family: 'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
/*margin:2px;*/
}

a.mini:hover {
display:block;
color:#336699;
background-color:#99ccff;
}

a.mini:active {
display:block;
color:#ffffff;
/*background-color:#ffffff;*/
}


a.breit:link { text-decoration: none; color: #ffffff; }
a.breit:visited { text-decoration: none; color: #ffffff; }
a.breit:hover { text-decoration: none; color: #ffffff; }
a.breit:active { text-decoration: none; color: #ffffff; background-color: #ffffff; }

a.breit {
display:block;
color:#aaaaaa;
background-color:#6699cc;

width:110px;
height:12px;
padding:5px;
font-size:14px;
line-height:9px;
text-decoration:none;
text-align:center;
margin:0px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
}

a.breit:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.breit:active {
display:block;
background-color:#999999;
}


a.mittelbreit:link { text-decoration: none; color: #ffffff; }
a.mittelbreit:visited { text-decoration: none; color: #ffffff; }
a.mittelbreit:hover { text-decoration: none; color: #ffffff; }
a.mittelbreit:active { text-decoration: none; color: #ffffff; background-color: #ffffff; }

a.mittelbreit {
display:block;
color:#aaaaaa;
background-color:#6699cc;

width:220px;
height:10px;
padding:3px;
font-size:14px;
line-height:8px;
text-decoration:none;
text-align:center;
margin:0px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
}

a.mittelbreit:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.mittelbreit:active {
display:block;
background-color:#999999;
}


a.extrabreit:link { text-decoration: none; color: #ffffff; }
a.extrabreit:visited { text-decoration: none; color: #ffffff; }
a.extrabreit:hover { text-decoration: none; color: #ffffff; }
a.extrabreit:active { text-decoration: none; color: #ffffff; background-color: #ffffff; }

a.extrabreit {
display:block;
color:#aaaaaa;
background-color:#6699cc;

width:550px;
height:10px;
padding:3px;
font-size:14px;
line-height:8px;
text-decoration:none;
text-align:center;
margin:0px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
}

a.extrabreit:hover {
display:block;
color:#ffffff;
background-color:#336699;
}

a.extrabreit:active {
display:block;
background-color:#999999;
}


*/============================= Stile ============================= */
h1 {
font-size: 24px;
line-height:25px;
padding-top: 10px;
}

h1.klein {
font-size: 26px;
line-height:25px;
padding-top: 20px;
}

h2 {
line-height:25px;
	font-weight: 700;
}

h3 {
line-height:20px;
	font-weight: 700;
}

.titel {
font-size:40px;
color:#ffffff;
line-height:72px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
font-weight: 700;
text-align:left;
}

.seite {
font-size:40px;
color:#ffffff;
line-height:36px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
font-weight: 700;
text-align:left;
}

.jahr {
font-size:40px;
color:#ffffff;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
font-weight: 700;
text-align:left;
margin-bottom: 10px;
margin-top: 10px;
}

.kt {
font-size:18px;
color:#336699;
line-height:24px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}

p {
font-size: 16px;
color:#336699;
line-height:18px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}

.normal {
font-size: 16px;
color:#336699;
line-height:18px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}

.rechts {
font-size: 16px;
color:#336699;
line-height:18px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
font-weight: 400;
text-align:right;
}

.bu {*/============================= Bildunterschrift ============================= */
font-size:15px;
color:#ffffff;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
margin-top: 10px;
}

.bo {*/============================= Bildoberschrift ============================= */
font-size:15px;
color:#ffffff;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
margin-bottom: -4px;
}

#abstand {
padding-left: 15px;
margin-top: -3px;
text-align:left;
margin-bottom: 20px;
}

.oben8 {
margin-top: -8px;
}

.unten10 {
padding-bottom: 10px;
}

.preise {
font-size: 16px;
color:#336699;
line-height:18px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}

span.klein {
font-size: 14px;
color:#336699;
line-height:16px;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}

span.fuss {
font-size:14px;
color:#ffffff;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
}


span.fussrechts {
font-size:16px;
color:#ffffff;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-align:left;
text-indent: 600px;
}


span.css {
font-size: 12px;
color: #000000;
line-height: 21px;
font-family: Courier;
}

figure{
  margin: 0;
}

figure.bild {
display: inline-block;
padding-right: 15px;
padding-top: 15px;
}

/*Für Button "nach oben"*/

.nachoben {
display:block;
color:#000000;
background-color:#6699cc;
width:80px;
height:20px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.3);
font-size:15px;
line-height:14px;
font-weight:normal;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
padding-top: 9px;
/*	float: none;*/
}

.nachoben:hover {
display:block;
color:#ffffff;
background-color:#336699;
font-size:15px;
padding-top: 9px;
}

.jahrsprung {
display:block;
color:#000000;
background-color:transparent;
width:60px;
height:20px;
box-shadow: 0px 0 1px 0px rgba(255,255,255,1.0);
font-size:18px;
line-height: 16px;
font-weight:normal;
font-family:'Comic Neue', Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
/*padding-top: 10px;*/
/*	float: left;*/
}

.jahrsprung:hover {
display:block;
color:#ffffff;
background-color:#cccccc;
font-size:18px;
/*padding-top: 10px;*/
}

.jahrsprung:active {
background-color:transparent;
}

aside {
	bottom:10px;
	position:fixed;
	right:10px;
	margin-top: 20px;
	}
	
	aside.oben {
	top:10px;
	position:fixed;
	right:10px;
	}