@charset "UTF-8";
@import url(animate.css);

#bottomnavigation, #detail #content, #detail #content .nachbarheadline h2, #startbox > h3, #topnavigation, #zufallstueren, body.cssEnabled #startdialog, body.cssEnabled.mobile #startdialog {
    font-family: Titillium, arial, sans-serif
}

@font-face {
    font-family: Titillium;
    src: url(webfont-titillium/titilliumweb400-webfont.eot);
    src: url(webfont-titillium/titilliumweb400-webfont.eot?#iefix) format('embedded-opentype'), url(webfont-titillium/titilliumweb400-webfont.woff) format('woff'), url(webfont-titillium/titilliumweb400-webfont.ttf) format('truetype'), url(webfont-titillium/titilliumweb400-webfont.svg#Titillium) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Titillium;
    src: url(webfont-titillium/titilliumweb600-webfont.eot);
    src: url(webfont-titillium/titilliumweb600-webfont.eot?#iefix) format('embedded-opentype'), url(webfont-titillium/titilliumweb600-webfont.woff) format('woff'), url(webfont-titillium/titilliumweb600-webfont.ttf) format('truetype'), url(webfont-titillium/titilliumweb600-webfont.svg#Titillium) format('svg');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Titillium;
    src: url(webfont-titillium/titilliumweb700-webfont.eot);
    src: url(webfont-titillium/titilliumweb700-webfont.eot?#iefix) format('embedded-opentype'), url(webfont-titillium/titilliumweb700-webfont.woff) format('woff'), url(webfont-titillium/titilliumweb700-webfont.ttf) format('truetype'), url(webfont-titillium/titilliumweb700-webfont.svg#Titillium) format('svg');
    font-weight: 700;
    font-style: normal
}

body {
    margin: 20px;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a {
    color: #1f7e92;
    text-decoration: none
}

#hauptmenu li a:focus, #listviewButton a:focus, .nachbartuere a:focus, .tuere a:focus, a#search_button:focus, a.close:focus, a.closebutton:focus, a.infobox-link:focus, a.pin_clusterer:focus, a.tuerpin:focus, body.cssEnabled #fupllink:focus, body.cssEnabled #startlink:focus, input#plzChecker:focus {
    background-color: rgba(255, 240, 0, 1) !important;
    border-color: red !important;
    color: #000 !important
}

body.cssEnabled #startbox {
    position: absolute;
    z-index: 100005;
    box-shadow: 2px 2px 8px -1px rgba(0, 0, 0, .53);
    top: 100px;
    left: calc(50% - 465px);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZjJmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYWU0ZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(220, 242, 244, 1) 0, rgba(202, 228, 239, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(220, 242, 244, 1)), color-stop(100%, rgba(202, 228, 239, 1)));
    background: -webkit-linear-gradient(top, rgba(220, 242, 244, 1) 0, rgba(202, 228, 239, 1) 100%);
    background: -o-linear-gradient(top, rgba(220, 242, 244, 1) 0, rgba(202, 228, 239, 1) 100%);
    background: -ms-linear-gradient(top, rgba(220, 242, 244, 1) 0, rgba(202, 228, 239, 1) 100%);
    background: linear-gradient(to bottom, rgba(220, 242, 244, 1) 0, rgba(202, 228, 239, 1) 100%)
}

body.cssEnabled #startboxmask {
    position: fixed;
    z-index: 100003;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: rgba(25, 86, 99, .65)
}

body.cssEnabled #fupllink, body.cssEnabled #startlink {
    background-color: #fff;
    box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, .45);
    padding-left: 70px;
    padding-right: 20px;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 40px;
    bottom: 20px;
    display: inline-block
}

body.cssEnabled #startbox.aufruf {
    left: calc(50% - 445px)
}

body.cssEnabled #startbox .close {
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url(../img/close_2x.png) !important;
    background-repeat: no-repeat;
    background-size: 100%
}

body.cssEnabled #fupllink i, body.cssEnabled #startlink i {
    position: absolute;
    margin-left: -75px;
    width: 65px;
    height: 61px;
    background-size: 100%
}

body.cssEnabled #startbox .close:hover {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

body.cssEnabled #fupllink:hover i, body.cssEnabled #startlink:hover i {
    -webkit-transform-origin: center center;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

body.cssEnabled #startlink {
    margin-top: 50px;
    position: absolute;
    cursor: pointer
}

body.cssEnabled #startlink i {
    margin-top: -15px;
    background-image: url(../img/karte_2x.png)
}

body.cssEnabled #startlink:hover i {
    transform-origin: center center;
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

#listviewButton:hover i, body.cssEnabled #fupllink:hover i {
    -webkit-animation-name: swing;
    -webkit-animation-iteration-count: infinite
}

body.cssEnabled #fupllink {
    margin-top: 50px;
    text-decoration: none;
    position: absolute
}

body.cssEnabled #fupllink i {
    margin-top: -15px;
    background-image: url(../img/bewerbung_2x.png)
}

body.cssEnabled #fupllink:hover i {
    transform-origin: center center;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite
}

#detail #content .nachbartuere:hover, #zufallstueren .tuere:hover {
    -webkit-transform-origin: center center;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

body.cssEnabled #startdialog {
    padding: 20px;
    color: #1f7e92;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    width:890px;
}

body.cssEnabled #startdialog .col h3 {
    font-weight: 600
}

body.cssEnabled #startdialog .col1 h3 {
    color: #1f7e92;
    font-size: 26px;
    line-height: 30px;
    padding: 5px;
    margin: 10px 10px 0
}

body.cssEnabled #startdialog .col1 {
    display: none;
}

body.cssEnabled #startdialog .col2 h3, body.cssEnabled #startdialog .col3 h3 {
    color: #fff;
    font-size: 26px;
    line-height: 26px;

    padding: 0;
    display: inline-block;
    margin: 0
}

body.cssEnabled #startdialog .col{
    width: calc(50% - 30px);
    float: left;
    padding-bottom: 100px;
}

body.cssEnabled #startdialog .col1 {
    margin-left: 20px
}

body.cssEnabled #startdialog .col2 {
    margin-left: 10px
}

body.cssEnabled #startbox.aufruf .col1 {
    margin-right: 10px
}

body.cssEnabled #startbox.aufruf .col2 {
    margin-right: 20px
}

body.cssEnabled.small #startbox.aufruf .col{
    width: calc(100% - 30px);
    padding-bottom: 0;
    float: none;
}


body.cssEnabled.small #startbox.aufruf #startdialog {
    width: 320px
}

body.cssEnabled.small #startbox.aufruf #startdialog {
    width: 320px
}

body.cssEnabled.small #startbox.aufruf {
    left: calc(50% - 180px)
}

body.cssEnabled.small .aufruf #startdialog .col {
    margin: 0 0 0 25px
}

body.cssEnabled.small .aufruf #fupllink, body.cssEnabled.small .aufruf #startlink {
    position: relative
}

@media screen and (max-width: 600px) {
    body.cssEnabled.small #fupllink, body.cssEnabled.small #startlink {
        position: relative
    }

    body.cssEnabled.small #startbox {
        top: 20px;
        left: calc(50% - 180px)
    }

    body.cssEnabled.small #startbox #startdialog {
        width: 320px
    }

    body.cssEnabled.small #startdialog .col {
        margin: 0 0 0 25px
    }
}

body.cssEnabled #topnavigation ul.brotkrume {
    display: none
}

body.cssEnabled.mobile #startbox {
    position: asolute;
    z-index: 100005;
    box-shadow: none;
    top: 0;
    left: 0;
    width: 100%
}

body.cssEnabled.mobile #startboxmask {
    position: fixed;
    z-index: 100003;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 1)
}

#detail #content .nachbartuere, #zufallstueren .tuere {
    height: 180px;
    background-color: #fff;
    cursor: pointer;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

body.cssEnabled.mobile #startbox .col2 {
    margin-left: 0;
    margin-right: 0
}

body.cssEnabled.mobile #startbox .close {
    top: 10px;
    right: 5px
}

body.cssEnabled.mobile #fupllink, body.cssEnabled.mobile #startlink {
    position: relative;
    margin-top: 40px;
    margin-bottom: 10px
}

#detail, #startbox > h3, #zufallstueren {
    position: absolute
}

body.cssEnabled.mobile #startdialog .col1 {
    background-size: 35%;
    min-height: 170px
}

#detail #content .tuere .close, #detail #content .tuere .properties > div i, #detail .imagelink a i, body.cssEnabled.mobile #startdialog {
    background-repeat: no-repeat;
    background-size: 100%
}

body.cssEnabled.mobile #startdialog {
    background-image: url(../img/wiese_unten.png);
    background-position: bottom;
    padding: 20px;
    color: #1f7e92;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700
}

body.cssEnabled.mobile #startdialog .col h3 {
    color: #1f7e92;
    font-size: 20px;
    line-height: 20px;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: block;
    text-align: left;
    background-image: none
}

body.cssEnabled.mobile #startdialog .col1 h3 {
    color: #1f7e92;
    font-size: 24px;
    line-height: 28px;
    margin-top: 0;
    margin-left: 0;
    margin-right: 20px;
    text-align: left
}

#listviewButton, .small #startbox > h3, .small #zufallstueren {
    text-align: center
}

#zufallstueren {
    margin-top: 55px
}

#startbox > h3 {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    background-image: url(../img/back_orange.jpg);
    padding: 5px 10px;
    display: inline-block;
    float: none;
    margin: 20px 10px 10px
}

#zufallstueren .title, #zufallstueren .title span, #zufallstueren .title strong {
    font-size: 14px;
    line-height: 18px
}

.small #startbox > h3 {
    display: block;
    width: calc(100% - 20px);
    margin-left: 0
}

#zufallstueren .tuere {
    float: left;
    width: 180px;
    padding: 10px;
    margin: 10px;
    box-shadow: 1px 1px 15px -5px #000
}

.small #zufallstueren .tuere {
    float: none;
    text-align: left;
    display: inline-block
}

#detail, #zufallstueren .age, #zufallstueren .description, #zufallstueren .geodata, #zufallstueren .status, #zufallstueren .tags, #zufallstueren hr {
    display: none
}

#zufallstueren .tuere:hover {
    transform-origin: center center;
    -webkit-animation-name: overIt;
    animation-name: overIt;
    animation-duration: 1s;
    animation-fill-mode: both
}

#zufallstueren .title {
    margin-top: 5px
}

#zufallstueren .title strong {
    color: #1f7e92
}

#detail {
    background-color: rgba(25, 86, 99, .65);
    z-index: 99999;
    background-attachment: fixed
}

#detail #content .tuere, .small #detail #content .tuere {
    box-shadow: 5px 5px 8px -5px rgba(0, 0, 0, .79);
    background-color: rgba(255, 255, 255, 1)
}

#detail #content {
    max-width: 924px;
    display: block;
    margin: 180px auto 40px
}

#detail .imagelink {
    display: none
}

#detail .imagelink a i {
    background-image: url(../img/icon_telefonnummer_2x.png);
    position: absolute;
    width: 80px;
    height: 80px;
    display: block;
    top: 140px;
    left: 240px
}

.small #detail #content {
    margin-left: 0
}

#detail #content .tuere {
    position: relative
}

#detail #content .tuere .close {
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url(../img/close_2x.png) !important
}

#detail #content .tuere .main {
    float: left;
    padding: 20px
}

#detail #content .tuere .properties {
    float: left;
    padding: 20px;
    width: 330px
}

.small #detail #content .tuere {
    width: 552px;
    margin-left: auto;
    margin-right: auto
}

.small #detail #content .tuere .main, .small #detail #content .tuere .properties {
    float: none;
    width: 512px;
    box-shadow: none;
    background-color: transparent
}

#detail #content .tuere .properties > div {
    margin-top: 20px;
    padding-left: 40px
}

#detail #content .tuere .properties > div:first-child {
    margin-top: 0
}

#detail #content .tuere .properties > div i {
    width: 55px !important;
    height: 52px !important;
    display: block;
    position: absolute;
    margin-left: -64px;
    margin-top: -5px
}

#detail #content .tuere .properties > div.geodata, #detail #content .tuere .properties > div.status, #detail #content .tuere .properties > div.tags, .ausgebuchtschild {
    display: none
}

.small #detail #content .tuere .properties > div {
    margin-top: 20px;
    padding-left: 60px
}

.small #detail #content .tuere .properties {
    padding-top: 0
}

#detail #content .tuere .properties > div.oeffnungszeiten i {
    background-image: url(../img/icon_oeffnungszeiten_2x.png)
}

#detail #content .tuere .properties > div.teilnehmer i {
    background-image: url(../img/icon_teilnehmer_2x.png)
}

#detail #content .tuere .properties > div.age i {
    background-image: url(../img/icon_altersempfehlung_2x.png)
}

#detail #content .tuere .properties > div.email i {
    background-image: url(../img/icon_email_2x.png)
}

#detail #content .tuere .properties > div.telefonnummer i {
    background-image: url(../img/icon_telefonnummer_2x.png)
}

#detail #content .tuere h2 {
    color: #1f7e92;
    font-weight: 700;
    margin-top: 20px
}

#detail .tuere .ausgebuchtschild {
    display: block;
    position: absolute;
    background-image: url(../img/back_rot.jpg);
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    font-weight: 600;
    margin-top: -15px;
    margin-left: 250px;
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    font-size: 24px;
    line-height: 32px
}

#detail .tuere .digitalschild {
    display: block;
    position: absolute;
    background-image: url(../img/back_petrol_dark.jpg);
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    font-weight: 600;
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    font-size: 24px;
    line-height: 32px;
    top: 10px;
    left: 10px;
}

#detail #content .nachbartuere .age, #detail #content .nachbartuere .description, #detail #content .nachbartuere .geodata, #detail #content .nachbartuere .status, #detail #content .nachbartuere .tags, #detail #content .nachbartuere hr, #detail #content .tuere h2 small, #logo h1 span {
    display: none
}

#detail #content .tuere .label {
    color: #1f7e92;
    font-weight: 700
}

#detail #content .tuere .description {
    width: 512px;
    margin-top: 10px;
    line-height: 24px
}

#detail #content .tuere .description p {
    margin-top: 0
}

#detail #content .tuere .clearfix {
    clear: both;
    float: none
}

#detail #content .properties #detailViewMapWrapper {
    position: relative;
    width: 350px;
    height: 300px;
    padding: 0;
    margin-top: 50px;
    margin-left: -20px
}

.small #detail #content .properties #detailViewMapWrapper {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 50px;
    padding: 0
}

#detail #content .properties #detailViewMap {
    position: absolute;
    width: 350px;
    height: 300px;
    padding-left: 0
}

.small #detail #content .properties #detailViewMap {
    position: absolute;
    width: 512px;
    height: 300px;
    padding-left: 0;
    margin-left: 20px
}

#detail #content .nachbarheadline h2 {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    background-image: url(../img/back_orange.jpg);
    padding: 5px 10px;
    display: inline-block;
    float: none;
    margin: 20px 10px 10px;
    position: absolute
}

.small #detail #content .nachbarheadline h2 {
    width: 532px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    left: calc(50% - 271px);
    padding-left: 0
}

#detail #content .nachbartueren {
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px
}

.small #detail #content .nachbartueren {
    margin-left: auto;
    margin-right: auto;
    width: 440px
}

#detail #content .nachbartuere {
    float: left;
    width: 180px;
    padding: 10px;
    border-radius: 2px;
    margin: 10px;
    box-shadow: 1px 1px 15px -5px #000
}

#detail #content .nachbartuere:hover {
    transform-origin: center center;
    -webkit-animation-name: overIt;
    animation-name: overIt;
    animation-duration: 1s;
    animation-fill-mode: both
}

#filter_control #hauptmenu a:hover i, #listviewButton:hover i {
    -webkit-transform-origin: center center;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

#detail #content .nachbartuere .title {
    font-size: 14px;
    line-height: 18px;
    margin-top: 5px
}

#detail #content .nachbartuere .title strong {
    font-size: 14px;
    line-height: 18px;
    color: #1f7e92
}

#detail #content .nachbartuere .title span {
    font-size: 14px;
    line-height: 18px
}

#topnavigation {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 100000;
    background: 0 0
}

#listviewButton i, #logo, #zoomBar > div {
    background-size: 100%
}

#topnavigation ul {
    list-style-type: none
}

#logo {
    background-image: url(../img/logo_tueren_auf_2022.jpg);
    width: 302px;
    height: 132px;
    margin-bottom: 50px
}

#logo.logo2023 {
    background-image: url(../img/logo_tueren_auf_2023.png);
}

#logo.logo2024 {
    background-image: url(../img/logo_tueren_auf_2024.png);
}

#logo.logo2025 {
    background-image: url(../img/logo_tueren_auf_2025.png);
}

#logo.logo2026 {
    background-image: url(../img/logo_tueren_auf_2026.png);
}

#logo.logo2027 {
    background-image: url(../img/logo_tueren_auf_2027.png);
}

#logo h2 {
    background-color: #4178bc;
    position: absolute;
    left: 55px;
    top: 85px;
    box-shadow: 1px 1px 4px -1px #000
}

#logo h2 span.headline {
    margin-left: 20px;
    margin-right: 20px;
    line-height: 30px;
    color: #fff;
    font-size: 20px;
    clear: both;
    float: none;
    display: block
}

#logo h2 span.status {
    display: block;
    height: 4px;
    width: 100%;
    right: 0;
    position: absolute
}

#listviewButton {
    display: none;
    cursor: pointer;
    width: 150px;
    background-color: #fff;
    position: absolute;
    top: 65px;
    line-height: 30px;
    left: 50%;
    box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, .5);
    font-weight: 600
}

#listviewButton i {
    position: absolute;
    left: -30px !important;
    top: -12px !important;
    width: 55px !important;
    height: 55px !important;
    display: block;
    background-image: url(../img/icon_listenansicht_2x.png) !important;
    background-repeat: no-repeat
}

#listviewButton.aktiv i {
    background-image: url(../img/icon_listenansicht_close_2x.png) !important
}

#listviewButton:hover i {
    transform-origin: center center;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite
}

#bottomnavigation {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9998;
    background-image: url(../img/back_petrol_light.jpg)
}

#zoomBar {
    width: 94px;
    height: 94px;
    position: fixed;
    left: 8px;
    top: calc(50% - 47px);
    z-index: 10000
}

#zoomBar > div {
    width: 47px;
    height: 47px;
    background-image: url(../img/vergroessern_2x.png)
}

#zoomBar > #zoomOut {
    background-image: url(../img/verkleinern_2x.png)
}

#zoomBar > div:hover {
    background-size: 98%;
    cursor: pointer
}

#filter_control #hauptmenu ul li, #hauptmenu ul li {
    margin: 0;
    list-style: none;
    padding: 0;
    display: inline-block;
    margin-right: 20px;
}

#filter_control #hauptmenu ul li a {
    color: #000;
    text-decoration: none;
    background-color: #fff;
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 14px;
    padding-left: 36px;
    padding-right: 10px
}

#filter_control #hauptmenu ul li.tureninfolink a i {
    background-image: url(../img/tuerenauf2.png);
    width: 36px;
    height: 36px;
    margin-left: -136px;
    margin-top: -9px
}

#filter_control #hauptmenu ul li.bewerbunglink a i {
    background-image: url(../img/navi_unten_zur_bewerbung_2x.png);
    width: 36px;
    height: 36px;
    margin-left: -136px;
    margin-top: -9px
}

#filter_control #hauptmenu ul li.mauskontaktlink a i {
    background-image: url(../img/navi_unten_mauskontakt_2x.png);
    width: 36px;
    height: 36px;
    margin-left: -122px;
    margin-top: -6px
}

#filter_control #hauptmenu ul li.mauslink a i {
    background-image: url(../img/navi_unten_zur_mausseite_2x.png);
    width: 46px;
    height: 36px;
    margin-left: -133px;
    margin-top: -5px
}

#filter_control #hauptmenu ul li.mauslink a {
    margin-bottom: 10px
}

#filter_control #hauptmenu a i {
    position: absolute;
    background-size: 100%
}

#filter_control #hauptmenu a:hover i {
    transform-origin: center center;
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

#filter_control #hauptmenu ul li.copyright {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: right
}

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

#filter_control #hauptmenu {
    display: block;
    background-color: rgba(0, 0, 0, .3);
    padding: 20px 30px 30px;
    position: absolute;
    right: 0;
    float: none;
    clear: both;
    position: relative;
    height: 10px !important;
    min-width: 600px;
}

.small #filter_control #hauptmenu {
    float: none;
    clear: both;
    position: relative;
    height: 42px !important;
    min-width: 600px
}

.small #filter_control #hauptmenu li {
    display: inline-block;
    margin-right: 20px
}

.mobile #hauptmenu {
    position: absolute;
    top: -25px;
    left: 10px;
    height: 10px !important;
    text-align: center
}

.mobile #hauptmenu ul {
    margin: 0;
    padding: 0
}

.mobile #hauptmenu li {
    display: inline-block;
    margin-left: 9px;
    margin-right: 9px;
    font-size: 10px;
    line-height: 16px;
    width: 80px;
    background-color: #fff;
    text-align: center;
    box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, .2)
}

.mobile #hauptmenu li a {
    color: #000;
    text-decoration: none
}

.mobile #hauptmenu ul li.bewerbunglink a i {
    background-image: url(../img/navi_unten_zur_bewerbung_2x.png);
    width: 36px;
    height: 36px;
    margin-left: -133px;
    margin-top: -9px
}

.mobile #hauptmenu ul li.mauskontaktlink a i {
    background-image: url(../img/navi_unten_mauskontakt_2x.png);
    width: 36px;
    height: 36px;
    margin-left: -122px;
    margin-top: -6px
}

.mobile #hauptmenu ul li.mauslink a i {
    background-image: url(../img/navi_unten_zur_mausseite_2x.png);
    width: 46px;
    height: 36px;
    margin-left: -133px;
    margin-top: -5px
}

.mobile #copyright, .singleview #copyright {
    color: #000;
    margin: 0;
    padding: 10px;
    background-color: #fff;
    font-family: Titillium, arial, sans-serif
}

.singleview #copyright {
    text-align: center;
    font-size: 14px
}

.mobile #copyright {
    text-align: right;
    font-size: 12px
}

.floatelement {
    float: left;
    margin: 20px 0 20px 20px;
    height: 100px
}

#plzChecker {
    padding-left: 8px;
    margin-top: 5px;
    display: block;
    width: calc(100% - 50px);
    height: 24px;
    line-height: 24px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    float: left
}

#map_search label {
    cursor: pointer;
    color: #fff;
    display: block
}

.filter_box label {
    cursor: pointer;
    color: #fff
}

a.button {
    text-indent: -10000px;
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 0;
    margin-top: 1px;
    width: 34px;
    height: 34px;
    text-align: center;
    background-image: url(../img/suchen_2x.png);
    background-size: 100%;
    float: right
}

a.button:hover {
    background-color: transparent
}

.MicrosoftMap div.Infobox {
    font-family: Titillium, arial, sans-serif;
    background-color: transparent !important;
    background-image: url(../img/overlay_info_2x.png) !important;
    background-repeat: no-repeat;
    background-size: 100%;
    border: none !important;
    width: 300px !important;
    height: 189px !important
}

.MicrosoftMap a.infobox-close img {
    display: none
}

.MicrosoftMap a.closebutton, .MicrosoftMap a.infobox-close {
    position: absolute;
    right: 1px !important;
    top: 1px !important;
    width: 30px !important;
    height: 30px !important;
    text-indent: -1000px;
    display: block;
    background-image: url(../img/close_2x.png) !important;
    background-repeat: no-repeat;
    background-size: 100%
}

.MicrosoftMap a.closebutton:hover, .MicrosoftMap a.infobox-close:hover {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.MicrosoftMap .Infobox .infobox-body {
    padding: 30px
}

.MicrosoftMap .Infobox .infobox-title {
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    color: #fff !important
}

.MicrosoftMap .Infobox .infobox-title strong {
    font-weight: 700 !important
}

.MicrosoftMap .Infobox .infobox-info {
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-right: 20px !important;
    margin-top: 10px;
    font-weight: 400 !important;
    padding: 0 !important;
    color: #fff !important
}

.MicrosoftMap .Infobox .infobox-info a.infobox-link {
    display: block;
    margin-left: 5px;
    padding-left: 27px;
    padding-right: 12px;
    text-decoration: none;
    color: #000;
    margin-top: 20px;
    line-height: 24px;
    position: absolute;
    float: none !important;
    right: 18px;
    bottom: 35px;
    background-color: rgba(255, 255, 255, 1)
}

.MicrosoftMap .Infobox .infobox-info a.infobox-link i {
    background-image: url(../img/icon_zur_beschreibung_2x.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    margin-top: 20px;
    height: 32px;
    width: 32px;
    left: -10px;
    top: -24px;
    position: absolute
}

.MicrosoftMap .Infobox .infobox-stalk, .bigMap .tuerpin {
    display: none !important
}

.MicrosoftMap .Infobox .infobox-info a.infobox-link:hover i {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.NavBar_zoomControlContainer {
    position: absolute;
    top: 0;
    left: 108px;
    width: 52px;
    height: 29px;
    background: #000
}

#myMap .MapPushpinBase {
    cursor: pointer !important
}

.ero .ero-actions, .ero .paddingHack, .myMap {
    display: none
}

.textbox strong {
    font-weight: 700
}

.ero .ero-body {
    padding: 0;
    margin: 0
}

.myMap {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100
}

#seite.singleview #logo h2, body.mobile #logo h2 {
    left: calc(50% - 100px)
}

body.cssEnabled #tueren {
    font-family: Titillium, arial, sans-serif
}

#tueren.overlay #contentbox {
    position: relative;
    z-index: 9997;
    width: calc(100% - 100px);
    display: block;
    margin: 200px auto
}

#tueren.overlay .mask {
    position: fixed;
    z-index: 9997;
    top: 0;
    width: 100%;
    overflow: hidden;
    margin: 0;
    background-color: rgba(25, 86, 99, .65)
}

#tueren.overlay .tuere {
    float: left;
    width: 180px;
    padding: 10px;
    height: 180px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 2px;
    margin: 10px;
    box-shadow: 1px 1px 15px -5px #000;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative
}

#tueren.overlay .age, #tueren.overlay .description, #tueren.overlay .geodata, #tueren.overlay .status, #tueren.overlay .tags, #tueren.overlay hr {
    display: none
}

#tueren.overlay .tuere:hover {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: overIt;
    animation-name: overIt;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

#tueren.overlay .tuere .ausgebuchtschild {
    display: block;
    position: absolute;
    background-image: url(../img/back_rot.jpg);
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    bottom: 15px;
    margin-left: 40px;
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    font-size: 14px;
    line-height: 20px
}

#seite.singleview .imagelink, #seite.singleview .main .title small, #seite.singleview .nachbartuere .age, #seite.singleview .nachbartuere .geodata, #seite.singleview .nachbartuere img.lazy, #seite.singleview .properties .geodata, #seite.singleview hr, .pin_clusterer img, .wobinich, body.mobile #tueren .age, body.mobile #tueren .geodata, body.mobile #tueren .link, body.mobile #tueren .status, body.mobile #tueren .tags, body.mobile #tueren hr {
    display: none
}

#tueren.overlay .title {
    font-size: 14px;
    line-height: 14px;
    margin-top: 5px
}

#tueren.overlay .title strong {
    font-size: 14px;
    line-height: 16px;
    color: #1f7e92
}

#tueren.overlay .title span {
    font-size: 14px;
    line-height: 18px
}

#tueren.overlay .link, #zufallstueren .link, .nachbartuere .link {
    font-size: 14px;
    line-height: 14px;
    margin-top: 0
}

.pin_clusterer {
    background-image: url(../img/cluster.png);
    background-size: 100%;
    outline: 4px
}

.pin_clusterer div {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-shadow: 0 0 3px #999
}

.clearer {
    clear: both;
    float: none
}

body.mobile {
    background: #fff
}

body.mobile #content {
    background-color: #fff;
    padding-top: 10px
}

body.mobile #topnavigation {
    padding-bottom: 15px
}

body.mobile .singleview #topnavigation {
    padding-bottom: 0
}

body.mobile #logo {
    margin: 30px auto 0
}

body.mobile #logo h1 {
    margin: 0
}

body.mobile #logo h2 {
    margin: 17px 0 0
}

body.mobile #bottomnavigation {
    padding: 0
}

body.mobile #tueren .tuere {
    background-color: rgba(70, 154, 178, .27);
    padding: 8px;
    margin: 5px;
    border-left: 5px solid #f99423
}

body.mobile #tueren .tuere.ausgebucht {
    border-left: 5px solid #d42929
}

body.mobile #filter_control {
    padding-bottom: 15px;
    clear: both
}

body.mobile .floatelement {
    height: auto;
    margin: 0 0 0 10px;
    float: none
}

body.mobile .floatelement:nth-child(2) {
    float: right;
    width: 130px
}

body.mobile #map_search label {
    padding-top: 10px;
    font-weight: 700
}

#seite.singleview .nachbartuere, body.mobile #emptyMessage {
    background-color: #efefef;
    padding: 8px;
    font-family: Titillium, arial, sans-serif
}

body.mobile #plzChecker {
    width: 220px;
    height: 24px;
    margin-bottom: 10px
}

body.mobile a.button {
    margin-left: 10px;
    float: left
}

body.mobile #emptyMessage {
    margin: 5px
}

#seite.singleview #logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px
}

#seite.singleview .main, #seite.singleview .properties {
    font-family: Titillium, arial, sans-serif;
    width: 94%;
    margin-left: auto;
    margin-right: auto
}

#seite.singleview .label {
    font-weight: 700;
    margin-top: 20px
}

#seite.singleview .main .image img {
    width: 100% !important;
    height: auto !important
}

#seite.singleview .nachbarheadline {
    font-family: Titillium, arial, sans-serif;
    font-size: 12px;
    line-height: 12px;
    width: 94%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto
}

#seite.singleview .nachbartuere {
    width: calc(100% - 16px);
    margin: 5px
}

#seite.singleview .imagelink img {
    width: 100% !important;
    height: auto !important
}

#seite.singleview .imagelink a i {
    background-image: url(../img/icon_telefonnummer_2x.png);
    position: absolute;
    width: 80px;
    height: 80px;
    display: block;
    margin-top: -120px;
    left: calc(50% - 40px);
    background-repeat: no-repeat;
    background-size: 100%
}

.printinfo, .printlogo, body.cssEnabled .wdrlogo span {
    display: none
}

#legende {
    width: 150px;
    background-color: #fff;
    text-align: left;
    position: absolute;
    top: 50px;
    right: 30px;
    box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, .5);
    z-index: 999;
    padding: 5px 5px 5px 20px;
    font-family: Titillium, arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600
}

#legende .legendeausgebucht {
    color: #dc0000
}

body.cssEnabled #startdialog .wdrlogo {
    background-image: url(../img/wdr_logo.png);
    height: 32px;
    width: 103px;
    position: absolute;
    top: -50px;
    background-repeat: no-repeat
}

body.mobile .wdrlogo {
    display: none;
}

body.mobile #legende {
    display: none;
}

body.cssEnabled #startbox .col2 h3{
    content: url(../img/besucherinnen.svg);
    height: 80px;
    margin-top:20px;
}

body.cssEnabled #startbox .col3 h3{
    content: url(../img/veranstalerinnen.svg);
    height: 80px;
    margin-top:20px;
}