/**
 * Basic-Responsive CSS
 * 
 * 1.0.0        2015-01-15 MD
 *              - Anpassungen
 * 0.0.1        2014-12-10 MD
 *              - Implementierung, Versionierung
 */
/*************************************/

@media screen and (min-width: 641px) {
    .hauptnavigation ul.level-1 li:hover ul.level-2 {
        display: block;
    }
    #topnavi {
        display:block !important;
    }
}
.hauptnavigation.desktop ul.level-1 li:hover ul.level-2 {
        display: block !important;
}

.hauptnavigation .first-level li div.second-level li {
    width: 100%;
}

/*Responsive*/

@media screen and (max-width: 1240px) {
    
    /****CONTAINER_DEFINITIONEN*****/
    #container {
        max-width:100%;
    }
   
    #wrapper-content-right {
        width:100%;
    }
    
    #content-cleaner {
        width: 100%;
    }
    
    div.image, div.image-center {
        height:auto;
        max-width:100%
    }

    div.image img {
        height:auto;
        max-width:100%;
    }
    
    /************************/
    #header img.keyvisual{
        max-width:100%;
        height:auto;
    }
    
    .caption-and-copyright {
        width:auto;
    }
    
    .caption {
        width:auto !important;
    }
    
    .copyright {
        width:auto !important;
    }
    
    .hide-layout-change {
        display:block;
    }
}
@media screen and (max-width: 1120px) {
    .toolbar #top_search {
        width: auto;
    }
    #container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .toolbar ul li:first-child {
        margin-right:30px !important;
    }
    #content {
        margin-right: 400px;
    }
    #right-outer {
        width: 400px;
    }
    
    form.kontaktformular.lexikon > div:first-child label + label + br{
        display:block;
        width:100%;
        clear:both;
    }
    form.kontaktformular.lexikon > div:first-child input,
    form.kontaktformular.lexikon > div:first-child label + label {
        padding-top:5px;
        display:inline-block;
    }
}

@media screen and (max-width: 979px) {
    .toolbar ul li:first-child {
        margin-right:0 !important;
    }
    #content {
        margin-right: 370px;
    }
    #right-outer {
        width: 370px;
    }
}

@media screen and (max-width: 919px) {
    #content {
        margin-right: 0px;
    }
    #right-outer {
        width: 100%;
        float: left;
        margin-top:50px;
    }
    #right {
        margin-left: 0px;
        width: 100%;
    }
    #right .teaser ul li{
        width:48%;
        float:left;
    }
    #right .teaser ul li:nth-child(2n+1) {
        margin-right:4%;
    }
    .toolbar ul li.item a span {
        text-indent:-99999px;
        width:30px;
        margin-right:6px;
        background-position-x:center !important;
    }
}

@media screen and (max-width: 850px) {

    #header .logo {
        right: 50px;
        top: 85px;
        width: auto;
    }
    .hauptnavigation li.level-1:last-child{
        padding-right:0;
    }
    .freier-teaser p img, .teaser li p img {
        max-width:100%;
        height:auto !important;
    }
}

@media screen and (max-width: 767px) {
   

}

@media screen and (max-width: 640px) {
    body {
        
        min-width:320px;
    }
    .breadcrump {
        display:none;
    }
    
    #container {
        padding-left: 0;
        padding-right: 0;
        overflow-x:hidden;
    }
    #wrapper-content-right-left {
        margin-left: 0px;
    }
    /****CONTAINER_DEFINITIONEN*****/
    #header {
        border:none;
    }
    
    #header img.logo {
        max-width:100%;
        height:auto;
    }
    
    #topnavi {
        height: auto;
        margin-top: 50px !important;
        margin-bottom: 12px !important;
        height:auto;
        margin:0px;
        padding:0px;
        border-bottom: 1px solid #3e7e1f;
    }
    
    #wrapper-content-right-left {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    #content {
        margin-left:0px;
        margin-right:0px;
    }
    
    
    #right-outer {
        float: none;
    }
    
    #right {
        margin-left:0px;
        width: auto;
    }
    
    #left {
        display:none;
    }
    
    /***VORLAGEN***/
    
    #header .keyvisual {

        margin-top: -33px;
        position: absolute;
        top: 93px;

    }
        
    #header .logo {

        position: relative;
        padding-right: 12px;
        padding-left: 12px;
        margin-top: 125px;
        top: 0;
        left: 0px;

    }
    #header .toolbar > ul{
        float:left;
    }
    #header .toolbar {
        padding-left: 8px;
        right: 0;
    }
    #header .toolbar li  {
        margin-right:0px;
        margin-left: 8px;
    }
    #header .toolbar a {
        width: 43px;
    }
    
    #header .toolbar span   {

    }
    .toolbar .searchbutton {
        width: 35px;
    }
    #breadcrump {
        margin-left: 12px;
        margin-top: -33px;
    }
    #topnavi {
        display:none;
        position:absolute;
        width:100%;
        background:#fff;
        z-index:100;
    }
    .hauptnavigation li {
        padding: 0 !important;
        float: none !important;
        position:relative;
    }
    .hauptnavigation li a{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }    
    .hauptnavigation ul.level-2 > li.first {
        padding-top: 10px !important;
    }
    .hauptnavigation ul > li > ul  li {
        box-shadow: none !important;
        margin-bottom: 10px;
    }
    .hauptnavigation li.level-2 {
        margin-left:12px !important;
    }
    
    .hauptnavigation ul > li a {
        margin-bottom: 10px;
    }
    
    .hauptnavigation li.level-2 a {
        padding-left: 20px !important;
        padding-top: 0px;
        margin: 0px;
        background-position-y:16px !important;
    }
        
    .hauptnavigation ul.level-3 {
        margin-top: 5px;
        border-left: 2px solid #fff;
        margin-left: -2px;
        padding-left: 2px;
    }
    
    .hauptnavigation ul.level-3 li{
        border-left: #fff;
    }
    
    .hauptnavigation li.level-3 a{
        padding-left: 18px;
        font-size: 13px;
    }
    
    .hauptnavigation.smartphone-no-script ul li.has-children > a span.icon{
        background: url("/static/img/navarrow-down.png") no-repeat scroll right 0 rgba(0, 0, 0, 0);
        display: block;
        float: right;
        height: 14px;
        width: 14px;
    }
    
    .hauptnavigation.smartphone-no-script ul li.has-children > a.active span.icon{
        background: url("/static/img/navarrow-up.png") no-repeat scroll right 0 rgba(0, 0, 0, 0);
        display: block;
        float: right;
        height: 14px;
        width: 14px;
    }

    .hauptnavigation.smartphone-no-script ul li.has-children.active > ul {
        display: block;
        position: unset;
    }
    
    .hauptnavigation.smartphone-script ul.level-1 ul {
        position: relative !important;
    }
    
    .hauptnavigation.smartphone-script ul li a {
        width: 80%;
        display: inline-block;
    }
    
    .hauptnavigation.smartphone-script ul > li > ul li.active > a, .hauptnavigation.smartphone-script > li:hover > a {

    }
    
    .hauptnavigation.smartphone-script .controls {
        float:right;
        height: 14px;
        width: 14px;
    } 
    
    .hauptnavigation.smartphone-script .smartphone-minus {
        background: url("/static/img/navarrow-up.png") no-repeat scroll right 0 rgba(0, 0, 0, 0);
        margin-top: 6px;
    } 
    .hauptnavigation.smartphone-script .smartphone-plus {
        background: url("/static/img/navarrow-down.png") no-repeat scroll right 0 rgba(0, 0, 0, 0);
        margin-top: 6px;
    }
    
    .hauptnavigation.smartphone-script li.level-2 .smartphone-minus,
    .hauptnavigation.smartphone-script li.level-2 .smartphone-plus{
        margin-top: 9px;
    }
    
    .hauptnavigation.smartphone-script li.level-3 smartphone-plus{
        margin-top: 9px;
    }
    .hauptnavigation ul li,
    .hauptnavigation ul li a,
    .hauptnavigation ul li:hover,
    .hauptnavigation ul li.active,
    .hauptnavigation ul li.active > a, 
    .hauptnavigation ul li:hover > a,
    .hauptnavigation > ul > li.active > a:first-child, .hauptnavigation > ul > li:hover > a:first-child{
        border: none !important;
    }
    .hauptnavigation.smartphone-script .smartphone-plus,
    .hauptnavigation.smartphone-script .smartphone-minus {
        position: absolute;
        right: 20px;
        top: 5px;
    }
    .hauptnavigation ul.level-2 {
        top:0;
    }
    .hauptnavigation ul.level-1 > li > a:first-child {
        padding-top: 6px;
        padding-bottom: 0px;
    }
    
    .hauptnavigation.smartphone-script ul.level-1 ul {
        margin-bottom:10px;
    }
    .hauptnavigation ul.level-2 {
        border-left: none;
        border-right: none;
    }
    #right .teaser ul li {
        margin:0 auto;
        width:100%;
    }
    #right .teaser ul li p img{
        display:block;
        float: none;
    }
    .liste-allgemein .image {
        min-width:150px;
    }
     #header {
        height: auto;
        position: relative;
        margin: 0 auto;
    }
    #header .toolbar form a {
        width: auto;
    }
    .toolbar #searchInputbox {
        width: 190px;
    }
    #header .toolbar li:first-child {
        position:absolute;
        right:12px;
    }
    #hamburger-wrapper {
        position: relative;
        width: 100%;
        float: left;
        height: 0px;
    }
    .hamburger{
		width: 32px;
		height: 7px;
		background: #8d1812;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		transition: .5s;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;

		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
 
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		box-sizing:border-box;
        display:block !important;
        top:15px;
        right:60px;
        z-index:200;
	}
    .hamburger-icon {
        display:block !important;
        position: absolute;
        right: 12px;
        top:10px;
        width:32px;
        height:32px;
        cursor:pointer;
        z-index:100;
    }
	.hamburger:before,
	.hamburger:after{
		content: "";
		position: absolute;
		width: 32px;
		height: 7px;
		background:#8d1812;
		transition: .5s;
		transition: .5s;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;

		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;

		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		box-sizing:border-box;
	}
	.hamburger:before{
		top: -10px;
	}
	.hamburger:after{
		top: 10px;
	}

    
	.hamburger-icon.active .hamburger{
		background: rgba(0,0,0,0);
	}
	.hamburger-icon.active .hamburger:before{
		top: 0;
		transform: rotate(45deg);
	}
	.hamburger-icon.active .hamburger:after{
		top: 0;
		transform: rotate(135deg);
	}
}
@media screen and (max-width: 580px) {
    .liste-map {
        display:none;
    }
    .liste-mitglieder {
        display:block !important;
    }

}
@media screen and (max-width: 480px) {
    .toolbar #top_search {
        display:none;
        
    }
    .item-volltextsuche-html {
        display:block;
        margin-right: 35px;
    }
    .toolbar ul li.item a.volltextsuche-html span {
        background: url("/static/img/icon-int-suche.png") no-repeat scroll left 3px;
    }    
}
@media screen and (max-width: 480px) {
    .toolbar .teaser-service-login {
        left: calc(50% - 140px);
        width:280px;
    }
    #header .toolbar li {
        position:inherit;
    }

}