/*
 * Tilo Schumann - www.tilo-schumann.de
 *
 */


/*  Normierung  */

body, div, dl, dt, dd, ul ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0; padding:0;}

h1, h2, h3, h4, h5, h6 {	font-size:100%;}

ul {	list-style:none;margin:0;padding:0;}

address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal;}

table {border-collapse:collapse;border-spacing:0;}

fieldset, img {border:0;}

caption, th {text-align:left;}

q:before, q:after {content : '';} /*Entfernt Anführungszeichen aus q*/

.dispnone {display:none;}


/*  Schriften  */


/* @license
 * MyFonts Webfont Build ID 2585868, 2013-06-21T08:35:50-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Neo Sans Pro Regular by Monotype Imaging
 * URL: http://www.myfonts.com/fonts/mti/neo-sans/pro-regular/
 * Copyright: Copyright 2004 Monotype Imaging, Inc. All rights reserved.
 * 
 * Webfont: Neo Sans Std Regular by Monotype Imaging
 * URL: http://www.myfonts.com/fonts/mti/neo-sans/std-regular/
 * Copyright: Copyright 2004 Monotype Imaging, Inc. All Rights Reserved.
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2585868
 * 
 * © 2013 MyFonts Inc
 */



@font-face {font-family: 'NeoSansPro';src: url('fonts/27750C_0_0.eot');src: url('fonts/27750C_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/27750C_0_0.woff') format('woff'),url('fonts/27750C_0_0.ttf') format('truetype'),url('fonts/27750C_0_0.svg#wf') format('svg');}


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 21, 2013 05:52:46 AM America/New_York */

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

}


/* Grundlayout  */


html {
/*    height:101%;*/
}


/* Schriften */

body {
    font-family: 'NeoSansPro';
    color:#656565;
    line-height:1.8em;
    font-size:16px;
}


#grauBox {
    color:white;
}

#slogan {
    font-weight:normal;    
    font-size:16px;
}


h2 {
    margin: 1em auto;
}

p {
    margin-bottom:1em;
}

#footer {
    font-size:11px;
}

a {
    color:white;
    text-decoration:none;
}

#content ul {
    list-style: disc outside none;
    margin-left:15px;
}

li {vertical-align:top;}

.fontModernPics {
    font-family: 'ModernPictogramsNormal';
    font-size:17px;
    position:relative;
    top:-2px;
    margin-right:5px;
}


@media (min-width: 750px) {

    /*  Component: Grundlayout  */

    body {
	width:100%;
	margin:auto;
	position:relative;
    }

    .desk {display:block;}
    .mobile, .mobile-more {display:none;}


    /*  Component: Header  */

    #header {
	width:1024px; 
	margin:auto;
	position:relative;
	height:110px;
    }

    #header #logo { 
	position:absolute;
	top:32px;
	left:70px;
    }

    #header #navigation {
	left: 525px;
	position: absolute;
	top:48px;
    }

    #header #navigation > li {
	position:relative;
	float:left;
    }

    #header #navigation > li div.desk {
	display:inline;
	margin-right:4px;
    }

    .hoverElement {
	display:none;
	position:absolute;
	z-index:50;
	right:0;
	margin-right:-325px;
    }

    .hoverElement ul.hover_rahmen {
	background: none repeat scroll 0 0 white;
	border: 6px solid #D9DADB;
	border-bottom-right-radius: 98px;
	position:relative;
	color: #3C3B3B;
	font-size: 14px;
	line-height: 30px;
	list-style-image: url("img/green_square.png");
	padding-bottom: 35px;
	padding-top: 15px;
	padding-left:30px;
	width: 320px;
	z-index: 60;
    }

    .hoverElement ul.hover_rahmen li {
	padding-left:5px;
    }

    .hoverElement > a {
	text-decoration:none;
    }

    .hover_logo {
	float:right;
	margin-right:14px;
	margin-top:-3px;
    }

    .hoverElementPfeil {
	display:block;
    }

    .hoverElementSchatten {
	posititon:aboslute;
	margin-top:-111px;
	margin-left:-9px;
    }

    .hoverHelp { 
	/* falls Maus neben der Box wandert */
	height:100px;
	width:110px;
	position:absolute;
	top:0px;
	z-index:45;
	left:0;
	display:none;
    }

    #header ul li:hover .desk div {
	display: block;
    }

    #naviKontakt {
	font-size: 12px;
	line-height: 24px;
	list-style-image: url("img/gray_dreieck.png");
	left:100px;
	top:-30px;

    }

    #naviKontakt a {
	color:#656565;
    }


    /*  Component: Content - Grundgerüst  */


    #content {
	width:100%;
	position:relative;
    }

    h1 {
	font-size: 36px;
	font-weight: normal;
	line-height: 58px;
	margin-bottom: 35px;
	margin-top: 0;
    }

    h2 {
	font-size:24px;
    }

    .mob-icon {
	display:none;
    }

    /*  Component: Content - Teaser */

    #teaserWrap {
/*	position:absolute;*/
	width:100%;
	position:relative;
    }
  
  .drupal7 #teaserWrap {
    position: absolute;
  }

    #leftBack {
	background:#D2EABA;;
	width:50%;
	height:100%;
	position:absolute;
	z-index:0;
    }

    #slogan {
	position:absolute;
	color:white;
	z-index:10;
	font-size: 16px;
	font-weight: normal;
	right: 18px;
	top: 16px;
    }

    #teaser {
	background:#69b919;
	width:970px;
	right:27px;
	overflow:hidden;
	width:730px;
	padding: 95px 105px 25px 135px;
	margin:auto;
	font-size:17px;
	color:white;
	z-index:5;
	position:relative;
	left:50%;
	margin-left:-512px;
	height:100%;
	min-height:380px;
    }

    #teaser p,  #teaser ul {
	font-size:17px;
	margin-left:335px;
    }

    #teaser ul {
	list-style:disc;
	padding-left:20px;
	margin-bottom:1em;
    }

    #teaser li {
	padding-left: 3px;
    }

    #teaser ul.startRight {
	display:block;
	width:325px;
	margin-left:0;
	float:left;
    }

    #teaser li.weitAbstand {
	margin-bottom:1em;
    }

    #teaser .moreInfo {
	text-align:right;
	width:auto;
	margin-top:2em;
    }

    .greenBoxLeft {
	position:absolute;
    }


    /*  Component: Schatten  */
    
    #greenSchatten {
	background:url('img/teaserSchatten.png') no-repeat;
	position:absolute;
	left:50%;
	margin-left:-512px;
	width:969px;
	height:38px;
	z-index:10;
    }

    #leftSchatten {
	background:url('img/leftBoxSchatten.png') repeat-x scroll 0 0 white;
	position:absolute;
	width:50%;
	margin-left:-512px;
	height:28px;
	z-index:10;
    }
    
    /*  Component:  Main  */

    #mainWrap {
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 95px;
	width: 100%;
    }
  
    .drupal7 #mainWrap {
      position: relative;
      z-index: 20;
    }
  
    .drupa7 #bottomWrap {
      display: none;
    }
    .drupal7 #main {
      height: auto;      
    }
  


    .rightBack{
	background: none repeat scroll 0 0 #D1D1D1;
	height: 100%;
	position: absolute;
	left:50%;
	width: 50%;
	z-index: 0;
	top:95px;
    }

    #main {
	background: none repeat scroll 0 0 #656565;
	margin:auto;
	padding: 60px 83px 3px 260px;
	position: relative;
	width: 681px;
	color:white;
	overflow:hidden;
	height:100%;
    }

    .js-leftFire, .js-rightFire {
	cursor:pointer;
    }

    /*  Component: BottomBox  */

    #bottomWrap {
	width:100%;
	position:absolute;
	height:105px;
    }

    #bottomWrap .rightBack{
	top:0;
    }

    #bottomBox {
	background: #656565;
	width: 1024px;
	margin:auto;
	height:105px;
	position:relative;
    }

    #angebotIcons {
	float: right;
	margin-top: 17px;
	position: relative;
	z-index: 5;
	margin-right:83px;
    }

    #angebotIcons li {
	display:inline-block;
	background: url("img/prom_schatten.png") no-repeat scroll 0 0 transparent;
	margin-left: 18px;
	padding-left: 8px;
    }

    #bottomSlogan {
	float:left;
	position:absolute;
	bottom:15px;
	margin-left:135px;
    }


    /*  Component: Footer  */

    #footer {
	width:856px;
	padding: 0 84px;
	position:relative;
	margin:auto;
	background:#eeeeee;
	height:105px;
	margin-top:145px;
	clear:both;
	text-align:right;
	font-size:11px;

    }

    .socialIcons {
	padding: 13px 0 16px;
    }

    .socialIcons li {
	display:inline;
	margin-left:14px;
	vertical-align:top;
    }

    #impressum {
	font-size:12px;
	margin-left:0;
    }

    .tmpImpressum a {
	color:#979797;
    }

    .tmpImpressum {
	position:absolute;
	text-align:center;
	width:100%;
	left:0;
    }


    /*  Component: More  */



}

/* Hover-Texte bei schmalem Fenster nach links ausrichten */

/* @todo: Zwischengrößen überprüfen  */

@media (max-width: 1350px) {
    #navigation > li .hoverElement {
	margin-right:-160px;
    }
    #navigation > li .hoverElementPfeil {
	margin-left:163px;
    }

    #navigation > li:nth-child(3) .hoverElementPfeil {
	margin-left:166px;
    }
}


/*  Zwischengrößen  */

@media (min-width: 750px) and (max-width:1044px) {

    #main, #bottomBox, #header, #footer {
	width:auto;
    }

    #header #navigation {
	left:auto;
	right:120px;
    }

    #teaserWrap {
	width:95%;
    }

    #teaser {
	width:auto;
	margin:auto;
	left:0;
    }

    .greenBoxLeft {
	width:250px;
    }

    #teaser p, #teaser ul {
	margin-left:280px;
    }

    #leftSchatten {
	display:none;
    }

    #greenSchatten {
	width:99%;
	left:0;
	margin-left:0px;
	background-position: top right;
    }

}


/* Bilder bottomBox anpassen  */

@media (min-width: 750px) and (max-width:940px) {

    #bottomSlogan {
	margin-left:50px;
    }
}

@media (min-width: 750px) and (max-width:820px) {
    #bottomSlogan {
	margin-left:3%;
    }
    #angebotIcons {
	margin-right:7%;
    }
}


@media (min-width: 750px) and (max-width:880px) {
    #naviKontakt {
	left:0;
    }

    #header #navigation {
	right:20px;
    }

    #teaser {
	padding-left:70px;
    }

    #navigation > li .hoverElement {
	margin-right:5px;
    }

    #navigation > li .hoverElementPfeil {
	margin-left:330px;
    }
    #navigation > li:nth-child(2) .hoverElementPfeil {
	margin-left:325px;
    }
    #navigation > li:nth-child(3) .hoverElementPfeil {
	margin-left:330px;
    }

}


@media (max-width: 750px) {

    /*  Grundlayout  */

    html {
	height:auto;
    }

    body {
	margin: 15px auto;
    }

    .desk {display:none;}
    .mobile {display:block;}


    /* Header */

    #header {
	width:100%;
    }

    #header #logo {
	position:relative;
	left:0;
	top:0;
    }

    #header #logo img {
	width:60%;
	min-width:200px;
	max-width:276px;
	margin:15px 10px 10px;
    }


    #navigation {
	background:#69B919;
	color:white;
	margin: 5px auto;	
    }

    #navigation li {
	font-weight:bold;
	font-size:12px;
	display:inline-block;
	margin:7px 0 4px 10px;
	width:65px;
	text-align:left;
    }	


    /* Component: Content  */

    #content {
	margin: 20px 10px 0;
	font-size:13px;
    }

    #content p, #content h1, #content h2, #content ul{
	margin-bottom:1em;
	line-height:1.5em;
    }

    #content p {
	clear:both;
    }

    #content .mob-icon {
	width:50px;
	float:left;
	margin: 0 20px 10px 0;
    }
    
    h1 {
	font-size:16px;
    }


    .mobile-more {
	vertical-align:middle;
	margin-left:3px;
    }

    .js-mobCall {
	cursor:pointer;
    }


    /*  Component: Bottom-Box  */

    #bottomBox {
	background:#656565;
	margin: 20px 0 0 0;
	text-align:center;
    }

    #bottomSlogan {
	max-width:100%;
	padding:10px 0 5px;
    }

    #content #angebotIcons {
	text-align:center;
	margin:0;
    }

    #angebotIcons {
	max-width:360px;
	margin:auto;
    }

    #angebotIcons li {
	display:inline-block;
	width:28%;
	margin-bottom:10px;
    }

    #angebotIcons li img {
	width:50px;
    }

    /*  Component: Footer  */

    #footer {
	padding:5px 10px;
	text-align:center;
    }

    #footer h4 {
	margin:0.5em auto 1em;
    }

    #footer ul {
	text-align:center;
    }

    #footer li {
	display:inline-block;
	width:90px;
    }

    #footer img {
	width:50px;
    }


    #impressum {
	font-size:10px;
	margin: 10px auto 10px;
    }

    ul.socialIcons {
	display:none;
    }

    .tmpImpressum {
	margin-bottom:0;
    }

    .tmpImpressum a {
	color:#656565;
    }


/* @media (max-width: 450px) { */
    body {
	margin: 0 auto;
	padding-top:10px;
    }




}



/*  Einzelseiten 
 *  Drupal
 */

.videoCall {
    margin:30px 0;
    text-align:right;
    font-size:14px;
    cursor:pointer;
}

#video {
    display:none;
    width:100%;
}








/* Entwicklung  */


#sekNavi {display:none;}


  .drupal7 #footer {
    margin-top: 104px;
  }