/* ========= NAVIGATION ========= */


/* ======================================================= */

@import 'nav_bar_top.css';
@import 'nav_tree_breadcrumbs.css';
@import 'nav_tree_menu.css';
@import 'nav_tree_sitemap.css';


/* ========= LAYOUT ========= */


/* ======================================================= */

.contentWrapper {
    width: 960px;
    margin: 0px auto;
}

#topBox {}

#topBox .contentWrapper {
    position: relative;
}

#homelinkBox {
    display: inline-block;
    padding: 16px 0px 22px 0px;
    margin: 0px 0px 0px -15px;
}

#homelinkBox a {
    display: block;
    width: 440px;
    height: 99px;
    background-image: url(../../images/site/top_logo.svg);
    background-repeat: no-repeat;
}

#topnavBox {
    position: absolute;
    top: 18px;
    right: 200px;
}

#sociallinksBox {
    position: absolute;
    top: 12px;
    right: 165px;
}

#sociallinksBox li {
    float: left;
}

#sociallinksBox a {
    display: block;
    width: 24px;
    height: 24px;
    color: #000000;
    font-family: "FontAwesome";
    font-size: 28px;
    line-height: 22px;
}

#sociallinksBox .facebook a::before {
    content: "\f230";
}

#sociallinksBox a:hover {
    color: #DC231A;
}

#searchBox {
    position: absolute;
    top: 10px;
    right: 0px;
}

#searchBox input {
    width: 100px;
    float: left;
    border: 1px solid #E8E8E8;
    background-color: #E8E8E8;
}

#searchBox .button {
    float: left;
    display: inline-block;
    width: 23px;
    height: 27px;
    border: none;
    background: transparent url(../../images/site/btn_search.png) no-repeat center;
    text-indent: -9999px;
    font-size: 0px;
    margin: 0px 0px 0px 5px;
}

#navBox {
    background-color: #F4F7F5;
    position: relative;
    z-index: 6;
}

#navBox::after {
    content: "";
    background-image: url(../../images/site/bkg_img_shadow.png);
    background-repeat: no-repeat;
    background-position: center top;
    height: 11px;
    position: absolute;
    bottom: -11px;
    left: 0px;
    right: 0px;
    z-index: 3;
}

#logonBox {
    width: 190px;
    /* height: 105px; */
    position: absolute;
    padding: 30px 0px 0px 0px;
}

#logonBox .getmember {
    padding: 0px 0px 5px 0px;
}

#logonBox .getmember a,
#logonBox .showlogin a {
    text-decoration: none;
    color: #dc231a;
    font-weight: 700;
}

#logonBox .getmember a:hover,
#logonBox .showlogin a:hover {
    text-decoration: none;
    color: #000000;
}

#logonBox .getmember a::before,
#logonBox .showlogin a::before {
    font-family: FontAwesome;
    color: #000000;
    display: inline-block;
    width: 20px;
    text-align: center;
    margin: 0px 10px 0px 0px;
    font-size: 16px;
    line-height: 14px;
}

#logonBox .getmember a::before {
    content: "\f0c0";
}

#logonBox .showlogin a::before {
    content: "\f023";
}

#logonBox .showlogin a {
    text-transform: uppercase;
}

#logonBox .logonTopLinks {
    border-bottom: 30px solid #F4F7F5;
    position: relative;
    z-index: 9;
}

#logonBox .loggedIn .liUsername {
    padding: 0px 0px 5px 0px;
}

#logonBox .loggedIn ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style: none;
}

#logonBox .loggedIn li::before {
    content: '\00BB';
    padding-right: 5px;
}

#logonBox #loginFormWrapper {
    display: none;
    position: absolute;
    z-index: 5;
    background-color: #F4F7F5;
}

#logonBox #loginForm {
    padding: 0px 25px 25px 25px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

#logonBox #loginForm::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -20px;
    right: -20px;
    background-color: #F4F7F5;
    height: 15px;
}

#logonBox .header {
    text-transform: uppercase;
    font-weight: 300;
    margin: 0px 0px 10px 0px;
}

#logonBox .header span {
    color: #dc231a;
    font-weight: 700;
}

#logonBox fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

#logonBox legend {
    font-size: 0px;
}

#logonBox input[type=text],
#logonBox input[type=password] {
    display: block;
    width: 150px;
    background-color: #C4C4C4;
    color: #ffffff;
    border: none;
    margin: 0px 0px 2px 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#logonBox .button {
    width: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#logonBox .logonLinks {
    margin: 10px 0px 0px 0px;
}

#logonBox .logonLinks a {
    color: #000000;
    text-decoration: none;
}

#logonBox .logonLinks a:hover {
    color: #dc231a;
}

#mainnavBox {}

#imageBox {
    height: 85px;
    background-image: url(../../images/site/bkg_mainpic_default.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#mainBox {
    padding: 20px 0px 0px 0px;
}

#leftBox {
    width: 640px;
    float: left;
}

#breadcrumbsBox {
    padding: 0px 0px 10px 0px;
    border-bottom: 1px dotted #C3CCCB;
    margin: 0px 0px 20px 0px;
}

#contentBox {
    padding: 0px 0px 0px 0px;
}

#rightBox {
    width: 280px;
    float: right;
}

#widgetBox {}

#newsletterBox {
    padding: 0px 0px 10px 0px;
}

#facebookBox {}

#bottominfoBox {
    margin: 80px 0px 0px 0px;
    padding: 50px 0px 0px 0px;
    border-top: 1px dotted #C3CCCB;
}

#footerBox {
    background-color: #F4F7F5;
    padding: 0px 0px 100px 0px;
    margin: 50px 0px 0px 0px;
    color: #555555;
}

#footerBox .contentWrapper::after {
    content: "";
    display: table;
    clear: both;
}

#toplinkBox {
    text-align: center;
}

#toplinkBox a {
    display: inline-block;
    text-decoration: none;
    padding: 0px 0px 30px 0px;
}

#toplinkBox a:hover {
    opacity: 0.5;
}

#toplinkBox a:before {
    content: "\f106";
    font-family: FontAwesome;
    color: #989999;
    font-size: 50px;
    line-height: 50px;
}

#addressBox {
    width: 290px;
    float: left;
}

#addressBox .header {
    padding: 0px 0px 20px 0px;
}

#addressBox .header .title {
    font-weight: 700;
}

#addressBox .header .subtitle {
    font-family: "Droid Serif", serif;
    font-style: italic;
}

#sitemapnavBox {
    width: 670px;
    float: right;
}

#mobileTogglesBox {
    display: none;
}


/* ========= LAYOUT: index ========= */


/* ======================================================= */

.index .newsContent {
    width: 305px;
    float: left;
    padding: 0px 15px 0px 0px;
}

.index .eventsContent {
    width: 305px;
    float: right;
    padding: 0px 0px 0px 15px;
}

.index .newsContent .topHeader,
.index .eventsContent .topHeader {
    font-family: "Droid Serif", serif;
    font-style: italic;
    padding: 0px 0px 15px 0px;
    margin: 0px 0px 30px 0px;
    position: relative;
}

.index .newsContent .topHeader::after,
.index .eventsContent .topHeader::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 40px;
    height: 5px;
    background-color: #E8E8E8;
}

.index .newsContent .moreLink,
.index .eventsContent .moreLink {
    margin: 40px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    border-top: 1px solid #C3CCCB;
}

.index .newsContent .date {
    color: #A7AFAE;
    padding: 0px 0px 5px 0px;
}

.index .newsContent .title a {
    color: #000000;
    text-decoration: none;
    font-family: "Droid Sans", sans-serif;
    font-style: normal;
}

.index .newsContent .title a:hover {
    color: #dc231a;
    text-decoration: none;
}

.index .newsContent .listSpacer {
    height: 0px;
    margin: 15px 0px 15px 0px;
    border-bottom: 1px dotted #C3CCCB;
}

.index .eventsContent .boxLeft {
    width: 85px;
}

.index .eventsContent .boxLeft .dateBegin {
    width: 70px;
    height: 70px;
    overflow: hidden;
    color: #ffffff;
    background-color: #BEC8C7;
    text-align: center;
}

.index .eventsContent .boxLeft .dateBegin .month {
    text-transform: uppercase;
}

.index .eventsContent .boxLeft .dateBegin .day {
    font-weight: 700;
}

.index .eventsContent .boxRight {
    margin-left: 85px;
}

.index .eventsContent .boxRight .title a {
    font-weight: 700;
    color: #000000;
    text-decoration: none;
}

.index .eventsContent .boxRight .title a:hover {
    color: #dc231a;
    text-decoration: none;
}

.index .eventsContent .boxRight .timeBegin {}

.index .eventsContent .boxRight .place {
    color: #dc231a;
    padding: 0px 0px 0px 15px;
}

.index .eventsContent .boxRight .place::before {
    content: "\f041";
    font-family: FontAwesome;
    font-size: 14px;
    margin: 0px 0px 0px -15px;
    position: absolute;
}

.index #mainBox {
    padding-top: 40px;
}


/* ========= LAYOUT: inline popup ========= */


/* ======================================================= */

body.inlinePopup {
    padding: 20px;
    background-color: #ffffff;
    background-image: none;
    /*background-image: url(../../images/site/bkg_popup.gif);*/
    background-repeat: repeat-x;
}


/* ========= LAYOUT: responsive ========= */


/* ======================================================= */

.subnavToggle {
    display: none;
}

/* --- tablet + smartphone --- */
@media (max-width: 991px) {

    .contentWrapper {
        width: auto;
        padding: 0px 15px 0px 15px;
    }

    /* header */
    #topBox .contentWrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #homelinkBox {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 0px 10px 0px;
        margin: 0px;
    }

    #homelinkBox a {
        width: 220px;
        max-width: 100%;
        height: 50px;
        background-size: contain;
    }

    #mobileTogglesBox {
        display: flex;
        order: 4;
    }

    #mobileTogglesBox button {
        width: 44px;
        height: 44px;
        padding: 0px;
        border: none;
        background: transparent;
        color: #000000 !important; /* overrides the global button color in common.css */
        font-family: FontAwesome;
        font-size: 24px;
        line-height: 44px;
        cursor: pointer;
    }

    #mobileTogglesBox button:hover,
    #mobileTogglesBox button.active {
        color: #DC231A !important;
    }

    #mobileTogglesBox .searchToggle::before {
        content: "\f002";
    }

    #mobileTogglesBox .navToggle::before {
        content: "\f0c9";
    }

    #mobileTogglesBox .navToggle.active::before {
        content: "\f00d";
    }

    #searchBox {
        display: none;
        position: static;
        order: 5;
        flex: 0 0 100%;
        padding: 0px 0px 10px 0px;
    }

    .searchOpen #searchBox {
        display: block;
    }

    #searchBox form {
        display: flex;
    }

    #searchBox input {
        flex: 1 1 auto;
        width: auto;
        float: none;
    }

    #searchBox .button {
        flex: 0 0 23px;
        float: none;
    }

    #topnavBox {
        position: static;
        order: 2;
        padding: 0px 15px 0px 0px;
    }

    #topnavBox .barTop ul {
        margin-left: -10px;
    }

    #sociallinksBox {
        position: static;
        order: 3;
        padding: 0px 10px 0px 0px;
    }

    /* logon */
    #logonBox {
        position: static;
        width: auto;
        padding: 12px 0px 12px 0px;
    }

    #logonBox .logonTopLinks {
        display: flex;
        flex-wrap: wrap;
        border-bottom: none;
    }

    #logonBox .logonTopLinks li {
        padding: 0px 25px 0px 0px;
    }

    #logonBox #loginFormWrapper {
        position: static;
    }

    #logonBox #loginForm {
        padding: 15px 0px 5px 0px;
        box-shadow: none;
    }

    #logonBox #loginForm::before {
        display: none;
    }

    #logonBox input[type=text],
    #logonBox input[type=password],
    #logonBox .button {
        width: 100%;
        max-width: 300px;
    }

    #logonBox .loggedIn .liUsername,
    #logonBox .loggedIn ul,
    #logonBox .loggedIn li {
        display: inline-block;
        padding: 0px;
    }

    #logonBox .loggedIn li {
        margin: 0px 0px 0px 10px;
    }

    /* main navigation (toggle menu) */
    #mainnavBox {
        display: none;
        padding: 5px 0px 15px 0px;
        border-top: 1px dotted #C3CCCB;
    }

    .mainnavOpen #mainnavBox {
        display: block;
    }

    .treeMenu ul,
    .treeMenu li,
    .treeMenu li:nth-child(n) {
        display: block;
        width: auto;
        margin: 0px;
    }

    .treeMenu div,
    .treeMenu ul ul div {
        display: flex;
        align-items: center;
        width: auto;
    }

    .treeMenu a {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        height: auto;
        min-height: 50px;
    }

    .treeMenu a::before {
        position: static;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 5px 12px 5px 0px;
        background-size: 24px auto;
    }

    .treeMenu a span {
        display: block;
        padding: 0px;
        background-color: transparent;
    }

    .subnavToggle {
        display: block;
        flex: 0 0 44px;
        height: 44px;
        padding: 0px;
        border: none;
        background: transparent;
        color: #555555 !important; /* overrides the global button color in common.css */
        font-family: FontAwesome;
        font-size: 20px;
        cursor: pointer;
    }

    .subnavToggle::before {
        content: "\f107";
    }

    .subnavToggle.active::before {
        content: "\f106";
    }

    /* important: overrides inline styles of the desktop dropdown plugin after resizing */
    .treeMenu ul ul,
    .treeMenu li:nth-child(n) ul {
        display: none !important;
        position: static;
        width: auto;
        margin: 0px !important;
        padding: 0px 0px 5px 52px;
        background-color: transparent;
        box-shadow: none;
    }

    .treeMenu li.subnavOpen > ul {
        display: block !important;
    }

    .treeMenu ul ul::before {
        display: none;
    }

    .treeMenu ul ul a {
        display: block;
        min-height: 0px;
        padding: 8px 0px 8px 0px;
    }

    .treeMenu li:nth-child(n) ul ul {
        padding-left: 20px;
    }

    .treeMenu ul ul ul a {
        padding-left: 0px;
    }

    /* content */
    #imageBox {
        height: 60px;
    }

    #leftBox,
    #rightBox {
        width: auto;
        float: none;
    }

    #rightBox {
        margin: 40px 0px 0px 0px;
    }

    #bottominfoBox {
        margin: 40px 0px 0px 0px;
        padding: 30px 0px 0px 0px;
    }

    #contentBox img {
        max-width: 100%;
        height: auto;
    }

    #contentBox iframe,
    #contentBox video,
    #contentBox embed,
    #contentBox object {
        max-width: 100%;
    }

    /* footer */
    #footerBox {
        padding: 0px 0px 50px 0px;
    }

    #addressBox,
    #sitemapnavBox {
        width: auto;
        float: none;
    }

    #sitemapnavBox {
        margin: 30px 0px 0px 0px;
    }

    #sitemapnavBox .treeSitemap ul,
    #sitemapnavBox .treeSitemap li {
        display: block;
        width: auto;
    }

    #sitemapnavBox .treeSitemap > ul > li {
        padding: 0px 0px 20px 0px;
    }

    /* index */
    .index .newsContent,
    .index .eventsContent {
        width: 50%;
        box-sizing: border-box;
    }

    /* index slider: image band on top, teaser as framed card below (#sliderBox beats mod_effects_slide_index.css) */
    #sliderBox .indexSlide .item {
        height: auto;
        padding: 220px 0px 0px 0px;
    }

    #sliderBox .indexSlide .item .contentWrapper {
        height: auto;
        padding: 0px 20px 20px 20px;
    }

    #sliderBox .indexSlide .item .teaser {
        position: static;
        width: auto;
        padding: 15px 15px 20px 15px;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.35);
    }

    /* arrows centered in the image band instead of over the text */
    #sliderBox .indexSlide .sliderArrow {
        top: 110px;
    }
}

/* --- small tablet + smartphone: logo + toggles in the first row, top menu below --- */
@media (max-width: 767px) {

    #mobileTogglesBox {
        order: 2;
    }

    #searchBox {
        order: 3;
    }

    #topnavBox {
        order: 4;
        flex: 1 1 calc(100% - 40px); /* forces its own row, independent of the search box state */
        padding: 0px 0px 10px 0px;
    }

    #sociallinksBox {
        order: 5;
        padding: 0px 0px 10px 0px;
    }
}

/* --- smartphone --- */
@media (max-width: 599px) {

    /* index */
    .index #mainBox {
        padding-top: 20px;
    }

    .index .newsContent,
    .index .eventsContent {
        width: auto;
        float: none;
        padding: 0px;
    }

    .index .eventsContent {
        margin: 40px 0px 0px 0px;
    }

    #sliderBox .indexSlide .item {
        padding-top: 160px;
    }

    #sliderBox .indexSlide .item .contentWrapper {
        padding: 0px 12px 12px 12px;
    }

    #sliderBox .indexSlide .sliderArrow {
        top: 80px;
    }

    /* list thumbnails */
    .leftPic img,
    .rightPic img {
        max-width: 80px;
        height: auto;
    }

    /* forms: single column */
    div form.swslang {
        margin-left: 0px;
    }

    div form.swslang fieldset {
        padding: 0px;
    }

    div form.swslang .header {
        width: 100%;
        padding: 0px;
        box-sizing: border-box;
    }

    div form.swslang label,
    div form.swslang .separator label span,
    div form.swslang .separatorLast label span {
        width: auto;
        float: none;
    }

    div form.swslang input:not([type=checkbox]):not([type=radio]),
    div form.swslang .button,
    div form.swslang button,
    div form.swslang select,
    div form.swslang textarea {
        width: 100%;
        box-sizing: border-box;
    }

    div form.swslang input.button,
    div form.swslang button.button {
        margin: 20px 0px 0px 0px;
    }

    div form.swslang .separator,
    div form.swslang .separatorLast,
    div form.swslang fieldset .infoText {
        padding-left: 0px;
    }

    div form.swslang .singleLine,
    div form.swslang .singleLine label.modAlert,
    div form.swslang fieldset fieldset .singleLine,
    div form.swslang fieldset fieldset .singleLine label.modAlert {
        padding-left: 0px;
    }

    div form.swslang label.modAlert,
    div form.swslang fieldset fieldset label.modAlert {
        margin-left: 0px;
    }
}


/* ========= LAYOUT: print ========= */


/* ======================================================= */

#printFooterBox {
    display: none;
}

#printHeaderBox {
    display: none;
}

@media print {
    body {
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
        background-image: none;
    }
    .noprint {
        display: none;
        /* Alle nicht-druckbaren Elemente ausblenden */
    }
    .print {
        width: auto !important;
        padding: 0px !important;
        margin: 0px !important;
        border: 0px !important;
        background: transparent !important;
    }
    /* ---- LAYOUT ----  */
    /* ---------------------------------------------------------  */
    #contentBox {
        width: 640px !important;
        padding: 0px !important;
        margin: 0px auto !important;
        margin-bottom: 20px;
        color: #000000;
    }
    #printHeaderBox {
        /* ---- KOPFZEILE ----  */
        clear: both;
        display: block !important;
        width: 640px;
        padding: 5px 10px 5px 10px;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-bottom: 15px;
        text-align: center;
    }
    #printFooterBox {
        /* ---- FUSSZEILE ----  */
        clear: both;
        display: block !important;
        width: 640px;
        padding-top: 10px;
        border-top: 1px solid #000000;
        text-align: center;
        margin-top: 20px;
        font-size: 9px;
    }
}