@CHARSET "UTF-8";
/**
 * Optische Formatierung der Seite auf dem Bildschirm
 * @author [bsp] Andy Pillip
 * @version $Id: screen.css 61 2009-07-17 14:19:33Z andy $
 */


body {
  color: #333333;
  font-size: 88%; /* hässlich, aber wir wollen 14px erreichen */
  line-height: 135%;
  margin: 0em;
  padding: 1em;
}

/** Links **/
a img {
  border: none;
  margin: 1px;
}
a:hover img,
a:focus img {
  margin: 0px;
  border: 1px solid #10a5de;
}

#header {
  display: block;
  width: 25em;
  min-width: 270px;
  height: 92px;
  float: left;
  margin: 0em;
  padding: 0em;
}

/**
 * obere Navigation
 **/
#nav-oben {
  display: block;
  max-width: 70em;
  height: 30px;
  margin: 0em;
  padding: 62px 0em 0em 0em; /* Navigation soll am Logoboden beginnen */
  vertical-align: bottom;
  
  font-size: 150%;
  color: black;
  letter-spacing: 0.05em;
}
ul#nav-oben {
  list-style: none;
}
ul#nav-oben li {
  display: block;
  float: left;
  margin: 0em 1em 0em 0em;
  padding: 0em;
  line-height: 101%;
}
#nav-oben a,
#nav-oben .aktiv {
  display: block;
  padding: 0em 0em 0em 20px; /* Platz für die Bullets */
}
#nav-oben a:link,
#nav-oben a:visited {
  text-decoration: none;
  color: black;
  background: url(_bilder/navigationen/oben.gif) no-repeat top left;
}
#nav-oben a:hover,
#nav-oben a:focus {
  text-decoration: none;
  color: #879C24;
  background: url(_bilder/navigationen/oben-aktiv.gif) no-repeat left top;
}
#nav-oben .aktiv {
  color: #879C24;
  background: url(_bilder/navigationen/oben-aktiv.gif) no-repeat left top;
}
#nav-oben a.aktiv:link,
#nav-oben a.aktiv:visited {
  color: #879C24;
  /** der bekommt das inaktive Bildchen dazu **/
}

/**
 * linke Navigationen
 **/

/** die Navigation kann nicht direkt angesprochen werden, weil sie nicht immer existiert **/
#linke-spalte {
  display: block;
  width: 20em; /* 20em = Logobreite */
  min-width: 240px; /* um das padding gekürzt */
  /* Gesamthöhe: 31.7em */
  height: 27em;
  padding: 3em 1em 1em 2em;
  margin: 0em;
  
  float: left;
  clear: both;
  
  /* Zwischen den Balken sind 31em Platz */
  border-top: 0.2em solid #10a5de;
  border-bottom: 0.5em solid #10a5de;
}
/* in der linken Spalte sind 2 Navigationen */
#linke-spalte ul {
  display: block;
  margin: 0em;
  padding: 0em;
  vertical-align: top;
  font-weight: bold;
  list-style: none;
}
#nav-links,
#nav-rechtliches {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#nav-links-platzhalter {
  display: block;
  margin: 0em;
  padding: 0em;
  height: 20em;
}
/**
 * auf der Startseite ist die Hauptnavigation in der linken Spalte
 */ 
#linke-spalte li,
#linke-spalte #nav-oben li {
  display: block;
  float: none;
  margin: 0.5em 0em 0.5em 0em;
  padding: 0em;
}
#nav-links a,
#nav-links .aktiv,
#nav-rechtliches a,
#nav-rechtliches .aktiv {
  display: block;
  padding: 0px 0px 0px 16px; /* Platz für die Bullets */
}
#nav-links a:link,
#nav-links a:visited,
#nav-rechtliches a:link,
#nav-rechtliches a:visited {
  text-decoration: none;
  color: #BDBDBD;
  background: url(_bilder/navigationen/untermenu.gif) no-repeat top left;
}
#nav-links a:hover,
#nav-links a:focus,
#nav-rechtliches a:hover,
#nav-rechtliches a:focus {
  text-decoration: none;
  color: #849C21;
  background: url(_bilder/navigationen/untermenu-aktiv.gif) no-repeat top left;
}
#nav-links .aktiv,
#nav-rechtliches .aktiv {
  color: #849C21;
  background: url(_bilder/navigationen/untermenu-aktiv.gif) no-repeat top left;
}

#main {
  display: block;
  margin: 0em 0em 0em 23em; /* links platz für die Navis halten */
  padding: 0em;
  /* Breite beschränken, sonst werden die Zeilen zu lang */
  max-width: 70em;
  overflow: visible;
}

#inhalt {
  display: block;
  /* Gesamthöhe: 29.6em */
  height: 25.6em;
  margin: 3em 0em 1em 0em;
  padding: 0em 1em 0em 0.5em;
  
  overflow: auto;
}

/** Die Balken-Elemente sind rein gestalterisch **/
.balken {
  display: block;
  padding: 0em;
  margin: 0em 0em 0em 0.5em;
  border-left: 22.5em solid; /* 22.5 ist auch die linke Spalte breit */
}
.balken span {
  display: block;
  padding: 0em;
  margin: 0em 0em 0em 0.5em;
}
.balken.oben {
  border-left-color: #849c21;
}
.balken.oben span {
  height: 0.2em;
  background-color: #ffde00;
}
.balken.unten {
  border-left-color: #849c21;
}
.balken.unten span {
  height: 0.5em;
  background-color: #ffde00;
}

/** Klapplinks **/
.klapplink,
.klapplink:hover,
.klapplink:focus {
  padding-left: 20px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.klapplink.offen {
  background-image: url(_bilder/aufgeklappt.png);
}
.klapplink.zu {
  background-image: url(_bilder/zugeklappt.png);
}

/** Zugänglichkeit **/

/**
  * Das echte Verstecken der Elemente würde dazu führen,
  * dass die Elemente auch nicht gesprochen werden.
  */
p.skip {
  height: 0px;
}
a.skip {
  position: relative;
  left: -1000px;
  top: -1000px;
} 
a.skip:focus {
  position: absolute;
  top: 1em;
  left: 1em;
}


.preisfilm {
  display: block;
  float: right;
  margin: 0em 0em 0.5em 0.5em;
}

/** Startseite **/
#header.startseite {
  height: auto;
  float: none;
}
#inhalt.startseite {
  overflow: visible;
  height: 19.6em; /* die Höhe wird vom Bild beeinflusst, das oben und unten überstehen soll */
}
#inhalt.startseite img {
  position: relative;
  top: -6em; /* den Padding und den Margin überbrücken */
}
#linke-spalte.startseite {
  height: 21em;
  width: 24em; /* bei 12px Schriftgröße: 27em = Logobreite */
  min-width: 295px; /* auch um das Padding von 3em gekürzt */
}
#main.startseite {
  margin-left: 27.5em;
}
#linke-spalte.startseite #nav-links-platzhalter {
  height: 14em;
}