/* ==========================================================================
 *
 *  General Styles for Screen Media
 *
 *  Author:  Philipp Mueller <philipp.mueller@xeiro.ch>
 *  Company: xeiro ag, www.xeiro.ch
 *  Version: 27.08.2015
 *
 *  Colors:
 *    Green 1: #afca00 | rgba(175,202,0,1)
 *    Green 2: #c7d500 | rgba(199,213,0,1)
 *    Green 3: #e0e000 | rgba(224,224,0,1)
 *    Green 4: #1a7b53 | rgba(26,123,83,1)
 *
 * ========================================================================== */


@media screen {

    /* General
    ------------------------------ */
    body {
        padding: 86px 0 0 0;
    }

    #nav_toggle {
        display: none;
    }

    .template-width {
        position: relative;
        margin: 0 auto;
        max-width: 1080px;
        width: 94%;
    }

    .content-padding {
        padding: 2em 0;
    }

    .bgcolor-0 {
        background-color: transparent;
    }

    .bgcolor-1 {
        background-color: #d1d665;
    }

    .bgcolor-2 {
        background-color: #d1d665;
    }

    .bgcolor-3 {
        background-color: #c2c491;
    }

    .page-anchor {
        position: absolute;
        margin: -46px 0 0 0;
    }

    /* Header
    ------------------------------ */
    #header {
        position: fixed;
        background: rgba(255, 255, 255, 1);
        top: 0;
        width: 100%;
        left: 0;
        right: 0;
        z-index: 100;
    }

    #logo {
        float: left;
        width: 30%;
        padding: 13px 0 5px;
        line-height: 0;
        overflow: hidden;
    }

    #logo1 {
        float: left;
        width: 57%;
    }

    #logo2 {
        float: right;
        width: 39.5%;
    }

    #logo img {
        width: 100%;
        height: auto;
    }

    /* Navigation
    ------------------------------ */
    #nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #nav ul li {
        padding: 0;
        margin: 0;
    }

    #nav ul li a {
        display: block;
    }

    #nav ul.level0 li#searchfield input:focus {
        outline: none;
        box-shadow: none;
        border-bottom-color: #d1d665;
        font-weight: 300;
    }

    #nav ul.level0 li#searchfield input {
        border: none;
        color: #000;
        font-size: 0.8em;
        font-weight: bold;
        line-height: 1;
        margin: 34px 20px 26px;
        padding: 0 0 0 22px;
        max-width: 100px;
        border-bottom: 1px solid transparent;
        background-color: #fff;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
        background-size: 18px;
        background-position: left center;
        background-repeat: no-repeat;
    }

    #nav ul.level0 li#searchfield input::placeholder {
        color: #000;
    }

    #nav ul.level0 li#searchfield input:focus::placeholder {
        color: #ccc;
    }

    /*
      more navigation styles see bottom:
      @media only screen and (min-width : 801px)
    */
    /* FlexSlider
    ------------------------------ */
    #head_image {
        position: relative;
    }

    .flexslider {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 460px;
        max-height: 460px;
        z-index: 5;
    }

    .flexslider ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .flexslider ul li {
        float: left;
        padding: 0;
        margin: 0;
        line-height: 0;
        width: 100%;
    }

    /* Slides */
    .flexslider .slides li {
        display: none;
    }

    .flexslider .slides li img {
        width: 100%;
        height: auto;
    }

    /* Control Navigation */
    .flex-control-nav {
        position: absolute;
        clear: both;
        width: 100%;
        bottom: 10px;
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center;
        height: 20px;
        z-index: 20;
    }

    .flex-control-nav li {
        display: inline-block;
        margin: 0 5px;
        padding: 0;
        height: 20px;
        line-height: 50px;
    }

    .flex-control-nav li a {
        display: block;
        background: rgba(255, 255, 255, 0.5);
        padding: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        border-radius: 100%;
        font-size: 0;
    }

    .flex-control-nav li a.flex-active {
        cursor: default;
        background: rgba(255, 255, 255, 0.9);
    }

    /* Direction Navigation */
    .flex-direction-nav {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        margin: 0 auto !important;
        z-index: 10;
    }

    .flex-direction-nav li a {
        position: absolute;
        display: block;
        top: 0;
        width: 50px;
        height: 50px;
        font-size: 60px;
        line-height: 40px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .flex-direction-nav li a:hover {
        color: rgba(255, 255, 255, 1) !important;
    }

    .flex-direction-nav li .flex-prev {
        left: 2.5%;
        text-align: center;
    }

    .flex-direction-nav li .flex-next {
        right: 2.5%;
        text-align: center;
    }

    .flex-direction-nav li a span {
        display: block;
    }

    .flex-direction-nav li .flex-prev span {
        margin: 0;
    }

    .flex-direction-nav li .flex-next span {
        margin: 0;
    }

    /* Footer
    ------------------------------ */
    /* General */
    #footer {
        background: #333;
        color: #fff;
        font-size: 0.77777777777778em;
    }

    #footer a {
        color: #fff;
        text-decoration: none;
    }

    #footer a:hover {
        color: rgba(175, 202, 0, 1);
        text-decoration: underline;
    }

    #footer span.title,
    #footer span.text {
        display: block;
    }

    #footer span.title {
        font-size: 1.5em;
        line-height: 1.4em;
        padding: 0 0 0.5em;
    }

    /* Footer Left */
    #footer-left {
        float: left;
        width: 80%;
    }

    #footer-left ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #footer-left ul li {
        position: relative;
        float: left;
        display: block;
        background: #fff;
        padding: 0;
        margin: 0 20px 20px 0;
        width: 120px;
        height: 80px;
        text-align: center;
    }

    #footer-left ul li span {
        position: relative;
        display: block;
        padding: 5px 5px 0;
    }

    #footer-left ul li a {
        display: bloock;
    }

    #footer-left ul li img {
        width: auto;
        height: auto;
        max-width: 110px;
        max-height: 70px;
    }

    /* Footer Right */
    #footer-right {
        float: right;
        width: 20%;
        text-align: right;
    }

    #footer-right .social-links {
        display: flex;
        justify-content: end;
        padding-top: 40px;
    }

    #footer-right .social-links {
        padding-bottom: 8px;
    }

    #footer-right .social-links > div {
        margin-left: 10px;
    }

    #footer-right .social-links img {
        width: 50px;
        height: 50px;
    }

    #footer-right .service {
        position: absolute;
        right: 0;
        bottom: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #footer-right .service li {
        display: inline-block;
        padding: 0;
        margin: 0;
    }


}


/* ==========================================================================
 *
 *  Repsonsive Styles
 *
 * ========================================================================== */


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

    #nav ul.level0 li a {
        font-size: 0.875em;
        padding: 23px 5px;
    }


    .layout-4 .div-table-row, .layout-4 .div-table-cell,
    .layout-4 .div-table-row, .layout-4 .div-table-cell {
        display: block;
        padding: 0 !important;
        margin: 0 0 1em !important;
        width: auto !important;
    }


}

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

@media only screen and (min-width: 831px) {

    /* Navigation
    ------------------------------ */
    #nav {
        float: left;
        padding: 0 0 0 30px;
    }

    #nav ul li {
        float: left;
    }

    #nav ul li a {
        text-decoration: none;
        color: #000;
    }

    /* Level 0 */
    #nav ul.level0 li {
        position: relative;
    }

    #nav ul.level0 li a {
        font-size: 0.8em;
        font-weight: 700;
        padding: 30px 20px;
        text-align: center;
    }

    #nav ul.level0 li a.act {
        color: #d1d665;
    }

    #nav ul.level0 li a:hover {
        color: #d1d665;
    }

    /* Level 1 */
    #nav ul.level1 {
        position: absolute;
        display: none;
        z-index: 110;
        background: rgba(0, 0, 0, 0.6);
    }

    #nav ul.level1 li {
        float: none;
        display: block;
        border-top: 1px solid rgba(0, 0, 0, 0.9);
    }

    #nav ul.level1 li.first {
        border-top: none;
    }

    #nav ul.level1 li a {
        border-top: 0;
        border-left: 4px solid transparent;
        padding: 4px 15px 4px 11px !important;
        color: #fff;
        white-space: nowrap;
        text-align: left;
        font-size: 0.875em;
        font-weight: 300;
    }

    #nav ul.level1 li a.act {
        border-left-color: #d1d665;
        color: #d1d665;
    }

    #nav ul.level1 li a:hover {
        border-left-color: #d1d665;
        color: #d1d665;
    }

    #nav ul.level1 li a:hover:before {
        content: normal;
    }

    /* Level 2 */
    #nav ul.level2 {
        position: relative;
        display: block;
        z-index: 120;
    }

    #nav ul.level2 li a {
        font-size: 0.8125em;
        padding: 2px 15px 2px 26px;
    }

    /* Language Navigation */
    #lang_nav {
        float: right;
    }

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

    #lang_nav li {
        float: left;
        padding: 33px 0 0;
        margin: 0;
    }

    #lang_nav li a {
        display: block;
        text-align: center;
        width: 28px;
        line-height: 1.25em;
        text-decoration: none;
        font-size: 0.8em;
        padding: 1px 0;
        color: #000;
    }

    #lang_nav li a.act {
        font-weight: 700;
    }

    #lang_nav li a:hover {
        text-decoration: none;
        color: #d1d665;
    }


    #header.scroll #lang_nav {
        position: absolute;
        right: 0;
    }


    #header.scroll #lang_nav li {
        float: left;
        padding: 13px 0 0;
        margin: 0;
    }


}


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


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


    /* General
    ------------------------------ */
    body {
        font-size: 14px;
        padding-top: 0;
    }

    .template-width {
        width: 90%;
    }

    #header {
        position: relative;
    }

    #logo {
        padding-bottom: 10px;
    }

    #xrauthor {
        display: none;
    }

    .layout-2 .div-table-row, .layout-2 .div-table-cell,
    .layout-3 .div-table-row, .layout-3 .div-table-cell,
    .layout-4 .div-table-row, .layout-4 .div-table-cell,
    .layout-5 .div-table-row, .layout-5 .div-table-cell,
    .layout-6 .div-table-row, .layout-6 .div-table-cell,
    .layout-7 .div-table-row, .layout-7 .div-table-cell,
    .layout-8 .div-table-row, .layout-8 .div-table-cell,
    .layout-9 .div-table-row, .layout-9 .div-table-cell,
    .layout-17 .div-table-row, .layout-17 .div-table-cell,
    .layout-10 .div-table-row, .layout-10 .div-table-cell,
    .layout-19 .div-table-row, .layout-19 .div-table-cell,
    .layout-11 .div-table-row, .layout-11 .div-table-cell,
    .layout-20 .div-table-row, .layout-20 .div-table-cell,
    .layout-18 .div-table-row, .layout-18 .div-table-cell,
    .layout-21 .div-table-row, .layout-21 .div-table-cell {
        display: block;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Navigation Toggle
    ------------------------------ */
    #nav_toggle {
        position: relative;
        float: left;
        width: 30px;
        display: block;
        margin: 5px 0 0 -6px;
        padding: 13px 7px 9px;
    }

    #nav_toggle .line {
        position: relative;
        background: rgba(175, 202, 0, 1);
        height: 3px;
        margin: 0 0 4px 0;
    }


    /* Logo
    ------------------------------ */
    #logo {
        float: right;
        width: 70%;
        max-width: 240px;
    }


    /* Navigation
    ------------------------------ */
    #nav {
        display: none;
        clear: both;
        padding: 0;
    }

    #nav ul li {
        margin: 2px 0 0 0;
    }

    #nav ul li a {
        color: #000;
        text-decoration: none;
    }

    /* Level 0 */
    #nav ul.level0 {
        margin: 0 0 20px;
    }

    #nav ul.level0 li.first {
        margin-top: 0;
    }

    #nav ul.level0 li a {
        background: rgba(175, 202, 0, 1);
        padding: 5px 15px;
    }

    #nav ul.level0 li#searchfield input {
        width: 90%;
        max-width: 90%;
        box-sizing: border-box;
    }

    /* Level 1 */
    #nav ul.level1 li {
        margin: 1px 0 0 !important;
    }

    #nav ul.level1 li a {
        background: rgba(175, 202, 0, 0.7);
        padding: 3px 15px 3px 25px;
    }

    /* Language Navigation
    ------------------------------ */
    #lang_nav {
        position: relative;
        display: none;
        clear: both;
        padding: 10px 0 15px;
    }

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

    #lang_nav ul li {
        float: left;
        width: 33.333333333333333%;
        padding: 0;
        margin: 0;
    }

    #lang_nav ul li a {
        display: block;
        text-decoration: none;
        text-align: center;
        background: rgba(175, 202, 0, 1);
        padding: 5px 0;
        color: #000;
    }

    #lang_nav ul li a.act {
        font-weight: 700;
    }

    #lang_nav ul li.de a {
        margin: 0 10px 0 0;
    }

    #lang_nav ul li.fr a {
        margin: 0 5px;
    }

    #lang_nav ul li.en a {
        margin: 0 0 0 10px;
    }


    /* Content
    ------------------------------ */
    h1 {
        font-size: 2em; /* 60px */
    }

    h2 {
        font-size: 1.75em; /* 50px */
    }

    h3 {
        font-size: 1.5em; /* 40px */
    }

    h4 {
        font-size: 1.25em; /* 30px */
    }

    h5 {
        font-size: 1.1em; /* 20px */
    }

    .csc-slider {
        margin-right: 20px;
        margin-left: 20px;
    }

    .csc-textpic-text,
    .csc-textpic-imagewrap {
        float: none !important;
        margin: 0 0 10px 0 !important;
        width: auto !important;
    }

    .csc-menu-4 ul li {
        float: none;
        width: auto;
        padding: 0;
        margin: 0 0 20px;
    }

    div.csc-textpic-imagecolumn, td.csc-textpic-imagecolumn .csc-textpic-image {
        margin-right: 0;
    }

    div.csc-textpic .csc-textpic-imagewrap .csc-textpic-imagerow-last .csc-textpic-image {
        margin-bottom: 30px;
    }

    /* dasselbe fuer fluid_styled_content (ab TYPO3 14), Regel fuer Regel wie oben:
       Galerie und Textblock verlieren Float und Rand, die Spalten nur ihren rechten
       Abstand - sie FLOATEN WEITER (Befund 16.09.2026, Tablet 768 px: die drei Kacheln
       der Startseite stehen live 2 + 1, eine fruehere Fassung setzte float: none und
       stapelte sie). Die Zentrierung (ce-outer/ce-inner) bleibt wie live unangetastet.
       Der Abstands-Selektor spiegelt den aus MediaAll.css, sonst verliert er an
       Spezifitaet - live sind beide gleich stark und die spaetere Regel gewinnt. */
    .ce-gallery,
    .ce-textpic .ce-bodytext {
        float: none !important;
        margin: 0 0 10px 0 !important;
        width: auto !important;
    }

    .ce-gallery div.ce-column {
        margin-right: 0;
    }

    .ce-gallery:not([data-ce-images="1"]) div.ce-row:last-child:not(.ce-row-keine-zeilen) figure.image {
        margin-bottom: 30px;
    }

    /* Footer
    ------------------------------ */
    #footer {
        font-size: 1em;
    }

    #footer-left,
    #footer-right {
        float: none;
        width: auto;
        text-align: center;
    }

    #footer-left ul li {
        float: none;
        display: inline-block;
        margin: 0 10px 20px;
    }

    #footer-right {
        border-top: 1px solid #fff;
        padding: 15px 0 0 0;
    }


}


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


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

    #footer address,
    #footer #service_nav {
        float: none;
        width: auto;
        text-align: center;
    }

    #footer address {
        padding: 0 0 10px;
        border-bottom: 1px solid #fff;
        margin: 0 0 10px;
    }


}


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


.image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 300;
}

.image-overlay img {
    width: 50%;
    max-width: 500px;
    height: auto;
}

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

    .image-overlay img {
        width: 40%;
    }

}


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

    .image-overlay {
        bottom: 10px;
    }

    .image-overlay img {
        width: 40%;
    }

}