@font-face {
    font-family: 'OpenSansCondensed';
    src: url('OpenSans-CondLight-webfont.eot');
    src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-CondLight-webfont.woff') format('woff'),
         url('OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('OpenSans-CondLight-webfont.svg#OpenSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansCondensed';
    src: url('OpenSans-CondLightItalic-webfont.eot');
    src: url('OpenSans-CondLightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-CondLightItalic-webfont.woff') format('woff'),
         url('OpenSans-CondLightItalic-webfont.ttf') format('truetype'),
         url('OpenSans-CondLightItalic-webfont.svg#OpenSansCondensedLightItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSansCondensed';
    src: url('OpenSans-CondBold-webfont.eot');
    src: url('OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-CondBold-webfont.woff') format('woff'),
         url('OpenSans-CondBold-webfont.ttf') format('truetype'),
         url('OpenSans-CondBold-webfont.svg#OpenSansCondensedBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* Setup --------------------------------------------- */
a { color: #eee; }
a:visited { color: #ccc; }
a:hover { color: white; }
a:focus { outline: thin dotted; }
body { line-height: 150%; font-size: 108%; font-family: 'OpenSansCondensed', Arial, Helvetica, sans-serif; color: white; background-color: black; background-image: url("../images/background.jpg"); background-repeat: no-repeat; background-position: right bottom; height: 100%; background-attachment: fixed;}
h1 { line-height: 1.2em; text-transform:none; text-decoration:none; font-weight: bold; margin-bottom:1em; margin-top: 0.5em; font-size: 1.8em; padding-bottom: 1em; border-bottom: 1px solid #999; }
h2 { color:#dedede; line-height: 1.2em; text-transform:none; text-decoration:none; font-weight: bold; margin-bottom:0.5em; margin-top: 0.5em; font-size:1.6em;  }
h3 { line-height: 1.4em; text-transform:none; text-decoration:none; font-weight: bold; margin-bottom:.5em; margin-top: 0.5em; font-size: 1.4em; color: #B60000;  }
h2 + h3 {margin-bottom: 1em; font-size: 1.4em; line-height: 1em;}
h4 { text-transform:none; text-decoration:none; font-weight: bold; margin-bottom: 0.25em; font-size: 1.2em;  }
h5 { text-transform:none; text-decoration:none; margin-bottom: 1em; font-size: 1em;  }
p { margin-bottom:1em; }
hr { margin-bottom: 1px; margin-top: 1px; background-color: #999; border-style: solid; border-width: 0px; height: 1px; width: 100%; }
em { font-style:normal; font-weight:normal; text-transform:none; text-decoration:none; font-family:"OpenSansItalic"; }
strong{ font-weight: 700; }
hr{}

/* Struktur ------------------------------------------ */
#wrapper{max-width: 1140px; margin-left: auto; margin-right: auto;}
#header{position: relative; margin: 1em; margin-top: 2em; padding-bottom: 1px; padding-top: 1px;}
#header_navi{position: absolute; bottom: 3px; left: 0px; width: 70%; height: 1em;}
#header #logo{float: right;}
#header_navi a{color: white; text-decoration: none;}
#header_navi a:hover{color: #999}
#header_more{display: inline;}
#mobilemenu{display: none;}
#container{margin: 1em; border:1px solid #999; position: relative; background-color: black; padding-top: 1px;}
#kopfbild {position:relative; max-height: 250px; min-height: 100px; overflow: hidden;}
#kopfbild img{width: 100%; position: relative; display: block; }
#navi{ width: 24%; float: left;}
#navi_inner{border-right: 1px solid #999;border-bottom: 1px solid #999; background-color: #333;}
#navi_inner a{color: white; display: block; padding: 5px; text-decoration: none; font-size: 1.2em;}
#navi_inner li a{padding-left: 1em; font-weight: 700;border-top: 1px solid #333; border-bottom: 1px solid #333;}
#navi_inner li li a{padding-left: 2em; background-color: #444;border-top: 1px solid #444; border-bottom: 1px solid #444; font-weight:normal;}
#navi_inner li li li a{padding-left: 3em; background-color: #555;;border-top: 1px solid #555; border-bottom: 1px solid #555;}
#navi_inner li .now{border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #666; background-image: url("../images/arrow.gif"); background-repeat: no-repeat; background-position: left center;}
#navi_inner li li .now{border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #666; background-image: url("../images/arrow.gif"); background-repeat: no-repeat; background-position: 1em center;}
#navi_inner a:hover{border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #777;}
#social{ border-right: 1px solid #999;border-bottom: 1px solid #999;border-top: 1px solid #999; background-color: #333; height: 100%; margin-top: 1em; padding: 1em; margin-bottom: 1em; }
#shoplink{margin-top: 1em;}
#shoplink li a{font-size: 1.4em; padding-left: 1em;}
#content{ width: 67%; margin-right: 4.5%; float: right; margin-bottom: 2em; margin-top: 1em; padding-top: 1px; padding-bottom: 1px;}
#content_inner{}
#content_inner ul{margin-left: 2em; margin-bottom:1em;}
#content_inner ul li{list-style-position: inside; list-style: disc !important }
#content_inner ol{margin-left: 2em; margin-bottom:1em; }
#content_inner ol li{list-style-position: inside; list-style: decimal !important }
#imprint{float: right; width: 10%;}
#printqr{display: none;}
#footer{float: none; clear: both; background-color: #B60000;}
#footer div{margin-left: 1em; }
#footer a{color: white; text-decoration: underline;}
#back-to-top {display: none; position:fixed; bottom:20px; right:0px; cursor:pointer; padding:10px; background:#666; color:white; width: 30px; height: 30px; border: 1px solid #999; opacity: 0.5; background-image: url("../images/top.png"); background-position: left top;}
#back-to-top:hover{opacity: 1; background-position: right top;}
#vertrieb{margin-top: 2em; font-size: 12px;}
#vertrieb span{margin-left: 15%;}
#vertrieb img{width: 80%; margin-left: 10%; margin-bottom: 1em;}
#printlogo{display: none;}
/* Elemente ------------------------------------------ */
.clear { clear:both; float:none; }
.umflossen_r { float:right; }
.umflossen_l { float:left; }
.trennlinie{padding-top: 1em; padding-bottom: 1em;}
.abstand_r { margin-right: 3%; }
.abstand_l { margin-left: 3%; }
.abstand_o { margin-top:1em; }
.abstand_u { margin-bottom:1em; }
.abstand_ul { margin-bottom:2em; }
.ganz {width: 100%;}
.halb { padding:0; width: 48.5%;}
.zweidrittel { padding:0; width: 62.66%; }
.zweidritteltext { padding:0; width: 62.66%; }
.drittel{width: 32.33%;}
.viertel{width: 24%;}
.fuenftel{width: 17.06%; border: 1px solid #999;}
.border{border: 1px solid #999;}
.center{text-align: left;}
.left{text-align: left;}
#softColumn1 img {width: 32.33%;}
.softColumn h1 {border-bottom: 0px; padding-bottom: 1px; margin-bottom: 0.25em;}

#MailForm{display: none;}
#MailForm ul.formular li{list-style: none !important; list-style-type: none;}
#MailForm label{width: 30%; display: inline-block; text-align: right;}
#MailForm label.longlabel{width: 70%; display: inline-block; text-align: left;font-size: 1em;}
#MailForm fieldset{border: 1px solid #ccc;}
#MailForm legend {font-size: 0.8em; font-style: italic; color: #666; padding: 0.25em;}
#MailForm label.error{width: 2em; float: none; display: inline; border: 0px; color: red; font-size: 11px; text-align: left; margin-left: 0.5em;}
#MailForm input, #MailForm textarea, #MailForm select{border: 1px solid gray; margin: 0.25em; padding: 0.25em; width: 50%}
#MailForm input:focus, #MailForm textarea:focus, #MailForm select:focus{background-color: #ffffd7;}
#MailForm input.versende{margin-left: 30%;}
#MailForm input.small{width: auto;margin-left: 1em; margin-right: 1em;}
#MailForm textarea{height: 5em;}
#MailForm textarea.bigger{height: 10em;}
#MailForm .button{border: 0px;}
#MailForm input.error, #MailForm textarea.error{border: red 1px solid; background-color: #ffc3c3; }
#MailForm .valid{}
#MailForm .requ{margin-left: 30%;}
#MailForm #datenschutz{font-size: 0.9em;}
#MailForm #datenschutz span{text-decoration: underline;}

#haendler .wait {width: 16px; height: 16px; margin-left: auto; margin-right: auto; background-image:url(../images/ajax-loader.gif); display: none; }
#haendler .email{margin-bottom: 0;}
#haendler .www{margin-bottom: 0;}
#haendler select{width: 300px;}
#haendler .ui-autocomplete-input{width: 300px;}
 .ui-autocomplete {padding: 0; list-style: none; background-color: #fff !important; width: 300px; border: 1px solid silver; max-height: 350px; overflow-y: scroll; }
 .ui-autocomplete .ui-menu-item a { border-top: 1px solid #B0BECA; display: block; padding: 4px 6px; color: #000; cursor: pointer; background-color: #fff; }
 .ui-autocomplete .ui-menu-item:first-child a { border-top: none; }
 .ui-autocomplete .ui-menu-item a.ui-state-hover { background-color: silver; color: #B60000; }


/* helper -------------------------------------------- */

.hidden { display: none !important; visibility: hidden; }
.clear {float: none; clear: both;}


/* ab hier wird es responsive ------------------------ */

@media only screen and (max-width:1024px) {
#kopfbild{max-height: 200px;}
#navi{ width: 22%; float: left;}
#content{ width: 71%; margin-right: 3.5%;}
}

@media only screen and (max-width:768px) {
body{font-size: 105%;}
#navi{ width: 33%; float: left;}
#content{ width: 60%; margin-right: 3.5%;}
#kopfbild{max-height: 150px;}
.zweidritteltext { padding:0; width: auto; }
#navi_inner a{font-size: 1.1em;}
#shoplink li a{font-size: 1.1em; padding-left: 1em;}
div.btbt .halb{width: 100%;}
div.btbt .left{width: 100%;}
div.btbt img{width: 48.5%; float: right; margin-left: 1em;}
div.btbt .abstand_r{margin-right: 0;}
div.btbt .abstand_ul{margin-bottom: 1em;}
}

@media only screen and (max-width:480px) {
body{font-size: 105%; background-image: none;}
#header{margin-top: 1em;}
#header #logo{width: 40%;}
#header_navi{position: relative; bottom: auto;}
#Telephone{display: block;}
#header_more{display: none;}
#mobilemenu{display: block;}
#mobilemenu select{width: 100%; border: 1px solid #999; background-color: #333; color: white; padding: 3px;}
#navi{display: none;}
#content{width: auto; margin-left: 1em; margin-right: 1em;}
.zweidrittel { padding:0; width: 100%; }
.drittel {width: 100%;}
.umflossen_r { float:none; }
.umflossen_l { float:none; }
.halb{width: 100%;}
.umflossen_r.abstand_l{margin-left: 0px;}
div.btbt .left{width: 100%;}
div.btbt img{width: 100%; float: none; margin-left: 0;}
}