@charset "utf-8";

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

}
/**
    Grundraster
----------------------------------------------------------------------------- */
body {
    font-family : Tahoma, Geneva, sans-serif; 
    color       : #555; 
    font-size   : .8em;
    background  : #444 url(../img/hg_body.gif) repeat-x 50% 0;
}

#log{ position:absolute; background-color:#eee; font-size: .9em; } /* seite.html?log=1 */

div#kopfzeile,
div#spalten div.innen,
div#fusszeile div.innen,
div#bildzeile div.innen {
    width  : 720px;
    margin : auto;
}

div#kopfzeile{ height: 100px; position:relative; }
div#kopfzeile img.logo{ display:block; float: right; margin-top: 20px; }
div#kopfzeile ul{ position:absolute; bottom:0; left:-1px } /* Achtung left wieder rausnehmen wenn die Grafik stimmt */

div#bildzeile {
    background-color : #444;
    overflow         : hidden;
    background       : url(../img/hg_bildzeile.gif) no-repeat 50% 0;
}
/**
    Bildzeile geschlossen Achtung, ergibt sich aus paddings von Element
    
        div#bildzeile-innen div.schalter_bildzeile p
        siehe weiter unten Überschrift "Bildzeile, Text"
 */
div.bildzeile_geschlossen { 
    height: 36px;
}

div#bildzeile div.innen {
    height   : 360px;
    padding  : 0 40px;    /* Abstand links und rechts. Für den Schatten */
    position : relative;  /* um den Container mit den Slogen absolut positioniern zu können */
    overflow : hidden;
    
    /* Das Bild selbst wird im css-Bereich der Seite eingebunden */
    background-repeat   : no-repeat;
    background-position : center center;
}

div#spalten {
    padding-top      : 5px;
    background-color : #fff;
}
/* Abstand zur Fusszeile */
div#spalten div.innen {
    padding-bottom   : 50px;
}

div#spalte-inhalt{ width: 500px; float: left; }
div#spalte-rechts{ width: 190px; float: right; padding-left: 25px; font-size:0.95em;}

/* Fusszeile */
div#fusszeile{ width: 100%; background-color: #444; }
div#fusszeile div.innen{ margin-top: 10px; margin-bottom: 300px; }

/**
    Bildzeile, Text
----------------------------------------------------------------------------- */

/* Alle Elemente in der Bildzeile absolut positionieren */
div#bildzeile-innen img.schalter_bildzeile,
div#bildzeile-innen img.schalter_text,
div#bildzeile-innen div.text,
div#bildzeile-innen p.text,
div#bildzeile-innen img.slide {
    position : absolute;
}

/* Text "Animatin für ..."  */
div#bildzeile-innen p.text {
    z-index       : 2;
    border-top    : 1px solid #444;
    background    : url(../img/schwarz50.png);
    width         : 685px;
    padding       : 9px 0 9px 35px;
    margin-bottom : 0;
    color         : #fff;
}

/* Die Slide-Bilder in den Hintergrund */
div#bildzeile-innen img.slide {
    z-index : 0;
    top     : 0;
    left    : 40px;   /* Der Container bildzeile-innen ist 800px breit wegen dem Schatten/Rändern */
    width   : 720px;
    height  : 360px;
}

/* Textcontainer vor Bilder unterer Rand und transparent im Hintergrund */
div#bildzeile-innen div.text {
    background  : url(../img/schwarz50.png);
    bottom      : 0;
    z-index     : 2;
    width       : 720px;
}
/* Text im Text-Container */
div#bildzeile-innen div.text p:first-child {
    margin-top: 15px; /* erster p-Tag  */
}
div#bildzeile-innen div.text p {
    margin-left : 35px;
    color       : #eee;
}

/* Die Schalter ganz in den Vordergund */
div#bildzeile-innen img.schalter_text,
div#bildzeile-innen img.schalter_bildzeile {
    z-index  : 3;
    left     : 50px;
    display  : block;
    cursor   : pointer;    
}
/* Schalterbild für die Bildzeile */
div#bildzeile-innen img.schalter_bildzeile { top : 10px; }
/* Schalter-bild für den Text */
div#bildzeile-innen img.schalter_text { bottom : 10px; }


/**
    Subspalten
----------------------------------------------------------------------------- */

div.s2l{ float:left; width: 48% }
div.s2r{ float:right; width: 48% }

div.s2l ul, 
div.s2r ul { 
    padding-left: 20px;
	list-style-type:disc;
	margin: -10px 0 20px 15px;
	padding:0px;
	font-size:0.85em;
}
	
div.s2l ul li, 
div.s2r ul li  { 
	line-height:135%;
	margin:0 0 5px 0;
	padding:0px;
}

/**
    Typo
----------------------------------------------------------------------------- */
h1, h2, h3, h4  {
    font-family : 'HapticRegular';
	font-weight:normal;
}

h2 {
    font-size     : 1.6em;
    color         : #DF6C00;
    margin-bottom : 1.2em;
    line-height   : 1.2em;
}

h3 {
    margin-bottom : 1em;
}

h4 {	
    font-size     : 1.4em;
    color         : #DF6C00;
	margin-bottom : 0.5em;
	font-weight:normal;
}
/* Rechte Spalte oben, die Anzeige in welchem Bereich man gerade ist. */
h2.bereich {
    font-size     : .9em;
    color         : #666;
    margin-bottom : 2em;
}

div#spalte-rechts h3 {
    font-size     : 1em;
    color         : #aa2c2d;
    margin-bottom : .3em;
    line-height   : 1.2em;
    font-weight  : bold;
}
div#spalte-rechts h4 {
    font-size     : .9em;
    color         : #aa2c2d;
    margin-bottom : .3em;
}


div#spalte-inhalt ul { 
	list-style:disc;
	margin: 0 0 20px 15px;
	padding:0px;
}

div#spalte-inhalt ul li  { 
	line-height:135%;
	margin:0 0 5px 0;
	padding:0px;
}


/* Absätze */
p{ line-height: 1.3em; margin-bottom: 1.3em; }

strong {
    font-weight:bold;
}


div#spalte-rechts p {
    font-size     : .9em;
	margin-bottom : 12px;
}
div#spalte-rechts p.gross {
    font-size     : 1.1em;
}

/* Links */
a { text-decoration: underline; color: #df6b04;  }

hr { margin: 0; border: 0; height:1px; }
hr.trenner{ clear: both; }
hr.unsichtbar{ visibility: hidden }
hr.margin{ margin: 25px 0 }  
hr.punkte {
    height     : 1px;
    background : url(../img/hg_punkte.gif);
}
hr.teaser {
    height     : 1px;
    background : url(../img/hg_punkte_lang.gif) no-repeat;
    margin     : 10px 0;
}

/* Elemente verstecken */
.unsichtbar{ visibility: hidden}




/**
    Teaser
----------------------------------------------------------------------------- */

/* Aussenhaut für die Teaser die durchgeklickt werden können */
div#teaser-outer{ height: 180px; overflow:hidden; }              /* siehe: ie6_hacks.css */
div#teaser-outer-mehrzeilig{ height: 582px; overflow:hidden; }   /* siehe: ie6_hacks.css */

/* Schalter für zurück/weiter */
div.teaser_controls{ background : url(../img/hg_punkte.gif) repeat-x; padding-top: 5px; margin-top:5px; }
div.teaser_controls span.schalter{ cursor:pointer; }
div.teaser_controls span#left { float:left; }
div.teaser_controls span#right { float:right; }

div.teaser {
    background : url(../img/hg_teaser_grau.gif) 100% 0;
    width      : 100%; 
    height     : 180px;
    position   : relative;
}
div.teaser:hover {
    background : url(../img/hg_teaser_gelb.gif) 100% 0;
}

div.teaser a.extern {
    color:#FFB200;
    font-size: 1.3em;
    text-decoration:none;
}
div.teaser:hover a.extern {
    color:#790000;
}
div.teaser div.text {
    width      : 240px;
    float      : right;
}

div.teaser img.thumb {
    width        : 244px;
    height       : 180px;
    border-right : 1px solid #fff;
    display      : block;
    float        : left;
}
div.teaser h3 {
    font-size           : 1.1em;
	font-weight         : normal;
    margin-bottom       : .4em;
    line-height         : 1.2em;
    color               : #fff; 
    padding             : 3px 0 3px 25px;
    background-repeat   : no-repeat;
    background-position : 0 2px;
    background-image    : url(../img/icon/pfeil_hellgrau_ost.png);
    margin-top          : 10px;
}
div.teaser h3 a {
    color            : #fff;
    text-decoration  : none; 
}
div.teaser:hover h3 {
    background-image    : url(../img/icon/pfeil_rot_ost.png);
}
div.teaser p {
    font-size     : .85em;
	line-height   : 120%;
    margin-bottom : .6em;
    color         : #111;
    padding-right : 10px;
}
div.teaser p.galeriebilder { display:none; }
div.teaser p.unten {
    display		 : none;
	visibility	 : hidden;
	position     : absolute;
    bottom       : 5px;
    margin-bottom: 0;
    left         : 260px;
    padding-left : 8px;
    color        : #fff;
    background   : url(../img/icon/pfeil_kleinweiss_ost.png) no-repeat 0 4px;
    font-size    : .75em;
}


div.teaser div.text p a {
    color:#FFB200;
	}
div.teaser:hover div.text p a {
    color:#790000;
}	

/* Button der bei Mouseover eingeblenden wird. */
div.teaser a.mehr {
    position   : absolute;
    left       : 0;
    display    : block;
    visibility : hidden;
    width      : 245px;
    height     : 180px;
}
div.teaser:hover a.mehr {
    visibility: visible;
}
div.teaser:hover a.mehr img {
    margin-left: 110px;
    margin-top: 75px;
}

/**
    Formular
----------------------------------------------------------------------------- */

div#spalte-inhalt ul.formular{ list-style-type: none; padding:0; padding-left:0; margin: 0; margin-left:0}
div#spalte-inhalt ul.formular li.zeile { margin-bottom : 10px; }

ul.formular li.zeile label {
    display : block;
    width   : 25%; 
    float   : left;
}

ul.formular li.zeile label span {
    color   : #AA2C2D;
}
ul.formular li.zeile div.feld {
    width   : 74%;
    float   : left;
}

ul.formular select,
ul.formular input,
ul.formular textarea {
    width   : 96%;
    padding : 3px 2%;
    border  : 1px solid #DF6C00 
}
ul.formular textarea {
    font-family: inherit;
	font-size: inherit;
}
ul.formular select{ width: 100% }
ul.formular input.schalter{ width: 100% }

/* Felder die benötigt werden */
ul.formular .required{  }

ul.formular p.captcha img {
    border      : 1px solid #DF6C00;
    display     : block;
    float       : left;
    margin-right: 15px;
}
/* Text "* Benötige Angaben" */
p.pflichtfeld{ text-align: right; margin-top: 15px;}
p.pflichtfeld span{ color: #AA2C2D; } /* Sternchen */

/* Wenn Mail versendet wurde */
p.mail_versendet{ background:url(../img/icon/tick.png) no-repeat 3px 50%; padding:8px; padding-left:25px; font-weight:bold; border: 1px solid #009F33 }

/* Fehlermeldungen */
/* Meldung "Fehler: diese Feld muss...." Gleiche Einstellung wie input-Feld für gleiche Breite */
ul.formular .validation-advice{ color: #eee; background-color: #DF6C00; padding: 2px 2%; width:96%; border-left:2px solid #DF6C00  }

/* Fehlermeldung wenn nicht per JS vorgeprüft wird */
div.form_errors{ background:url(../img/icon/achtung.png) no-repeat 3px 6px; padding:8px; padding-left:25px; border: 1px solid #AA2C2D; margin-bottom: 20px; }
div.form_errors h3{ font-size: 1.6em; color:#AA2C2D; }
div.form_errors div.error_items p.fields{ line-height:1.5em; }
div.form_errors div.error_items p{ margin-bottom: .9em; }
div.form_errors div.error_items strong{ color: #C00; background-color: #FFF; display:block; margin-bottom:3px; }

/**
    Fusszeile
----------------------------------------------------------------------------- */
div#fusszeile h3,
div#fusszeile p {
    color : #aaa;
}

div#fusszeile h3 {
    font-weight   : bold;
    margin-bottom : .7em;
}
/**
 * Trennstriche nach Links
 * <a href></a><span.trenner>|</span> <a href>
 */
div#fusszeile span.trenner {
    margin : 0 4px;
}
/* Letzter span/Trennstrich */
div#fusszeile span.last {
    display : none;
}

div#fusszeile p.copyright {
    font-size     : .85em;
    color         : #888;
    margin-bottom : 2em;
}
div#fusszeile p.copyright a{
    color         : #888;
}

div#fusszeile p.schlagworte {
    font-size : .85em
}
div#fusszeile p.schlagworte a:link,
div#fusszeile p.schlagworte a:visited {
    color           : #aaa;
    text-decoration : none;
}
div#fusszeile p.schlagworte a:hover {
    text-decoration : underline;
    color           : #df6b04;
}
div#fusszeile p.schlagworte span.trenner {
    margin : 0 0 0 3px;
}



/**
    Navigationen
----------------------------------------------------------------------------- */
   
/* Kopfnavigation */    
ul.kopfnavigation { 
    background      : url(../img/kopfnavigation_trenner.png) left bottom no-repeat;
}
ul.kopfnavigation li { 
	float           : left;
}
ul.kopfnavigation li a {
    font-size       : 1.25em;
    text-decoration : none;
    background      : url(../img/kopfnavigation_trenner.png) right bottom no-repeat;
    display         : block;
    padding         : 8px 12px;
    color           : #aa2c2d;
    font-weight     : normal;
}
ul.kopfnavigation li a:hover,
ul.kopfnavigation li.active a {
    color : #eee;
}

/* Breadcrumb- Navigation */
p.breadcrumb { font-size: .85em; margin-bottom: 2em; margin-left:2px;}
p.breadcrumb a {
    color: #666;
    text-decoration: none;
}
p.breadcrumb span.B_currentCrumb {
    color      : #aa2c2d    
}

/* Subnavigation Rechts */
ul.subnavigation li a { text-decoration: none; color : #999; font-size: 1.2em; padding: 5px 0; display:block;  }
ul.subnavigation li a:hover { 
    color        : #aa2c2d;
    margin-left  : -26px; 
    padding-left : 26px;
}
ul.subnavigation li.active a { 
    color        : #aa2c2d;
    margin-left  : -26px; 
    padding-left : 26px;
    background   : url(../img/icon/pfeil_orange_ost.png) no-repeat 0 2px;
}
/* zweite Ebene */
ul.subnavigation ul {
    margin: 0 0 20px 0px;
}
/* a zurücksetzen */
ul.subnavigation li.active li a {
    color        : #999;
    font-size    : .90em; 
	line-height  : 1.1em;
    background   : none;
    margin-left  : 0;
    padding-left : 12px;
	padding-top	 : 2px;
}
ul.subnavigation li li a:hover { 
    margin-left  : 0; /* IE6 */
    padding-left : 12px; /* IE6 */
    color        : #aa2c2d;
}
ul.subnavigation li.active li.active a { 
    margin-left  : 0; /* IE6 */
    padding-left : 12px; /* IE6 */
    color        : #aa2c2d;
    background   : url(../img/icon/doppelpfeil_kleinrot_ost.png) no-repeat 0 6px;
}


/**
    Lightbox
----------------------------------------------------------------------------- */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../img/icon/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../img/icon/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../img/icon/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../img/icon/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
s