h1{ background-color: white; color: #0092C0; padding-left: 0; text-align: center; font-size: 34px; margin-bottom: 5px; }

h2{ text-align: center; font-size: 18px; }

h3{ 
    margin: 10px 0 10px 0;
    color: #0092c0;
    font-size: 16px;
    font-weight: normal;
}

td{ 
    background-color: white; 
    padding: 15px 10px 15px 10px !important; 
    line-height: 20px; 
    text-align: left !important;
}

th {
    border-bottom: 1px #E6E6E6 solid; 
}

.design_beispiele{
}

.design_beispiele h3{ text-align: center; font-size:11px;}
.garantie{ margin: 25px 0 0 45px; }
.garantie img{ margin-right: 5px; }
.garantie *{vertical-align: middle; }

#zitat span{ background-color: #FFFFFF; color: #0092C0; padding-left: 0; font-size: 26px; }


.so{
    float: left;
    height: 315px;
    width: 420px;
    padding-top: 35px;
    line-height: 20px;
    font-size: 14px;
}
.so h3{ clear: both; }

.so .middle{ margin-bottom: 10px; }


.so_text{
    clear: both;
    float: left;
    width: 400px;
    font-size: 14px;
}

.so_text_rechts{
    width: 420px; 
    float: right;
    font-size: 14px;
}



.projekt_starten{ 
    padding: 0 10px 15px 23px; 
    width: 381px; 
    height: 80px; 
    margin: 5px 0 10px 0;
    height: 43px;
    border: none !important;
} 

.projekt_starten a.preise{
    margin: 10px 0 15px 100px;
    display: block;
}

.projekt_starten .btn{ 
    width: 340px; 
    font-size: 20px;
    height: 42px;
    line-height: 42px;
}

.button_wide_off{ background: url("../img/layout/button_300_50.png") top left no-repeat; }
.button_wide_on { background: url("../img/layout/button_300_50_on.png") top left no-repeat; }


.startseite_contests {   }
.startseite_contests .contest_info { width: 100%; background: url(../img/layout/hp_contest_punkt.gif) left bottom repeat-x; margin-bottom: 9px;}
.startseite_contests .contest_info .contest_name{  float: left; background: url(../img/layout/white.gif) bottom left repeat-x; padding-right: 5px;}
.startseite_contests .contest_info .contest_name a { text-decoration: none;}
.startseite_contests .contest_info .contest_preis{ float: right; background: url(../img/layout/white.gif) bottom left repeat-x; width: 55px; text-align: right;  }

.startseite_contests dl { margin-bottom: 5px; height: 176px; }
.startseite_contests dt { width: 30px; padding-top: 3px; }
.startseite_contests dd { width: 355px; }


.meinung_ag{ line-height: 21px; }


.so_schritte{ 
    width: 1048px; 
    height: 45px; 
    /*background: url(../img/landing/so_hg2.png) top left no-repeat;*/ 
    margin-bottom: 30px;
    padding: 10px 0 0 20px; 
    border: 1px solid #B4B3B3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
}
.so_schritte img{ margin: 0 10px 0 10px;}
.so_schritte h3{ display: inline; font-size: 28px; }
.so_schritte h3 span{ font-size: 18px;color: #333333; }
hr{ width: 100%; height: 1px; clear: both; background-color: #A0A0A0; margin: 20px auto 20px auto; border: none;}

.buttonUnten{ margin-top: 15px; text-align: center; border: 1px solid #B4B3B3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #F1F1F3; padding: 10px; }
.buttonUnten .projekt_starten{ margin: 0 auto 0 auto !important; padding: 0 10px 5px 23px !important; }
.buttonUnten .garantie{ margin: 10px auto 0 10px !important; }
.buttonUnten .text{ font-size: 20px; margin: 10px 0 10px 0; color: #0092c0;}

.fragen{
    width: 1030px;
    border-top: 1px #A0A0A0 solid;
    border-bottom: 1px #A0A0A0 solid;
    background-color: #F1F1F3;
    padding: 10px 20px 20px 20px;
    margin-top: 30px;
}

.fragen h2{ text-align: left; }

.fragen p.frage{ font-weight: bold; margin-bottom: 5px; font-size: 16px;}


/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(../img/slideshow/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:35px;
}
a.nivo-prevNav {
	left:15px;
}

#slider .nivo-controlNav{
	position:absolute;
	left:37%;
	bottom:-20px;
}
#slider .nivo-controlNav a{
	display:block;
	width:10px;
	height:10px;
	background:url(../img/slideshow/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
#slider .nivo-controlNav a.active {
	background-position:-10px 0;
}











/* ----------------------------------------------------------------------------- *
 *                           bis 760px                                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (max-width: 47.5em) {
    
    #navi_content, #page, #content, #header_content, #footer_content, #landing_top_inhalt, .landing_kontakt, .buttonUnten, .bekannt_aus, .keywords_block, .so_schritte, .fragen{width: auto !important;}
    
    
    #header_content ul li.nachricht, #header_content ul li.bewertung, #header_content ul li.konto, #header_content ul li.news, #header_content ul li.hallo {
        display: none; 
    }
    
    #landing_top, #navi, #navi_content, h1{ 
        height: auto !important;
    }
    
    #landing_top_inhalt{
        background: none;
        height: auto !important;
    }
    
    #landing_top_text{
        width: auto !important;
        height: auto !important;
        float: none !important;
        margin: 20px 0 0 10px !important;
    }
    
    #landing_top_inhalt #landing_top_preis {
        background: none;
        float: none;
        height: auto !important;
        margin: 10px 0 0 0;
        width: auto !important;
    }
    
    #landing_top_inhalt .grau{
        margin: 0 10px 20px 10px;
        font-size: 13px; 
        font-size: 0.8125rem !important;
    }
    
    .schon_ab, .schon_ab_preis{ background-color: #0092C0; padding: 0 !important; margin: 0 !important; text-align: center; }
    .schon_ab{ padding-top: 5px !important;}
    .schon_ab_preis{ padding-bottom: 10px !important;}
    .schon_ab_preis{ font-size: 36px !important; font-size: 2.25rem !important; letter-spacing: normal !important;}
    
    #footer div{ width: auto !important; padding-bottom: 20px !important; }
    .design_beispiele{ width: 100% !important; }
    #landing_top_inhalt .design_beispiele img {
        display: block;
        margin: 0 auto 5px auto;
    }
    #landing_top_inhalt .design_beispiele img.letztes {
        margin: 0 auto 0 auto;
    }
    
    #landing_top_inhalt .design_beispiele div {
        font-size: 16px; 
        font-size: 1rem;
        margin-top: 10px;
        text-align: center;
        float: left;
    }
    
    .garantie{ width: auto !important;}
    
    #content{ margin: 30px 10px 0 10px; padding: 0;}
    
    .sof_1, .sof_2, .sof_3{ float: none; clear: both; width: 100%; margin: 30px 0 20px 0; }
    .sof_1 .img_zentriert, .sof_2 .img_zentriert, .sof_3 .img_zentriert{ 
        width: 100%;
        height: auto;
        max-width: 300px;
    }
    .sof_1 img.float_left{ margin-right: 40px;}
    
    .projekt_starten{ width: auto !important; } 
    
    .projekt_starten .btn{ 
        width: auto !important;
        font-size: 16px;
        font-size: 1rem;
        margin: 0 auto 0 auto;
        display: block;
    }
    
    .so {
        width: 100% !important;
        height: auto !important;
    }
    
    .so_text{
        clear: both;
        float: none;
        width: auto !important;
    }
    
    .so_text i, .fragen p{
        font-size: 13px; 
        font-size: 0.8125rem;
    }
    
    .fragen p.frage{
        font-size: 14px;
        font-size: 0.875rem;    
    }
    
    .so_text_rechts{
        width: auto !important;
        float: none;
    }
    
    h1{ 
        font-size: 24px; 
        font-size: 1.5rem;
        font-weight: normal !important; 
        margin: 0 10px 15px 0;
        line-height: 32px;
        line-height: 2rem;    
    }
    
    h2{ 
        font-size: 16px;
        font-size: 1rem;
        font-weight: normal !important; 
        line-height: 32px; line-height: 2rem;
    }
    
    h3{ 
        font-size: 18px;
        font-size: 1.125rem;
        text-align: left;
        font-weight: normal !important; 
    }
    
    
    .beispielprojekt_div{ width: 40%; margin: 0 10px 20px 0; border: 1px #E6E6E6 solid;  }
    .beispielprojekt_div .beispielprojekt_bild{ height: 135px; margin-top: 10px; width: auto !important;}
    .beispielprojekt_div .beispielprojekt_name{ line-height: 16px; line-height: 1rem;}
    .beispielprojekt_div p{ margin-bottom: 5px !important;}
    
    .landing_kontakt, .buttonUnten { background-position: center top !important; }
    
    .buttonUnten .text{ width: auto !important; }
    
    .bekannt_aus img{ margin: 0 20px 20px 20px; }
    
    #footer #footer_content{
        padding-left: 20px;
    }
    #footer #footer_content p, #footer #footer_content a {
        font-size: 14px;
        font-size: 0.875rem;
    }
    
    #header_content ul{ float: left; margin: 30px 0 0 0; width: 100% !important; }

    #navi_content ul li:last-child{margin-bottom: 0 !important;}
    #navi_content{ clear: both; }
    #navi_content ul{ display: none; width: 100% !important; }
    
    .menu-btn{ display: block;}
    
    .so_schritte {
        height: auto;
    }
    
    .so_schritte h3 {
        display: block;
    }
    
    .so_schritte h3 span {
        font-size: 13px; 
        font-size: 0.8125rem;
    }
    
    .breite50 {
        height: auto !important;
    }
    
    .breite50 img.thema_bild {
        height: auto;
        width: 100%;
        max-width: 400px;
    }
    
}


/* ----------------------------------------------------------------------------- *
 *                           bis 320px                                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (max-width: 20em) {
  
    .projekt_starten .btn{
        font-size: 13px; 
        font-size: 0.8125rem;
        line-height: 32px; line-height: 2rem;
        padding: 0 5px;
        letter-spacing: normal;
    }
    .projekt_starten {
        height: auto;
        margin: 5px 0 0 0;
        padding: 0 10px 15px 0;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .projekt_starten a.preise {
        display: block;
        margin: 10px 0 15px 0;
    }
    
    .projekt_starten .btn {
        width: auto; 
        font-size: 12px; 
        font-size: 0.75rem;
        padding: 0 10px;
    }
    
    .garantie {
        margin: 5px 0 0 0;
        color: #16A0D0;
    }

    
    .beispielprojekt_div{ width: 90% !important; margin: 0 10px 20px 0;  }
    .beispielprojekt_div .beispielprojekt_bild{ height: auto !important; margin-bottom: 10px; }
    .beispielprojekt_div .beispielprojekt_name{ height: auto !important; margin-bottom: 10px; }
    
    .design_beispiele img.thema_bild{
        width: 100%;
        max-width: 320px;
        height: auto;
        
    }
}




/* ----------------------------------------------------------------------------- *
 *                        zwischen 450px und 800px                                               *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 28.125rem) and (max-width: 50rem) {
    #landing_top_inhalt .design_beispiele {
        text-align: center;
    }
    
    #landing_top_inhalt .design_beispiele img, #landing_top_inhalt .design_beispiele img.letztes{
        display: inline-block;
        margin: 0 3px;
    }
    
    .projekt_starten{ width: 65% !important; }
}


/* ----------------------------------------------------------------------------- *
 *                        zwischen 650px und 800                                               *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 40.625rem) and (max-width: 50rem) {
    
    #landing_top_inhalt .design_beispiele img, #landing_top_inhalt .design_beispiele img.letztes{
        display: inline-block;
        margin: 0 1rem 1rem 0;
    }
    
    .sof_1, .sof_2, .sof_3{ float: left; width: 50%; margin: 10px 0 10px 0; }
    
    
    .so_schritte h3 span {
        font-size: 13px; 
        font-size: 0.8125rem;
    }
    
}


/* ----------------------------------------------------------------------------- *
 *                        zwischen 760px und 970                                               *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 47.5rem) and (max-width: 60.625rem) {
    
    #header_content img{
        margin: 25px 0 20px 20px !important; 
        width: 220px;
    }
    
    #navi_content, #page, #content, #landing_top_inhalt, .landing_kontakt, .buttonUnten, .bekannt_aus, #header_content, #footer_content, .so_schritte, .fragen {
        width: auto !important;
    }
    
    
    #header_content ul li.nachricht, #header_content ul li.bewertung, #header_content ul li.konto, #header_content ul li.news, #header_content ul li.hallo {
        display: none; 
    }
    
    #header, h1, #landing_top_inhalt, #landing_top{ height: auto !important; }
    
    
    #header_content ul{  margin: 30px 20px 0 0; }
    
    #navi ul li{ padding-right: 10px; }
    #navi ul li a{
        font-size: 14px;
        font-size: 0.875rem;
    }
    
    #landing_top_inhalt #landing_top_text {
        width: 50%;
    }
    
    #landing_top_inhalt #landing_top_preis {
        background: url("../img/landing/layout/landing_preis.png") no-repeat scroll left top rgba(0, 0, 0, 0);
        float: right;
        width: 40%;
        margin-right: 10px;
    }
    
    
    h1 {
        font-size: 24px;
        font-size: 1,5rem;
        font-weight: normal;
        line-height: 34px;
        line-height: 2.125rem;
    }
    
    .breite50 img.thema_bild{ 
        width: 100%; 
        height: auto;
    }
    
    
    .projekt_starten {
        height: auto;
        margin: 5px 0 0 0;
        padding: 0 10px 15px 0;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .projekt_starten a.preise {
        display: block;
        margin: 10px 0 15px 0;
    }
    
    .projekt_starten .btn {
        width: auto; 
        font-size: 12px; 
        font-size: 0.75rem;
        padding: 0 10px;
    }
    
    .garantie {
        margin: 5px 0 0 0;
        color: #16A0D0;
    }
    .garantie img {
        display: none;
    }
    
    
    #landing_top_inhalt .design_beispiele {
        text-align: center;
    }
    
    #landing_top_inhalt .grau{
        margin: 0 10px 20px 10px;
        font-size: 13px; 
        font-size: 0.8125rem !important;
    }
    
    h3{ 
        font-size: 18px;
        font-size: 1.125rem;
        text-align: left;
        font-weight: normal !important; 
    }
    
    
    #content{ margin: 30px 10px 30px 10px;}
    
    .beispielprojekt_div{ width: 25%; margin: 0 20px 20px 0; border: 1px #E6E6E6 solid;  }
    .beispielprojekt_div .beispielprojekt_bild{ height: 135px; margin-top: 10px; width: auto !important;}
    .beispielprojekt_div .beispielprojekt_name{ line-height: 16px; line-height: 1rem; height: 60px !important;}
    .beispielprojekt_div p{ margin-bottom: 5px !important;}
    
    #footer #footer_content{
        padding-left: 20px;
    }
    
    #footer #footer_content p, #footer #footer_content a {
        font-size: 16px; 
        font-size: 1rem;
    }
    
    .so_text{
        width: 46% !important;
    }
    
    .so_text_rechts{
        width: 46% !important;
    }
}


/* ----------------------------------------------------------------------------- *
 *                        zwischen 970px und 1140px                              * 
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 60.625rem) and (max-width: 71.25rem) {

    #navi_content, #page, #content, #landing_top_inhalt, .landing_kontakt, .buttonUnten, .bekannt_aus, #header_content, #footer_content, .so_schritte {
        width: auto !important;
    }
    
    #header, h1, #landing_top_inhalt{ height: auto !important; }
    
    #header_content img{
        margin: 10px 0 15px 15px !important; 
    }
    #header_content ul{ text-align: right; margin-right: 10px; }
    
    
    #landing_top_inhalt .design_beispiele {
        text-align: center;
    }
    
    #content{ margin: 0 20px 30px 20px;}        
    
    #landing_top_inhalt .grau{
        margin: 0 10px 10px 10px;
        font-size: 13px; 
        font-size: 0.8125rem !important;
    }
    
    #footer #footer_content{
        padding-left: 20px;
    }
    
}