/* ----------------------------------------------------------------------------------------------
Website Neugestaltung www.stoecklin.ch / 2018 / ©by Stöcklin Reisen AG / erstellt von Tourdata AG
------------------------------------------------------------------------------------------------- */


/* ~~ Allgemein ~~ */

#Mitte .LoadingShadowModal {
    background: rgba(0, 93, 168, 0.3) none repeat scroll 0 0;
    background-color: #00aaff;
    height: 100%;
    left: 0;
    opacity: 0.3;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#Mitte #DestinationenHome .destination{
    display: flex;
    flex-wrap: wrap;
}

    #Mitte #DestinationenHome .destination .destination-item{
        padding: 15px;
    }


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

    #Mitte #DestinationenHome .destination .destination-item1 {
        width: 35%;
    }

    #Mitte #DestinationenHome .destination .destination-item2 {
        padding-top: 30px;
        width: 65%;
    }
}

    #Mitte .Loading {
        margin-top: -20px;
        position: fixed;
        top: calc(50% - 25px);
        left: calc(50% - 100px);
        width: 200px;
        background-color: #F7F7F7;
        border: 1px solid #bbb;
        padding: 15px 0;
        border-radius: 0;
        z-index: 1001;
    }

    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 16px;
        letter-spacing: 0.025em;
        background-color: #dcdcdc;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #005da8;
        height: 100%;
    }

    ul, ol, dl {
        padding: 0;
        margin: 0;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
        color: #000;
        /*color: #005da8;*/
    }

    .blau {
        color: #005da8;
    }

    p {
        color: #000;
    }

    a img {
        border: none;
    }

    a:link {
        text-decoration: none;
        color: #005da8;
    }

    a:visited {
    }

    a:hover {
        text-decoration: none;
        color: #005da8;
    }

    a:active, a:focus {
        text-decoration: none;
        color: #005da8;
    }

    /* ~~ Verschiedene float/clear-Klassen ~~ */
    .fltrt {
        float: right;
        margin-left: 8px;
    }

    .fltlft {
        float: left;
        margin-right: 8px;
    }

    .clearfloat {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }

    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        position: relative;
        min-height: 1px;
        padding-right: 0;
        padding-left: 10px;
    }

    /* ~~ Überschriften ~~ */

    /* --------------------------------------------------------------------------------
  Formular
-------------------------------------------------------------------------------- */
    input, textarea {
        background-color: white;
        border: 1px solid #bbb;
        box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        padding: 5px;
        margin: 0 auto 5px auto;
        width: 50%;
    }

    select {
        background-color: white;
        border: 1px solid #bbb;
        box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        float: left;
        margin-right: 5%;
        max-width: 100%;
        padding: 5px;
        text-overflow: ellipsis;
        width: 35%;
    }

    fieldset label {
        width: 190px;
        display: inline-block;
        font-weight: normal;
        margin-left: -5px;
    }

    fieldset .Frage {
        width: 100%;
        display: block;
        margin: 15px auto 125px;
    }

        fieldset .Frage label {
            width: 100%;
            margin-bottom: 35px;
        }

        fieldset .Frage span {
            width: 30%;
            display: block;
            float: left;
            max-width: 130px;
            text-align: center;
        }

            fieldset .Frage span:nth-child(2) {
                margin-left: 190px;
            }

        fieldset .Frage input.beurteilungbox {
            width: 100%;
        }

    fieldset span.AbstandRe {
        margin-left: 185px;
    }

    fieldset input.TextKlein {
        width: 110px;
    }

    fieldset input.TextMittel {
        width: 195px;
    }

    fieldset input[type="submit"] {
        background-color: #005da8 !important;
        color: #fff;
    }

    input.checkbox1 {
        width: auto;
    }

    fieldset {
        border: none;
    }

    .BoxInhaltNewsletter .name-input {
        float: left;
        width: 60%;
    }

    .BoxInhaltNewsletter .email-input {
        float: left;
        margin-right: 5%;
        width: 60%;
    }

    input[type="button"] {
        float: left;
        width: 35%;
    }

    input[type="button"] {
        background-color: #bbb;
        border: 1px solid #bbb;
        box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        color: #FFF;
    }

    /* ~~ Buttons ~~ */
    a.btn {
        /*-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);*/
        background-color: #ffffff;
        background: #ffffff;
        border: 1px solid rgba(000, 093, 168, 0.2);
        display: inline-block;
        cursor: pointer;
        color: #005da8;
        font-family: Arial;
        font-size: 15px;
        padding: 6px 24px;
        text-decoration: none;
        letter-spacing: 0.045em;
        /*text-shadow: 0px 1px 0px #ffffff;*/
        width: auto;
        -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
        box-shadow: 0px 1px 3px rgba(000,000,000,0.1), inset 0px 0px 1px rgba(255,255,255,0.3);
    }

        a.btn:hover {
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
        background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);*/
            background-color: #005da8;
            background: #005da8;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        a.btn:active {
            position: relative;
            top: 1px;
        }


    /* Gästefragebogen */
    .Abstand {
        margin: 15px auto;
    }

    #Feedback_Formular {
        width: 100%;
        max-width: 100%;
        margin: 1em 0;
        text-align: left;
        padding: 0 1em;
    }

    .DIV_Fragen {
        width: 100%;
    }

    .FrageFragebogen {
        width: 100%;
        line-height: 2.3em;
        display: inline-block;
    }

        .FrageFragebogen input[type=checkbox] {
            height: 18px;
            width: 18px;
            box-shadow: none;
        }

        .FrageFragebogen .Frage {
            display: block;
            font-size: 15px;
            line-height: normal;
        }

            .FrageFragebogen .Frage .frageDetail {
                display: block;
                width: 100%;
                margin: 10px 0;
            }

    .Empfehlung span {
        float: left;
        width: 30px;
        text-align: center;
    }

    .FrageFragebogen span.fragefirst {
        width: 35%;
        display: block;
        font-weight: 600;
        float: left;
        line-height: 2.3em;
    }

    .FrageFragebogen .Frage .frageDetail .beurteilung {
        width: 65%;
        display: inline-block;
        line-height: 2.3em;
    }

        .FrageFragebogen .Frage .frageDetail .beurteilung b {
            width: calc(100% / 4);
            display: inline-block;
            text-align: center;
            font-size: 13px;
        }

    .FrageFragebogen .Frage .frageDetail label {
        width: 35%;
        display: inline-block;
        font-weight: normal;
        font-size: 14px;
        float: left;
        clear: both;
    }

    .FrageFragebogen .Frage .frageDetail span.frageBeurteilung {
        width: 65%;
        display: inline-block;
    }

    .FrageFragebogen .Frage .frageDetail .frageBeurteilung span {
        width: calc(100% / 4 - 5px);
        display: inline-block;
        text-align: center;
    }

    .FrageFragebogen label {
        width: 70%;
        display: inline-block;
    }

    .fragebogen fieldset label {
        width: 220px;
        display: inline-block;
        font-weight: normal;
        margin-left: -5px;
    }

    .fragebogen .FrageFragebogen > label {
        width: 100%;
        border-bottom: 1px solid #000;
    }

    .FrageFragebogen span.Smiley {
        width: 30%;
        display: inline-block;
        float: right;
        /*text-align: right;*/
        padding: 7px 0 0 3px;
    }

        .FrageFragebogen span.Smiley b {
            width: 25px;
            display: inline-block;
            text-align: center;
        }

    .FrageFragebogen .frageDetail span.frageBeurteilung {
        width: 20%;
    }

    .FrageFragebogen .frageDetail input.beurteilungbox {
        /*width: calc(100% / 4 - 5px);*/
        display: inline-block;
    }

    .FrageFragebogen span.individuell {
        width: 100%;
        display: inline-block;
    }

    .FrageFragebogen span.punkte {
        line-height: normal;
        width: 30%;
        display: inline-block;
    }

        .FrageFragebogen span.punkte.gross {
            line-height: normal;
            width: 60%;
            display: inline-block;
        }

        .FrageFragebogen span.punkte input {
            width: 25px;
            display: inline-block;
        }

        .FrageFragebogen span.punkte.gross input:last-child {
            width: 40%;
            display: inline-block;
        }

    .FrageFragebogen span.individuell input[type=text] {
        width: 100%;
        margin-left: 0;
        background-color: white;
        border: 1px solid rgb(216, 222, 228);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(255, 255, 255, 0.3) inset;
    }

    .fragebogen #Feedback_Formular {
        width: 100%;
        max-width: 100%;
        margin: 1em 0;
        text-align: left;
        padding: 0;
    }
    /*--*/

    /* ~~ Navigation oben ~~ */
    #nav-menue {
        margin: 0 auto;
        position: relative;
        z-index: 500;
        padding-right: 0;
        background-color: #dcdcdc;
    }

    .menue-button {
        display: block;
        position: absolute;
        right: 5px;
        top: 0;
        padding: 0.5em;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }

        .menue-button img {
            height: 2em;
        }

    #nav-menue:target #Steuerung {
        display: block;
    }

    #nav-menue:target .menue-button-beschr-open {
        display: none;
    }

    header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 500;
        padding-left: 0 !important;
    }

    #Steuerung {
        float: left;
        width: 100%;
        display: none;
        margin: 65px 0 0;
        background-color: #dcdcdc;
    }

        #Steuerung ul {
            width: 100%;
            margin: 0;
            padding: 0;
            float: left;
            text-align: left;
        }

        #Steuerung li {
            font-weight: bold;
            color: #005da8;
            width: 100%;
            margin: 0;
            padding: 0;
            height: 100%;
            text-align: left;
            position: relative;
            border-bottom: none;
            float: left;
            line-height: 2em;
        }

            #Steuerung li ul li {
                font-weight: normal;
            }



            #Steuerung li a {
                text-decoration: none;
                color: #005da8;
                width: 100%;
            }

    /* ~~ Layout ~~ */
    #Wrapper {
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;
    }

    #Container {
        width: 98%;
        max-width: 1800px;
        height: 100%;
        margin: 0 0 15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        float: none;
        padding-left: 0;
    }

    #SpalteLogo {
        text-align: right;
        position: relative;
        display: block;
        left: 0;
        height: 65px;
        width: auto;
        /*border: 1px solid blue;*/
        z-index: 999;
        background-color: #dcdcdc;
    }

    .spalteLogoBox {
        position: absolute;
        min-width: 300px;
        /*! border: 1px solid red; */
    }

    .spalteLogoInhalt {
        position: relative;
        width: 100%;
        padding-right: 15px;
    }

    #SpalteLogo .logo {
        width: auto;
    }

    #SpalteLogo .infoAktuell {
        text-align: left;
        color: #005da8;
        font-weight: 600;
        margin-right: 10px;
        margin-left: 10px;
        position: relative;
        top: 135px;
        z-index: 999;
        display: none;
    }

        #SpalteLogo .infoAktuell a {
            color: #fff;
        }

    #SpalteLogo .adresse,
    #SpalteLogo .busse {
        width: 100%;
        display: none;
    }

    #SpalteLogo .adresse {
        text-align: right;
        margin: 25px 0 67px;
        color: #000;
    }

        #SpalteLogo .adresse span {
            width: 100%;
            display: inline-block;
        }

            #SpalteLogo .adresse span a {
                color: inherit;
            }

        #SpalteLogo .adresse .telefon,
        #SpalteLogo .adresse .telefon a:hover {
            margin-top: 5px;
            font-weight: bold;
            text-decoration: none;
            color: #000;
        }

            #SpalteLogo .adresse .telefon a {
                color: #000;
            }

    #SpalteLogo .logo {
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 555;
    }

        #SpalteLogo .logo img {
            height: 65px;
            position: relative;
            width: auto;
            left: 0;
            top: -10px;
        }

    #SpalteLogo .busse img {
        width: 95%;
        height: auto;
        margin-left: -15px;
    }

    #Container #SpalteLogo .destinationHomeInfo {
        text-align: left;
        position: relative;
        top: 486px;
        left: 0;
        right: 100%;
        font-size: 100%;
        color: #000;
        display: none;
        width: 100%;
    }

    #Footer {
        width: 100%;
        height: auto;
        padding: 35px 0;
        background-color: #8d8d8d;
        margin-top: 2.5cm;
        box-sizing: border-box;
    }

        #Footer .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0;
            display: block;
            text-align: left;
            color: #f2f2f2;
        }

            #Footer .container > span {
                width: 100%;
                padding: 0 0 35px 15px;
                display: block;
                text-align: left;
            }

            #Footer .container div {
                width: 90%;
                max-width: 90%;
                float: left;
                padding: 5px 15px 15px;
                box-sizing: border-box;
                border-right: none;
                border-bottom: 1px solid #f2f2f2;
                margin: 0 5% 15px;
            }

            #Footer .container .datenschutz{
                margin: 0 auto;
                text-align: center;
                width: 100%;
                max-width: none;
                margin-top: 10px;
            }
            #Footer .container .datenschutz a {
                color: #337ab7 !important;
                margin: 0 10px;
                font-weight: bold;
            }

            #Footer .container div a {
                color: #f2f2f2 !important;
            }

                #Footer .container div:last-child {
                    border: 0;
                }

            #Footer .container .mitgliedname, #Footer .container .mitgliedart {
                width: 100%;
                display: inline-block;
            }

            #Footer .container span[class*='mitgliedlogo'] {
                height: 85px;
                width: 100%;
                display: inline-block;
            }

                #Footer .container span[class*='mitgliedlogo'] img {
                    height: 100%;
                    width: auto;
                }

            #Footer .container .mitgliedlogo4 img {
                height: 55px !important;
                width: auto;
                margin-top: 15px;
            }

    #Mitte {
        width: 100%;
        max-width: 1300px;
        position: relative;
        box-sizing: border-box;
        margin: 0;
        padding: 0 0 15px 0;
        top: 65px;
    }

        #Mitte .infoKeineAngebote {
            text-align: left;
            width: 100%;
            margin-left: 135px;
            margin-bottom: 210px;
            display: block;
        }

        #Mitte .mitteinhalt {
            width: 100%;
            height: 100%;
            background-color: #fff;
            padding-bottom: 15px;
            margin-top: -3px;
            margin-bottom: 45px;
        }

        #Mitte #BildHome,
        #Mitte #BildDestination.abano-montegrotto,
        #Mitte #BildDestination.bad-woerishofen,
        #Mitte #BildDestination.bad-woerishofen-inforeisen,
        #Mitte #BildDestination.schwarzwald,
        #Mitte #BildDestination.abano-montegrotto-inforeisen,
        #Mitte #BildDestination.bad-woerishofen-festtagsreisen,
        #Mitte #BildDestination.abano-montegrotto-festtagsreisen,
        #Mitte #BildDestination.montecatini,
        #Mitte #BildDestination.ischia,
        #Mitte #BildDestination.geschenkgutschein,
        #Mitte #BildDestination.katalogbestellung,
        #Mitte #BildDestination.kontakt,
        #Mitte #BildDestination.firmenportrait,
        #Mitte #BildDestination.auftragsfahrten,
        #Mitte #BildDestination.feedback,
        #Mitte #AllgemeinBild {
            width: 100%;
            display: inline-block;
            position: relative;
            top: 10px;
            background-repeat: no-repeat;
            -moz-background-size: cover; /* Firefox */
            -webkit-background-size: cover; /* Safari, Chrome */
            background-size: cover; /* Opera, IE, W3C Standard */
            background-position: center;
            /*! background-color: #dcdcdc; */
        }

        #Mitte #BildDestination.geschenkgutschein,
        #Mitte #BildDestination.kontakt,
        #Mitte #BildDestination.firmenportrait,
        #Mitte #BildDestination.auftragsfahrten,
        #Mitte #BildDestination.feedback {
            background-size: contain;
        }

        #Mitte #BildDestination.geschenkgutschein,
        #Mitte #BildDestination.kontakt,
        #Mitte #BildDestination.katalogbestellung,
        #Mitte #BildDestination.auftragsfahrten,
        #Mitte #BildDestination.abano-montegrotto-inforeisen,
        #Mitte #BildDestination.abano-montegrotto-festtagsreisen,
        #Mitte #BildDestination.bad-woerishofen-inforeisen,
        #Mitte #BildDestination.schwarzwald,
        #Mitte #BildDestination.bad-woerishofen-festtagsreisen {
            margin: 0 auto 55px auto;
        }

    #BildDestination.firmenportrait {
        margin: 0 auto 5px auto !important;
    }

    #Mitte #BildDestination.abano-montegrotto,
    #Mitte #BildDestination.bad-woerishofen,
    #Mitte #BildDestination.montecatini,
    #Mitte #BildDestination.ischia {
        margin: 0 auto 85px auto;
    }

    #Mitte #BildHome {
        background-image: url('../banner/bg-bild-home_ALT.jpg');
        margin: 15px auto;
    }

    #Mitte #BildDestination.geschenkgutschein {
        background-image: url('../banner/gutschein-banner.jpg');
    }

    #Mitte #BildDestination.kontakt {
        background-image: url('../banner/kontakt-banner.jpg');
    }

    #Mitte #BildDestination.katalogbestellung {
        background-image: url('../banner/katalogbestellung-banner.jpg');
    }

    #Mitte #BildDestination.firmenportrait {
        background-image: url('../banner/firmenportrait-banner.png');
    }

    #Mitte #BildDestination.firmengeschichte {
        background-image: url('../banner/firmengeschichte-banner.png');
    }

    #Mitte #BildDestination.unserteam {
        background-image: url('../banner/unserteam-banner.png');
    }

    #Mitte #BildDestination.mitgliedschaften {
        background-image: url('../banner/mitgliedschaften-banner.png');
    }

    #Mitte #BildDestination.auftragsfahrten {
        background-image: url('../banner/auftragsfahrten-banner.png');
        background-size: cover;
    }

    #Mitte #BildDestination.busflotte {
        background-image: url('../banner/busflotte-banner.png');
    }

    #Mitte #BildDestination.feedback {
        background-image: url('../banner/feedback-banner.png');
        margin: 0 auto;
    }

    #Mitte #BildDestination.fehlerseite {
        background-image: url('../banner/fehlerseite-banner.png');
    }

    #Mitte #BildDestination.abano-montegrotto {
        background-image: url('../banner/destination-abano-montegrotto.jpg');
    }

    #Mitte #BildDestination.abano-montegrotto-inforeisen {
        background-image: url('../banner/destination-abano-montegrotto-info.png');
    }

    #Mitte #BildDestination.abano-montegrotto-festtagsreisen {
        background-image: url('../banner/destination-festtagsreise-abanoMontegrotto.png');
    }

    #Mitte #BildDestination.bad-woerishofen {
        background-image: url('../banner/destination-bad-woerishofen.png');
    }

    #Mitte #BildDestination.bad-woerishofen-inforeisen {
        background-image: url('../banner/destination-bad-woerishofen-info.png');
    }

    #Mitte #BildDestination.schwarzwald {
        background-image: url('../banner/destination-schwarzwald.png');
    }

    #Mitte #BildDestination.bad-woerishofen-festtagsreisen {
        background-image: url('../banner/destination-festtagsreise-bad-woerishofen.png');
    }

    #Mitte #BildDestination.montecatini {
        background-image: url('../banner/destination-montecatini.png');
    }

    #Mitte #BildDestination.ischia {
        background-image: url('../banner/destination-ischia.png');
    }

    #Mitte #AllgemeinBild {
        background-image: url('../banner/abholdienst-banner-bild.jpg');
        margin: 15px auto;
    }

    #Mitte #BildHome::after {
        padding-top: 55%; /* alt 60.285% */
        display: block;
        content: '';
    }

    #Mitte #BildDestination.geschenkgutschein::after,
    #Mitte #BildDestination.kontakt::after,
    #Mitte #BildDestination.firmenportrait::after,
    #Mitte #BildDestination.auftragsfahrten::after,
    #Mitte #BildDestination.feedback::after,
    #Mitte #BildDestination.katalogbestellung::after {
        padding-top: 40%; /* alt 60.285% */
        display: block;
        content: '';
    }

    #Mitte #BildDestination::after,
    #Mitte #AllgemeinBild:after {
        padding-top: 30%; /* alt 41.7% */
        display: block;
        content: '';
    }

    #Mitte #BildDestination.bad-woerishofen::after,
    #Mitte #BildDestination.bad-woerishofen-inforeisen::after,
    #Mitte #BildDestination.bad-woerishofen-festtagsreisen::after,
    #Mitte #BildDestination.schwarzwald::after {
        padding-top: 40%; /* alt 60.285% */
        display: block;
        content: '';
    }

    #Mitte #BildHome .headerbalken img,
    #Mitte #BildDestination .headerbalken img,
    #Mitte #AllgemeinBild .headerbalken img {
        width: 100%;
        height: auto;
    }

    #Mitte #BildHome .headerbalken,
    #Mitte #BildDestination .headerbalken,
    #Mitte #AllgemeinBild .headerbalken {
        position: absolute;
        top: 25px;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        margin-top: -8%;
    }

    .headerbalken div.stickerBox {
        display: none;
        margin-top: -23px;
    }

        .headerbalken div.stickerBox .button {
            border: none;
            background-color: transparent;
        }

    .abano-montegrotto-festtagsreisen .headerbalken div.stickerBox .button,
    .bad-woerishofen-festtagsreisen .headerbalken div.stickerBox .button {
        background-color: transparent;
        position: absolute;
        z-index: 100;
        width: 200px;
        right: 95px;
        top: 15px;
    }

    .headerbalken .sticker {
        display: none;
        position: absolute;
        right: 15%;
        top: 2%;
        width: 250px;
    }

    #Mitte #BildHome h2,
    #Mitte #BildDestination h2,
    #Mitte #AllgemeinBild h2 {
        position: absolute;
        top: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background-color: #ffffff;
        font-weight: 600;
        padding-top: 5px;
    }

    #Mitte #BildDestination + h2,
    #Mitte #AllgemeinBild h2 {
        text-align: center;
        background-color: #ffffff;
        font-weight: 600;
        padding-top: 5px;
    }

    #Mitte #BildHome h2 {
        color: #005da8;
        font-size: 100%;
        height: 45px;
    }

    /*#BildHome h2::after {
    content: url("../images/ButtonInfo.png");
    display: none;
    position: absolute;
    right: 5px;
    z-index: 999;
    bottom: 75px;
}*/
    #BildHome .buttonInfo {
        display: none;
    }

        #BildHome .buttonInfo .button {
            background-color: transparent;
            border: none;
        }

    #BildHome h2.modal-title::after {
        content: '';
        display: none;
    }


    #Mitte #BildDestination h2,
    #Mitte #BildDestination + h2,
    #Mitte #AllgemeinBild h2 {
        color: #000;
        font-size: 100%;
        height: 45px;
        text-align: center;
    }

    #Mitte #BildDestination h2,
    #Mitte #BildDestination + h2 {
        margin-left: 2.5%;
        text-align: left;
        width: calc(100% - 25%);
    }


        #Mitte #BildDestination h2 span {
            font-size: 90%;
            padding-top: 5px;
            display: block;
        }

    #Mitte #BildDestination .bt-zurueck {
        display: inline-block;
        position: absolute;
        right: 15px;
        bottom: -15px;
    }

    #Mitte .bt-zurueck2 {
        display: inline-block;
        position: absolute;
        right: 15px;
        bottom: 75px;
    }

        #Mitte #BildDestination .bt-zurueck li,
        #Mitte .bt-zurueck2 li {
            list-style-type: none;
        }

    #Mitte #DestinationenHome {
        width: 100%;
        height: auto;
        position: relative;
        top: 25px;
    }

    #Mitte #DestinationenHome2 {
        width: 100%;
        height: auto;
        position: relative;
        top: 25px;
    }

    #Mitte #Destination {
        width: 100%;
        /*width: calc(75% - 10px);*/
        text-align: left;
        float: left;
        position: relative;
    }

    #Mitte .destnavi1,
    #Mitte .destnavireisen,
    #Mitte .hotnavizurueck,
    #Mitte .hotnavizurueck2 {
        width: calc(25% - 10px);
        float: right;
        text-align: left;
        margin-top: 15px;
    }

    #Mitte #Destination .hotnavizurueck {
        margin-top: 0;
    }

    #Mitte .destnavireisen {
        padding-left: 10px;
        padding-top: 20px;
        float: left;
        width: 95%;
    }

    #Mitte .destnavi1 {
        display: none;
    }

    #Mitte .hotnavizurueck {
        margin-top: 0;
        position: absolute;
        right: 0;
        /*padding-left: 10px;*/
    }

    #Mitte .destnavi1 + .hotnavizurueck {
        margin-top: 0;
        position: relative;
        top: 5px;
        width: 45%;
        right: 0;
        float: left;
        left: 10px;
    }


    #Mitte .hotnavizurueck2 {
        position: absolute;
        bottom: 55px;
        right: 0;
    }



    #Mitte #Destination .destbilderbox {
        display: flex;
        width: calc(100% + 15px);
        height: 100%;
    }

        #Mitte #Destination .destbilderbox .slider.hotel.empty::before {
            content: 'Es sind noch keine Bilder geladen';
            display: block;
            visibility: visible;
            position: absolute;
            top: 0;
        }

    #Mitte #Destination .destbilder,
    #Mitte #Destination .destbeschreibung {
        flex-basis: 95%;
        width: 95%;
        margin-left: 2.5%;
    }

        #Mitte #Destination .destbeschreibung.infotext,
        #Mitte #InhaltAllgemein .inhalt {
            flex-basis: 95%;
            width: 95%;
            margin-left: 2.5%;
            text-align: left;
        }

    #Mitte .firmenportrait + #InhaltAllgemein .inhalt {
        text-align: center !important;
    }

        #Mitte .firmenportrait + #InhaltAllgemein .inhalt p {
            text-align: left;
        }

        #Mitte .firmenportrait + #InhaltAllgemein .inhalt.team,
        #Mitte .firmenportrait + #InhaltAllgemein .inhalt.flotte,
        #Mitte .firmenportrait + #InhaltAllgemein .inhalt.mitgliedschaften {
            text-align: left !important;
        }

    #Mitte #InhaltAllgemein {
        /*margin-top: 15px;*/
        color: #000;
    }

        #Mitte #InhaltAllgemein .inhalt .bildText {
            display: inline-block;
            width: 95%;
            text-align: left;
            margin: 10px;
            font-size: 80%;
            font-style: italic;
        }

        #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox ~ br {
            display: none;
        }

        #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText {
            display: block;
            width: 90%;
            text-align: left;
            margin: auto 3% 25px;
            font-size: 80%;
            font-style: italic;
            float: left;
        }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText.iframe .bild {
                height: 180px;
                position: relative;
                border: none;
                display: inline-block;
                margin-bottom: 18px;
                overflow: hidden;
                border-bottom: 1px solid #000;
            }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText.iframe span iframe {
                border: 0px;
                position: absolute;
                bottom: -18px;
                right: 0;
            }


        #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox {
            text-align: center;
            width: 100%;
        }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText:first-child {
                text-align: left;
            }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText span.bild {
                width: 200px;
                border: 1px solid #cdcdcd;
                height: 180px;
                text-align: center;
                display: inline-block;
            }

                #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText span.bild img {
                    width: 75%;
                    margin: auto;
                }

        #Mitte #InhaltAllgemein .inhalt.flotte .bildText2 {
            width: 45%;
            float: left;
            font-size: 80%;
            margin-right: 30px;
            font-style: italic;
            text-align: left;
        }

        #Mitte #InhaltAllgemein .inhalt.flotte .bildText1 {
            width: 100%;
            text-align: left;
            font-size: 80%;
            font-style: italic;
        }

            #Mitte #InhaltAllgemein .inhalt.flotte .bildText1 div {
                width: 50%;
                margin: 0 auto;
            }

            #Mitte #InhaltAllgemein .inhalt.flotte .bildText1 img,
            #Mitte #InhaltAllgemein .inhalt.flotte .bildText2 img {
                width: 100%;
                height: auto;
            }

        #Mitte #InhaltAllgemein .inhalt .bildText img {
            display: block;
            margin: 0 auto;
            height: auto;
            max-height: 205px;
        }

        #Mitte #InhaltAllgemein .inhalt .bildTextTeam4 img,
        #Mitte #InhaltAllgemein .inhalt .bildTextTeam5 img {
            width: 70%;
            margin-bottom: 10px;
        }

        #Mitte #InhaltAllgemein .inhalt .bildTextTeam4 {
            width: calc(100% / 2);
            float: left;
            text-align: left;
            font-size: 70%;
        }

            #Mitte #InhaltAllgemein .inhalt .bildTextTeam4.leer {
                display: none;
            }

        #Mitte #InhaltAllgemein .inhalt .bildTextTeam5 {
            width: calc(100% / 2);
            float: left;
            text-align: left;
            font-size: 70%;
        }

    #Mitte #BildDestination.feedback + #InhaltAllgemein .buchungsabschlussFeedback {
        padding-top: 45px;
        border-top: 1px solid #ccc;
    }

    #Mitte #BildDestination.feedback + #InhaltAllgemein {
        margin-top: 35px;
    }

        #Mitte #BildDestination.feedback + #InhaltAllgemein .buchungsabschlussFeedback + form fieldset {
            border: none;
            width: 90%;
            display: block;
            margin: 0 auto;
        }

    #Mitte #Destination .destbilder {
        float: left;
    }

    #Mitte #Destination .destbeschreibung {
        margin-top: 55px;
        color: #000;
        float: left;
    }






        #Mitte #Destination .destbeschreibung.dest {
            margin-top: 45px;
        }

            #Mitte #Destination .destbeschreibung.dest strong.empty {
                visibility: hidden;
            }

            #Mitte #Destination .destbeschreibung.dest li {
                margin-left: 25px;
            }

            #Mitte #HotelsDatum span.datumselect select,
            #Mitte #Destination .destbeschreibung.dest select {
                border: 2px solid #ceecf5;
                display: block;
                padding: 8px;
                width: 200px;
                text-align: left;
                float: left;
                background-color: #fff !important;
            }

            #Mitte #HotelsDatum span.datumselect select,
            #Mitte #Destination .destbeschreibung.dest select {
                -webkit-appearance: none; /* Pfeil abschalten */
                -moz-appearance: none; /* Pfeil abschalten */
                appearance: none; /* Pfeil abschalten */
                /* ---*/
                border: 2px solid #ceecf5;
                display: block;
                width: auto;
                text-align: left;
                float: left;
                background-color: #fff !important;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
                background-color: white;
                background-image: url('https://buchen.stoecklin-reisen.ch/tournet/_daten/sr/img/select-arrow.png');
                background-position: right;
                background-repeat: no-repeat;
                padding-right: 35px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

                #Mitte #HotelsDatum span.datumselect select::-ms-expand,
                #Mitte #Destination .destbeschreibung.dest select::-ms-expand {
                    display: none;
                }

            #Mitte #HotelsDatum span.datumselect,
            #Mitte #Destination .destbeschreibung.dest span.datumselect {
                width: 100%;
                display: inline-block;
                height: auto;
            }

    #Mitte #HotelsDatum span.datumselect {
        margin-left: 12px;
    }

    #Mitte #Destination .destbeschreibung.dest + .destnavireisen {
        position: relative;
        top: 90px;
    }

        #Mitte #Destination .destbeschreibung.dest + .destnavireisen.empty {
            visibility: hidden;
        }

    #Mitte #Destination .destbeschreibung.dest .beschreibungDatum {
        width: 175px;
        display: block;
        padding-right: 10px;
        float: left;
    }

    #Mitte #Destination .destbeschreibung.dest .beschreibungText {
        width: calc(100% - 180px);
        display: inline-block;
    }

    #Mitte #Destination .destbeschreibung h3 {
        font-size: 22px;
        font-weight: 600;
    }

    #Mitte #Destination .destbeschreibung p {
        /*text-align: justify;
        hyphens: auto;*/
    }

    #Mitte #Destination .destbeschreibung a:link {
        font-weight: 600;
    }

    #Mitte #Destination .destbeschreibung .Grundtext-fett:first-child {
        font-weight: 600;
    }

    #Mitte #Destination .destbeschreibung .destInfoBild {
        width: 40%;
        display: block;
        float: left;
        margin: auto 25px 25px auto;
        font-style: italic;
    }

        #Mitte #Destination .destbeschreibung .destInfoBild img {
            width: 100%;
            height: auto;
        }

    #Mitte #Destination .destkarte {
        display: none;
    }


    #Mitte #Destination .slider.dest .destkarte {
        height: calc(100% - 10px);
    }


    #Mitte #Destination .sliderthumbs {
        margin-top: 10px;
    }

    #Mitte #Destination .destkarte img {
        height: 100%;
        width: auto;
        margin-left: -50%;
    }

    #Mitte #Destination .destkarte img {
        height: 100%;
        width: auto;
        overflow: hidden;
    }

    #Mitte #DestinationBeschreibung,
    #Mitte #HotelBeschreibung,
    #Mitte #AllgemeinBeschreibung {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        position: relative;
        top: 70px;
        padding: 15px 0 75px;
        box-sizing: border-box;
        background-color: #fff;
        text-align: left;
    }

        #Mitte #DestinationBeschreibung .destinationbilder {
            flex-basis: 75%;
        }

            #Mitte #DestinationBeschreibung .destinationbilder img,
            #Mitte #DestinationBeschreibung .destinationkarte img {
                width: 100%;
            }

        #Mitte #DestinationBeschreibung .destinationbeschreibung {
            flex-basis: 60%;
            padding: 0 15px;
        }

    #Mitte .destinationnavi {
        flex-basis: 25%;
        width: calc(100% / 4);
    }

    #Mitte #DestinationenHome a,
    #Mitte #DestinationenHome2 a {
        width: 100%;
        height: auto;
        display: block;
        text-align: left;
        margin: 12px auto;
        color: #000;
        background-color: rgba(255,255,255,1);
        padding: 15px 15px 0;
    }

    #Mitte #DestinationenHome .destination img,
    #Mitte #DestinationenHome2 .destination img {
        width: 100%;
    }

    #Mitte #DestinationenHome .destination h3,
    #Mitte #DestinationenHome2 .destination h3 {
        font-size: 100%;
        margin: 10px auto;
        font-weight: 700;
        color: #000;
    }


    #Mitte #DestinationenHome .destination span,
    #Mitte #DestinationenHome2 .destination span {
        font-size: 100%;
        margin: 5px 5px;
        display: block;
        padding-bottom: 10px;
        color: #000;
    }

        #Mitte #DestinationenHome .destination span a,
        #Mitte #DestinationenHome2 .destination span a {
            color: #005da8;
        }

    #TopNavigation {
        padding-left: 10px;
        background-color: transparent;
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
    }

    #SpalteNavigation {
        margin-top: 15px;
        display: none;
    }

        /* kleiner schwarer Pfeil einfügen */
        #SpalteNavigation div.spalteNavigationInfo ul:after {
            border-color: #000 transparent transparent transparent;
            border-style: solid;
            border-width: 8px;
            content: " ";
            display: block;
            height: 0;
            width: 0;
            left: 0;
            position: absolute;
            bottom: 0;
        }

        #SpalteNavigation div.spalteNavigationInfo ul {
            min-height: 65px;
            position: relative;
        }

        #SpalteNavigation div.spalteNavigationInfo {
            color: #000;
            margin-bottom: -10px;
        }

        #SpalteNavigation div {
            font-size: 100%;
            text-align: left;
            color: #005da8;
            /*border-bottom: 1px solid #005da8;*/
        }

    .spalteNaviBox {
        position: absolute;
    }

    .spalteNaviInhalt {
        position: fixed;
        max-width: 290px;
    }

    #SpalteNavigation div h3,
    #SpalteLogo div h3 {
        font-size: 100%;
        font-weight: 700;
        text-align: left;
        color: #000;
    }

    #SpalteNavigation div li,
    #Mitte .destnavi1 div li,
    #Mitte .destnavireisen div li,
    #Mitte .hotnavizurueck div li,
    #Mitte .hotnavizurueck2 div li {
        text-decoration: none;
        list-style-type: none;
    }

    #Mitte .destnavireisen div li {
        background-color: #005da8;
        padding: 10px;
        margin-bottom: 15px;
        color: #fff;
    }

        #Mitte .destnavireisen div li a {
            color: #fff;
            display: block;
        }

    #Mitte .hotnavizurueck div li,
    #Mitte .hotnavizurueck2 div li,
    /*#Mitte .hotnavizurueck div span,*/
    #Mitte .hotnavizurueck2 div span,
    #Mitte .hotnavizurueck div button.button {
        background-color: #005da8;
        padding: 10px;
        margin-bottom: 15px;
        text-align: center;
        color: #fff;
        width: 85%;
    }

    #Mitte .hotnavizurueck div button.button {
        border: none;
        width: 85%;
    }

    #Mitte .hotnavizurueck div span,
    #Mitte .hotnavizurueck2 div span {
        width: 100%;
        display: block;
    }

    #Mitte .hotnavizurueck div li a,
    #Mitte .hotnavizurueck2 div li a {
        color: #fff;
    }

    #SpalteNavigation div hr,
    #Mitte .destnavi1 hr {
        margin-top: 17px;
        margin-bottom: 17px;
        border: 0;
        border-top: 1px solid #005da8;
    }

    #Mitte .destnavi1 > div,
    #Mitte .destnavireisen div
    /*#Mitte .hotnavizurueck div,
#Mitte .hotnavizurueck2 div*/ {
        width: 100%;
    }

    .destnavi1 div button.button {
        text-align: left;
        background-color: transparent;
        border: none;
        padding: 0;
    }

    .modal-backdrop.in {
        position: relative;
    }

    .destnavi1 .modal,
    .hotnavizurueck .modal,
    .headerbalken .modal,
    .buttonInfo .modal {
        text-align: center;
        background-color: rgba(0, 93, 168, 0.2);
        background: rgba(0, 93, 168, 0.2);
    }

        .destnavi1 .modal .modal-header,
        .hotnavizurueck .modal .modal-header,
        .headerbalken .modal .modal-header,
        .buttonInfo .modal .modal-header {
            min-height: auto;
            padding: 0 0 15px;
            border-bottom: 1px solid #000;
            width: 100%;
            text-align: right;
            display: inline-block;
        }

            .destnavi1 .modal .modal-header h2,
            .hotnavizurueck .modal .modal-header h2,
            .headerbalken .modal .modal-header h2,
            .buttonInfo .modal .modal-header h2 {
                float: left;
            }

            .destnavi1 .modal .modal-header .close,
            .hotnavizurueck .modal .modal-header .close,
            .headerbalken .modal .modal-header .close,
            .buttonInfo .modal .modal-header .close {
                border: 1px solid #000;
                background-color: #fff;
                opacity: 1;
                float: inherit;
                width: 30px;
                height: 30px;
                font-size: 22px;
            }

        .destnavi1 .modal .modal-content,
        .hotnavizurueck .modal .modal-content,
        .headerbalken .modal .modal-content,
        .buttonInfo .modal .modal-content {
            background-color: #ffe165;
            border: none;
            box-shadow: none;
        }

        .destnavi1 .modal .modal-body,
        .hotnavizurueck .modal .modal-body,
        .headerbalken .modal .modal-body,
        .buttonInfo .modal .modal-body {
            padding: 0;
            text-align: left;
        }

            .hotnavizurueck .modal .modal-body img {
                width: 100%;
            }

            .destnavi1 .modal .modal-body ul,
            .headerbalken .modal .modal-body ul,
            .buttonInfo .modal .modal-body ul {
                margin: auto 0 15px 0;
                border-top: none;
            }

            .destnavi1 .modal .modal-body .popup,
            .hotnavizurueck .modal .modal-body .popup,
            .headerbalken .modal .modal-body .popup,
            .buttonInfo .modal .modal-body .popup {
                margin: auto;
                padding: 20px;
                background: #fff;
                background-color: rgb(255, 255, 255);
                border-radius: 5px;
                width: auto;
                height: auto;
                background-color: #ffe165;
                color: #000;
                transition: all 5s ease-in-out;
            }

            .destnavi1 .modal .modal-body .content.liohneAbstand {
                margin-top: auto;
            }

                .destnavi1 .modal .modal-body .content.liohneAbstand ul li {
                    padding-left: 0;
                }

    /* Kalender Datum */
    #Mitte #HotelsDatum {
        width: 100%;
        height: auto;
        display: block;
        top: 35px;
        padding: 15px 15px 55px;
        box-sizing: border-box;
        background-color: #fff;
        text-align: left;
        position: relative;
        /*border-bottom: 1px solid #005ea8;*/
    }

        #Mitte #HotelsDatum .datumHotels {
            width: auto;
            display: inline-block;
            float: right;
            position: absolute;
            top: 17px;
            right: 15px;
        }

        #Mitte #HotelsDatum div.datumHotels a {
            background-color: #ffd500;
            display: block;
            padding: 10px 20px;
        }

        #Mitte #HotelsDatum div.hinreise,
        #Mitte #HotelsDatum div.rueckreise {
            width: auto;
            /*width: calc(100% / 3);*/
            float: left;
            display: none;
        }

        #Mitte #HotelsDatum div.rueckreise {
            margin-left: 35px;
        }

        #Mitte #HotelsDatum div.hinreise select,
        #Mitte #HotelsDatum div.hinreise input {
            border: 2px solid #ceecf5;
            float: left;
            background-color: #fff !important;
        }

        #Mitte #HotelsDatum div.rueckreise select,
        #Mitte #HotelsDatum div.rueckreise input {
            border: 2px solid #f6ced8;
            background-color: #fff !important;
        }

        #Mitte #HotelsDatum div.hinreise select,
        #Mitte #HotelsDatum div.rueckreise select,
        #Mitte #HotelsDatum div.hinreise input,
        #Mitte #HotelsDatum div.rueckreise input {
            display: block;
            padding: 10px;
            width: 200px;
            text-align: left;
        }

            #Mitte #HotelsDatum div.hinreise input[disabled],
            #Mitte #HotelsDatum div.rueckreise input[disabled] {
                background-color: #eee;
            }

        #Mitte #HotelsDatum div.hinreise span,
        #Mitte #HotelsDatum div.rueckreise span {
            float: left;
            margin-right: 15px;
            line-height: 2.5em;
        }

        #Mitte #HotelsDatum div.rueckreise span {
            margin-left: 35px;
        }

        /* wenn keine Angebote vorhanden und die Fehlermeldung eingeblendet wird, dann diese Felder ausblenden */
        #Mitte #HotelsDatum .infoKeineAngebote ~ #Inhalt_DIV_TerminAuswahlKalender,
        #Mitte #HotelsDatum .infoKeineAngebote ~ #Inhalt_DIV_TerminBisAuswahlKalender {
            display: none;
        }

        #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender,
        #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
            margin-top: 25px;
            width: 100%;
            /*width: calc(100% / 3);*/
            padding: 20px;
        }

        #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender {
            position: relative;
            /*left: 85px;*/
            float: left;
            border: 1px solid #CEECF5;
        }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender td[class*=Status] {
                background-color: #CEECF5;
                color: #005da8;
                border: 1px solid #CEECF5;
            }

        #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
            position: relative;
            /*left: 115px;*/
            display: inline-block;
            border: 1px solid #F6CED8;
        }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender td[class*=Status] {
                background-color: #F6CED8;
                border: 1px solid #F6CED8;
            }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender,
            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender {
                width: 100%;
                border: transparent;
                margin-top: 15px;
            }

                #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender table.Titel,
                #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender table.Titel {
                    background-color: #fff;
                    font-weight: 700;
                    height: 45px;
                }

        #Mitte #HotelsDatum table.Calender .NextPrev {
            font-size: 0;
            position: relative;
            height: auto;
            width: auto;
            margin: 0 20px 20px 0;
            border: 1px solid rgba(0,0,0,0.25);
        }

            #Mitte #HotelsDatum table.Calender .NextPrev a {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

            #Mitte #HotelsDatum table.Calender .NextPrev:first-child a {
                height: 0px;
                width: 0px;
                border: 6px solid;
                border-color: lightgray lightgray transparent transparent;
                transform: rotate(-135deg);
            }

            #Mitte #HotelsDatum table.Calender .NextPrev:last-child a {
                height: 0px;
                width: 0px;
                border: 6px solid;
                border-color: lightgray lightgray transparent transparent;
                transform: rotate(45deg);
            }

        #Mitte #HotelsDatum table.Calender th[abbr="Montag"],
        #Mitte #HotelsDatum table.Calender th[abbr="Dienstag"],
        #Mitte #HotelsDatum table.Calender th[abbr="Mittwoch"],
        #Mitte #HotelsDatum table.Calender th[abbr="Donnerstag"],
        #Mitte #HotelsDatum table.Calender th[abbr="Freitag"],
        #Mitte #HotelsDatum table.Calender th[abbr="Samstag"],
        #Mitte #HotelsDatum table.Calender th[abbr="Sonntag"] {
            font-weight: normal;
            font-size: 90%;
            color: #005da8 !important;
        }

        #Mitte #HotelsDatum table.Calender th,
        #Mitte #HotelsDatum table.Calender td {
            text-align: center;
            border: none;
            line-height: 2.75em;
        }

        #Mitte #HotelsDatum table.Calender td {
            border: 1px solid #ededed;
            color: #005da8;
        }

            #Mitte #HotelsDatum table.Calender td a {
                color: #005da8 !important;
            }

                #Mitte #HotelsDatum table.Calender td a:hover {
                    text-decoration: none;
                }

            #Mitte #HotelsDatum table.Calender td.DaySelected {
                background-color: #81F79F !important;
                color: #fff !important;
                border: 1px solid #81F79F !important;
            }

                #Mitte #HotelsDatum table.Calender td.DaySelected a {
                    color: #fff !important;
                }

            #Mitte #HotelsDatum table.Calender td.StatusAusgebucht {
                background-color: red !important;
                border: 1px solid red !important;
                color: #fff !important;
            }

        #Mitte #HotelsDatum table.Calender tbody tr:first-child td {
            border: 1px solid #fff !important;
        }

    #Mitte #Hotels .hotelbox {
        /*flex-basis: 50%;*/
        padding: 10px 15px;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 1px solid #005ea8;
        color: #000;
        display: inline-block;
    }

        #Mitte #Hotels .hotelbox .hotelbild {
            width: 100%;
            float: left;
            height: auto;
            /*display: inline-table;*/
            /*border: 1px solid red;*/
            margin-right: 10px;
        }

            #Mitte #Hotels .hotelbox .hotelbild img {
                width: 100%;
                height: auto;
            }

        #Mitte #Hotels .hotelbox .hotelbeschreibung {
            width: 100%;
            height: auto;
            text-align: left;
            float: none;
        }

        #Mitte #Hotels .hotelbox .hoteldetails {
            line-height: inherit;
        }

        #Mitte #Hotels .hotelbox .hotelbeschreibung strong {
        }

        #Mitte #Hotels .hotelbox .hotelbuttons {
            width: 100%;
            float: none;
            margin-top: 10px;
        }

            #Mitte #Hotels .hotelbox .hotelbuttons a {
                width: 49%;
                text-align: center;
            }

                #Mitte #Hotels .hotelbox .hotelbuttons a.btn.details {
                    margin-left: 0;
                    width: 30%;
                    float: left;
                }

                #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen,
                #Mitte #Hotels .hotelbox .hotelbuttons a.btn.beschreibung {
                    margin-right: 0;
                    width: 45%;
                    float: none;
                    border-radius: 0;
                    background-color: #005da8;
                    border: #005da8;
                    color: #fff;
                }

                #Mitte #Hotels .hotelbox .hotelbuttons a.btn.beschreibung {
                    width: 50%;
                    float: left;
                    margin-right: 10px;
                }

                #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen {
                    width: 45%;
                    float: right;
                }

                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen img {
                        height: 20px;
                        width: auto;
                        margin: -2px 15px 0 -15px;
                    }






    .popup .saisonPreiseInfoText {
        text-align: left;
    }

        .popup .saisonPreiseInfoText ul {
            border: none;
        }

        .popup .saisonPreiseInfoText li {
            text-align: left !important;
            background-color: transparent !important;
            color: #000 !important;
            line-height: normal !important;
            margin: 0 !important;
            padding: 0 !important;
        }

    /* Slider (Destination und Hotel) */

    .slider {
        width: 100%;
        position: relative;
        padding-top: 25px;
        margin: 100px auto 0;
    }

        .slider.hotel {
            margin: 200px auto 0;
        }


        /*Last thing remaining is to add transitions*/
        .slider > img {
            position: absolute;
            right: 10px;
            top: -100px;
            transition: all 0.5s;
            width: calc(100% - 10px);
        }

        .slider.hotel > img {
            width: calc(100% - 10px);
            margin-top: -100px;
            max-height: 515px;
            height: auto;
        }

        .slider input[name='slide_switch'] {
            display: none;
        }

        .slider label {
            padding: 10px 10px 75px 0;
            float: left;
            cursor: pointer;
            transition: all 0.5s;
            opacity: 0.6;
            width: 20%;
            height: auto;
            position: relative;
            top: 115px;
        }

        .slider.hotel label {
            padding: 10px 10px 75px 0;
            float: left;
            cursor: pointer;
            transition: all 0.5s;
            opacity: 0.6;
            width: 20%;
            height: auto;
            position: relative;
            top: 25px;
        }

        .slider.dest label {
            top: 30px;
        }

        .slider label img {
            width: 100%;
            height: auto;
        }

        /*Time to add the click effects*/
        .slider input[name='slide_switch']:checked + label {
            border-color: #666;
            opacity: 1;
        }
        /*Clicking any thumbnail now should change its opacity(style)*/
        /*Time to work on the main images*/
        .slider input[name='slide_switch'] ~ img {
            opacity: 0;
            transform: scale(1);
        }
        /*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
        .slider input[name='slide_switch']:checked + label + img {
            opacity: 1;
            transform: scale(1);
        }

        .slider.hotel input[name="slide_switch"]:checked + label + img {
            width: calc(100% - 10px);
            margin-top: -100px;
        }


    .thumbs {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

        .thumbs li a {
            width: 100%;
            height: auto;
        }

        .thumbs li {
            width: calc(20% - 10px);
            flex-basis: calc(20% - 10px);
            height: auto;
        }

        .thumbs a {
            /*display: block;*/
            position: relative;
            font: bold 12px/25px Arial, sans-serif;
            color: #515151;
            text-decoration: none;
            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.15);
        }

        .thumbs li a img {
            width: 100%;
            height: auto;
        }

    /*.thumbs li a:hover span {
        position: absolute;
        z-index: 101;
        bottom: -30px;
        display: block;
        width: 98px;
        height: 25px;
        text-align: center;
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
        -o-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
        -ms-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
        background: #fff;
        background: -webkit-linear-gradient(top, #fff 0%, #bcbcbc 100%);
        background: -moz-linear-gradient(top, #fff 0%, #bcbcbc 100%);
        background: -o-linear-gradient(top, #fff 0%, #bcbcbc 100%);
        background: -ms-linear-gradient(top, #fff 0%, #bcbcbc 100%);
        background: linear-gradient(top, #fff 0%, #bcbcbc 100%);
    }

        .thumbs li a:hover span::before {
            width: 0;
            height: 0;
            border-bottom: 5px solid white;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            content: "";
            position: absolute;
            top: -5px;
            left: 44px;
        }*/

    .slide {
        overflow: hidden;
        display: flex;
        width: 100%;
        height: auto;
        /*border: 4px solid #E74C3C;*/
    }

    /*.slide,
    .slide li,
    .slide img {
        width: 712px;
        height: 350px;
        position: relative;
    }*/
    .sliderthumbs li {
        list-style-type: none;
    }

    .slide li {
        list-style-type: none;
        /*position: absolute;
            z-index: 50;*/
    }

    /*Animation For Slider*/
    @-webkit-keyframes slider {
        0% {
            /*left: -500px;*/
        }

        100% {
            /*left: 0;*/
        }
    }

    .slide li:target {
        z-index: 100;
        -webkit-animation: slider 1s 1;
    }

    /*Not Target*/
    @-webkit-keyframes noTarget {
        0% {
            z-index: 75;
        }

        100% {
            z-index: 75;
        }
    }

    .slide li:not(:target) {
        -webkit-animation: noTarget 1s 1;
    }


    /* Layout für Mobilgeräte: 481px bis 1080px (SamsungS4, iPhone6Plus) Portrait. */
    @media only screen and (min-width: 481px) and (max-width: 1080px) { /*and (orientation:portrait) {*/

        #SpalteLogo {
            width: auto;
        }

            #SpalteLogo .logo img {
                height: auto;
                position: relative;
                width: auto;
                left: 0;
                top: -10px;
                height: 95px;
            }

        #nav-menue {
            margin: 0 auto;
            height: 70px;
            position: relative;
            z-index: 500;
        }

        #Mitte #DestinationenHome {
            width: calc(100% + 20px);
            height: auto;
            position: relative;
            top: 25px;
            margin-left: -10px;
        }

        #Mitte #DestinationenHome2 {
            width: calc(100% + 20px);
            height: auto;
            position: relative;
            top: 25px;
            margin-left: -10px;
        }

            #Mitte #DestinationenHome a,
            #Mitte #DestinationenHome2 a {
                width: calc(50% - 20px);
                text-align: left;
                margin: 12px 10px;
                color: #000;
                background-color: rgba(255,255,255,1);
                padding: 15px 15px 0;
                float: left;
            }

        .headerbalken div.stickerBox {
            display: none;
        }

        .slider label {
            padding: 10px 10px 295px 0;
            float: left;
            cursor: pointer;
            transition: all 0.5s;
            opacity: 0.6;
            width: 20%;
            height: auto;
            position: relative;
            top: 335px;
        }

        .slider.hotel label {
            padding: 10px 10px 295px 0;
            float: left;
            cursor: pointer;
            transition: all 0.5s;
            opacity: 0.6;
            width: 20%;
            height: auto;
            position: relative;
            top: 285px;
        }

        #Mitte {
            width: 100%; /*max-width: 1300px;*/
            position: relative;
            box-sizing: border-box;
            margin: 0;
            padding: 0 0 15px 0;
        }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender,
            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
                margin-top: 25px;
                width: 48%;
                /*width: calc(100% / 3);*/
                padding: 20px;
            }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
                float: right;
            }

                #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender span,
                #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender span {
                    font-size: 80%;
                }

            #Mitte #Hotels .hotelbox .hotelbild {
                width: 200px;
                float: left;
                height: auto;
                /*display: inline-table;*/
                /*border: 1px solid red;*/
                margin-right: 10px;
            }

            #Mitte #Hotels .hotelbox .hotelbuttons {
                width: 100%;
                float: left;
                margin-top: 10px;
            }

            #Mitte #InhaltAllgemein .inhalt .bildText {
                display: inline-block;
                width: 45%;
                text-align: left;
                margin: 10px;
                font-size: 80%;
                font-style: italic;
            }

        #SpalteLogo .infoAktuell {
            text-align: right;
            color: #005da8;
            font-weight: 600;
            margin-right: -100%;
            margin-left: 25%;
            position: relative;
            top: 155px;
            z-index: 999;
        }

            #SpalteLogo .infoAktuell a {
                color: #ffd500;
            }

        #Footer .container div {
            width: calc(100% / 2);
            float: left;
            padding: 5px 15px 0;
            box-sizing: border-box;
            border: none;
            margin: auto auto 35px;
        }
    }

    /* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
    @media only screen and (min-width: 481px) and (orientation:portrait) {

        #Mitte #Destination .destbeschreibung {
            position: relative;
            z-index: 10;
        }

        #Mitte .destnavireisen {
            width: 300px;
            float: right;
            text-align: left;
            margin-top: 15px;
            position: relative;
            z-index: 10;
        }
        /* Gästefragebogen */
        .FrageFragebogen span.punkte.gross {
            line-height: normal;
            width: 100%;
            display: inline-block;
        }
    }


    /* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
    @media only screen and (min-width: 481px) and (orientation:landscape) {

        .headerbalken div.stickerBox {
            display: block;
            margin-top: -23px;
        }

        .headerbalken .sticker {
            display: inline-block;
            position: absolute;
            right: 10%;
            top: 1%;
            width: 185px;
        }

        #Container #SpalteLogo .destinationHomeInfo {
            text-align: left;
            position: relative;
            top: 486px;
            left: 0;
            right: 100%;
            font-size: 100%;
            color: #000;
            display: none;
            /*display: block;*/
            width: 100%;
        }

        #Mitte {
            max-width: 66%;
        }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox ~ br {
                display: block;
            }

            #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText {
                display: block;
                width: 42%;
                text-align: left;
                margin: auto 3% 15px;
                font-size: 80%;
                font-style: italic;
                float: left;
            }

                #Mitte #InhaltAllgemein .inhalt.mitgliedschaften .bildTextBox .bildText:first-child {
                    text-align: right;
                }

            #Mitte .destnavi1,
            #Mitte .destnavireisen,
            #Mitte .hotnavizurueck,
            #Mitte .hotnavizurueck2 {
                width: calc(25% - 10px);
                float: right;
                text-align: left;
                margin-top: 15px;
            }

        #Footer .container div {
            width: calc(100% / 4);
            float: left;
            padding: 5px 15px 0;
            box-sizing: border-box;
            border-right: 1px solid #f2f2f2;
            border-bottom: none;
        }
    }


    /* Desktoplayout: 769 bis maximal 1675px (vorher 1232).  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
    @media only screen and (min-width: 769px) and (orientation:landscape) {

        /* --------------------------------------------------------------------------------
  Formular
-------------------------------------------------------------------------------- */
        input, textarea {
            background-color: white;
            margin: 0 auto 5px auto;
            width: 400px;
        }

        fieldset.Button input.forms {
            margin: 45px auto auto 215px;
            width: 200px;
        }

        fieldset span.AbstandRe {
            margin-left: 185px;
        }

        /* Gästefragebogen */
        .FrageFragebogen span.individuell {
            width: calc(55% - 125px);
            display: inline-block;
        }

        .FrageFragebogen span.individuell {
            width: calc(55% - 125px);
            display: inline-block;
        }

            .FrageFragebogen span.individuell input[type=text] {
                width: 100%;
                margin-left: 10px;
                background-color: white;
                border: 1px solid rgb(216, 222, 228);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(255, 255, 255, 0.3) inset;
            }

        .FrageFragebogen textarea.TextBeliebig {
            width: calc(100% - 190px);
        }

        .FrageFragebogen span.fragespez {
            width: auto;
            display: inherit;
        }

        .FrageFragebogen label {
            width: 220px;
            display: inline-block;
        }

        .FrageFragebogen span.Smiley {
            width: 135px;
            display: inline-block;
            float: none;
            text-align: left;
            padding: 7px 0 0;
        }
        /*--*/



        /* ~~ Navigation oben ~~ */
        #TopNavigation {
            padding-left: 0;
            background-color: transparent;
            position: absolute;
            /*z-index: 1000;*/
            top: -5px;
            right: 0;
            /*padding-left: 0;
        background-color: #dcdcdc;
        position: fixed;
        z-index: 1000;
        top: 10px;
        right: 10px;*/
            /*! height: 30px !important; */
            /*! border: 1px solid red; */
        }

        #Mitte #TopNavigation #Steuerung {
            display: block;
            text-align: left;
            margin: 0 auto;
            position: relative;
            left: 0;
            float: none;
        }

        #Steuerung {
            margin: 1em 0;
        }

            #Steuerung li {
                font-weight: bold;
                color: #005da8;
                width: calc(100% / 4);
                margin: 0;
                padding: 0;
                height: 100%;
                text-align: left;
                position: relative;
                border-bottom: none;
                float: left;
                line-height: normal;
            }

                #Steuerung li a {
                    text-decoration: none;
                    color: #005da8;
                    width: auto;
                }

                #Steuerung li:first-child {
                    margin-left: 0;
                }

        #Mitte #TopNavigation .menue-button {
            display: none;
        }

        /* --------------------------------------------------------------------------------
    Navigation
-------------------------------------------------------------------------------- */
        .menuspez {
            display: none;
        }

        #Top {
            width: 100%;
            /*background-color: #F4F4F4;*/
            height: 35px;
            z-index: 20;
        }

        #Topnav {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            text-align: right;
            height: 45px;
            display: block;
        }

            #Topnav a {
                text-decoration: none;
            }

            #Topnav span {
                padding: 10px 10px 0 0;
                color: #0069A6;
            }

                #Topnav span img {
                    height: 30px;
                    position: relative;
                    top: 6px;
                }

            /* Suchfeld in der Navigation ganz oben */
            #Topnav form {
                float: right;
                margin: 10px 0 0;
            }

                #Topnav form input {
                    padding: 3px;
                    border: 1px solid #0069A6;
                    width: 220px;
                }

                #Topnav form img {
                    width: 20px;
                    height: auto;
                    position: relative;
                    right: 30px;
                    text-decoration: none;
                }


        #nav-menue {
            /*margin: 65px auto 0 auto;*/
            background-color: transparent;
            /*height: 50px;*/
            width: auto;
            position: relative;
            top: -35px;
            /*opacity: 0.8;
        z-index: 500;*/
        }

        #Steuerung {
            display: block;
            max-width: 1300px;
            text-align: right;
            margin: 0 auto;
            position: relative;
            right: 0;
            float: none;
        }

            #Steuerung ul {
                width: auto;
                margin: 0;
                padding: 0;
            }

            #Steuerung li {
                font-weight: bold;
                width: auto;
                margin: auto 20px;
                text-align: left;
                height: 30px;
                color: #FFF;
                text-align: center;
                position: relative;
                border-bottom: none;
            }

                #Steuerung li:last-child {
                    padding-right: 15px;
                    margin-right: 15px;
                }

            #Steuerung a {
                display: block;
                height: 100%;
                width: 100%;
                text-decoration: none;
            }

                #Steuerung a:hover {
                    text-decoration: none;
                }

            #Steuerung ul ul a:hover {
                width: auto;
            }

            #Steuerung li ul {
                display: none;
                position: absolute;
                top: 25px !important;
                left: 0;
                height: auto;
                width: 190px;
                margin: 0;
                z-index: 200;
                padding: 0;
            }

            #Steuerung ul ul ul li {
                font-weight: normal;
                display: block;
            }

            #Steuerung li ul li {
                border-top: 1px dotted #005da8;
                border-right: 0;
                float: left;
                width: 230px;
                height: 100%;
                padding: 10px;
                text-align: left;
                font-weight: 400;
                margin: 0;
                line-height: normal;
                background-image: none;
                color: #005da8;
                background-color: #fff;
                text-indent: 10px;
            }

                #Steuerung li ul li a,
                #Steuerung li ul li a:hover {
                    color: #0069A6;
                }

                    #Steuerung li ul li ul li,
                    #Steuerung li ul li a:hover {
                        color: #0069A6;
                    }

                #Steuerung li ul li:first-child {
                    border-top: none;
                }

            #Steuerung li:hover ul {
                display: inline-block;
                position: absolute;
                top: 45px;
            }

            #Steuerung li.Reiseangebote ul li:hover ul {
                display: inline-block;
                position: absolute;
                top: 0 !important;
                left: 200px;
                z-index: 200;
            }

        .menue-button {
            display: none;
        }

        /* ~~ Layout ~~ */

        #Wrapper {
            position: absolute;
        }

        #Container {
            width: 100%;
            max-width: 1800px;
            height: 100%;
            margin: 35px auto 15px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
            float: none;
            position: relative;
        }

        #SpalteLogo .infoAktuell,
        #SpalteNavigation .infoAktuell {
            text-align: left;
            color: #005da8;
            padding: 20px 15px;
            margin-right: 0;
            margin-left: 0;
            line-height: 1.2em;
            font-weight: normal;
            position: relative;
            top: 95px;
            z-index: 999;
            display: block;
        }

        #SpalteNavigation .infoAktuell {
            top: 50px
        }

            #SpalteLogo .infoAktuell span,
            #SpalteNavigation .infoAktuell span {
                width: 100%;
                text-align: center;
                display: block;
            }

                #SpalteLogo .infoAktuell span img,
                #SpalteNavigation .infoAktuell span img {
                    width: 150px;
                    transform: rotate(10deg);
                    -moz-box-shadow: 7px 7px 10px 1px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0.3);
                    -webkit-box-shadow: 7px 7px 10px 1px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0.3);
                    box-shadow: 7px 7px 10px 1px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0.3);
                }

        #SpalteNavigation .infoAktuell {
            opacity: 0.4;
        }

            #SpalteNavigation .infoAktuell span:last-child,
            #SpalteLogo .infoAktuell span:last-child {
                position: relative;
                top: 25px;
                width: 100%;
                float: left;
            }

            #SpalteLogo .infoAktuell a,
            #SpalteNavigation .infoAktuell a {
                color: #005da8;
                display: block;
            }

        #SpalteLogo {
            /*width: 100%; max-width: 300px;*/
            text-align: right;
            /*border: 1px solid blue;*/
            display: block;
            position: relative;
            left: 0;
            width: 100%;
            max-width: 16.66666667%;
            height: 100%;
        }

        .spalteLogoBox {
            position: absolute;
            width: auto;
            /*! border: 1px solid red; */
        }

        .spalteLogoInhalt {
            position: fixed;
            max-width: 290px;
            padding-right: 15px;
            width: 16.66666667%;
        }

        #SpalteLogo .adresse,
        #SpalteLogo .busse {
            width: 100%;
            display: block;
        }

        #SpalteLogo .logo {
            width: 100%;
            position: relative;
            top: 10px;
            left: 0;
            z-index: 555;
        }

            #SpalteLogo .logo img {
                width: 80%;
                max-width: 80%;
                height: auto;
                position: relative;
                right: auto;
                top: 20px;
                left: 0;
            }

        #Mitte {
            /*overflow: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-color: #fff #dcdcdc;*/
            -ms-overflow-style: auto;
            /*scrollbar-width: thin;*/
            -webkit-overflow-scrolling: touch;
            height: 100%;
            /*background-color: #fff;*/
            top: 40px;
        }

            #Mitte::-webkit-scrollbar {
                -webkit-appearance: none;
            }

                #Mitte::-webkit-scrollbar:vertical {
                    width: 9px;
                }

            #Mitte::-webkit-scrollbar-thumb {
                background-color: rgba(255, 255, 255, 1);
                /*border-radius: 10px;*/
                border: 2px solid #dcdcdc;
            }

            #Mitte::-webkit-scrollbar-track {
                /*border-radius: 10px;  */
                background-color: #dcdcdc;
            }

            #Mitte #BildHome,
            #Mitte #BildDestination,
            #Mitte #AllgemeinBild {
                margin: 0 auto;
            }

                #Mitte #BildHome h2 {
                    padding-top: 0;
                    font-size: 190%;
                }

        /*#BildHome h2::after {
        content: url("../images/ButtonInfo.png");
        display: flex;
        position: absolute;
        left: 35px;
        z-index: 999;
        bottom: 10px;
        width: 200px;
        height: auto;
    }*/
        #BildHome .buttonInfo {
            display: block;
            position: absolute;
            right: 20px;
            bottom: 10px;
            width: 200px;
        }

            #BildHome .buttonInfo .button {
                background-color: transparent;
                border: 0;
            }

            #BildHome .buttonInfo img {
                width: 100%;
                height: auto;
            }

            #BildHome .buttonInfo .content.zone p {
                text-align: left;
            }

            #BildHome .buttonInfo img[src*="Aeschbacher-Popup"] {
                margin-left: 15px;
            }

        .zonenabholen{
            display: flex;
            width: 100%;
        }

            .zonenabholen img {
                width: calc(100% / 3);
                height: auto;
                object-fit: contain;
            }

        #Mitte #BildDestination h2, #Mitte #BildDestination + h2, #Mitte #AllgemeinBild h2 {
            padding-top: 0;
            font-size: 160%;
        }

        #Mitte #AllgemeinBild h2 {
            padding-top: 25px;
        }

        #Mitte .mitteinhalt {
            /*display: inline-table;*/
            position: relative;
            margin-top: 0;
        }

            #Mitte .mitteinhalt #Destination {
                height: auto;
                background-color: #fff;
                padding-bottom: 70px;
                margin-top: 35px;
                /*display: inline-table;*/
            }

            #Mitte .mitteinhalt .abano-montegrotto + #Destination,
            #Mitte .mitteinhalt .bad-woerishofen + #Destination,
            #Mitte .mitteinhalt .montecatini + #Destination,
            #Mitte .mitteinhalt .ischia + #Destination,
            #Mitte .mitteinhalt .abano-montegrotto-inforeisen + #Destination,
            #Mitte .mitteinhalt .bad-woerishofen-inforeisen + #Destination,
            #Mitte .mitteinhalt .schwarzwald + #Destination {
                margin-top: 5px;
            }

            #Mitte .mitteinhalt #InhaltAllgemein {
                height: auto;
                background-color: #fff;
                padding-bottom: 70px;
                margin-top: 45px;
                /*display: inline-table;*/
            }

        #Mitte #DestinationenHome {
            width: 100%; /* ALT: calc(100% + 24px)*/
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            position: relative;
            top: 38px;
            left: 0; /* ALT: -12px */
            padding-bottom: 25px;
        }

        #Mitte #DestinationenHome2 {
            width: 100%; /* ALT: calc(100% + 24px)*/
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            position: relative;
            top: 38px;
            left: 0; /* ALT: -12px */
            padding-bottom: 25px;
        }

        #Mitte #BildHome .headerbalken,
        #Mitte #BildDestination .headerbalken,
        #Mitte #AllgemeinBild .headerbalken {
            position: absolute;
            top: 43px;
            bottom: 0;
            right: 0;
            left: 0;
            text-align: center;
            margin-top: -75px;
            /*margin-top: -6%;*/
        }



        #Mitte #DestinationBeschreibung p,
        #Mitte #HotelBeschreibung p,
        #Mitte #AllgemeinBeschreibung p {
            color: #005da8;
        }

        #Mitte #AllgemeinBeschreibung p {
            padding: 45px 0 0;
        }

        #Mitte #HotelBeschreibung p {
            min-height: calc(100% - 35px);
        }

        #Mitte .destinationbutton,
        #Mitte .allgemeinbutton {
            width: 100%;
            height: auto;
            position: relative;
            top: 0;
        }



        #Mitte #HotelBeschreibung .hotelbilder {
            flex-basis: 45%;
        }

            #Mitte #HotelBeschreibung .hotelbilder img {
                width: 100%;
            }

        #Mitte #HotelBeschreibung .hotelbeschreibung {
            flex-basis: 55%;
            padding: 0 15px;
        }

        #Mitte #AllgemeinBeschreibung .allgemeinbilder {
            flex-basis: 75%;
        }

            #Mitte #AllgemeinBeschreibung .allgemeinbilder img {
                width: 100%;
            }

        #Mitte #AllgemeinBeschreibung .allgemeinbeschreibung {
            flex-basis: 25%;
            padding: 0 15px;
        }


        #Mitte #DestinationenHome a,
        #Mitte #DestinationenHome2 a {
            flex: auto;
            text-align: left;
            margin: 12px 12px 0;
            background-color: transparent;
            padding: 0;
        }

        #Mitte #DestinationenHome2 a {
            max-width: calc(100% / 4 - 15px);
        }

            #Mitte #DestinationenHome a:first-child,
            #Mitte #DestinationenHome2 a:first-child {
                margin-left: 0;
            }

        #Mitte #DestinationenHome a:last-child {
            margin-right: 0;
        }

        #Mitte #DestinationenHome a h3 {
        }

        #Mitte #DestinationenHome .destinationHomeInfo {
            text-align: left;
            position: absolute;
            bottom: -8px;
            left: -300px;
            right: 100%;
            font-size: 100%;
            color: #000;
        }

        #Container #SpalteLogo .destinationHomeInfo {
            text-align: left;
            position: st;
            top: auto; /* Alt 355px */
            /*top: 486px;*/
            left: 0;
            bottom: -80px;
            right: 100%;
            font-size: 100%;
            color: #000;
            /*display: block;*/
            display: none;
            width: 100%;
            margin-top: 115px;
        }

            #Container #SpalteLogo .destinationHomeInfo h3,
            #Mitte #DestinationenHome .destinationHomeInfo h3 {
                font-size: 100%;
                margin: 10px auto;
                font-weight: 700;
                color: #000;
            }

            #Container #SpalteLogo .destinationHomeInfo .infoLeistungen li {
                text-decoration: none;
                margin-left: 15px;
            }

                #Container #SpalteLogo .destinationHomeInfo .infoLeistungen li ul li {
                    list-style-type: none;
                    margin-left: 0;
                }

            #Container #SpalteLogo .destinationHomeInfo li {
                text-decoration: none;
                list-style-type: none;
            }



            #Container #SpalteLogo .destinationHomeInfo .infoDestinationen {
                position: relative;
                margin-top: 45px;
            }
            /* kleiner schwarer Pfeil einfügen */
            #Container #SpalteLogo .destinationHomeInfo h3:after,
            #Mitte #DestinationenHome .destinationHomeInfo h3:after {
                border-color: transparent transparent transparent #000;
                border-style: solid;
                border-width: 8px;
                content: " ";
                display: block;
                height: 0;
                width: 0;
                left: 210px;
                position: absolute;
                top: 12px;
            }

            #Container #SpalteLogo .destinationHomeInfo h3:after {
                top: 3px;
            }

        #SpalteNavigation div.destinationHomePluspunkte {
            text-align: left;
            /*position: absolute;
        top: -8px;
        right: -300px;
        left: 100%;*/
            font-size: 100%;
            color: #000;
            margin: 65px 0 auto;
        }

            #SpalteNavigation div.destinationHomePluspunkte h3 {
                font-size: 100%;
                margin: 10px auto;
                font-weight: 700;
                color: #000;
            }

            #SpalteNavigation div.destinationHomePluspunkte li {
                margin-left: 15px;
                list-style-type: disc;
                margin-left: 15px;
            }

        #SpalteNavigation div.destinationPluspunkte {
            width: 100%;
            text-align: left;
            /*position: absolute;
        bottom: 0;
        right: -300px;
        left: calc(100% + 10px);*/
            font-size: 100%;
            color: #000;
            margin: 65px 0 auto;
        }

            #SpalteNavigation div.destinationPluspunkte h3 {
                font-size: 100%;
                margin: 10px auto;
                font-weight: 700;
                color: #000;
            }

            #SpalteNavigation div.destinationPluspunkte li {
                margin-left: 15px;
                list-style-type: disc;
            }

        /*#Mitte #DestinationenHome .destinationHomeInfo 53 {
            min-height: 100px;
            padding-left: 60px;
            position: relative;
        }*/

        #Mitte #Destination .destkarte {
            width: calc(20% - 10px);
            overflow: hidden;
            float: left;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: 10px;
            height: calc(100% - 10px);
            position: absolute;
            top: 0;
            left: 0;
            margin-top: -100px;
            background-position: -10px;
            display: block;
        }

        #Mitte .destnavi1 {
            min-height: auto;
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 10px;
            margin-top: 0;
            display: block;
        }

        #Mitte .destnavi1 {
            /*min-height: 500px;*/
            position: relative;
        }

        #Mitte .destnavi1,
        #Mitte .destnavireisen,
        #Mitte .hotnavizurueck,
        #Mitte .hotnavizurueck2 {
            width: calc(25% - 10px);
            float: right;
            text-align: left;
            margin-top: 15px;
        }

            #Mitte .destnavi1 + .hotnavizurueck {
                margin-top: 0;
                position: relative;
                right: 0;
                top: 15px;
                width: calc(25% - 10px);
                /*padding-left: 10px;*/
            }

        #Mitte .destnavireisen {
            padding-left: 10px;
            padding-top: 20px;
        }

            #Mitte .destnavi1 > div,
            #Mitte .destnavireisen div
            /*#Mitte .hotnavizurueck div,
#Mitte .hotnavizurueck2 div*/ {
                width: 85%;
            }

        #Mitte #BildDestination h2,
        #Mitte #BildDestination + h2 {
            margin-left: 27px; /* ALT 12.5% */
            text-align: left;
            width: calc(100% - 25%);
        }

        #Mitte #Destination .destbilder,
        #Mitte #Destination .destbeschreibung {
            flex-basis: calc(75% - 12.5%);
            width: calc(75% - 12.5%);
            margin-left: 12.5%;
        }

            #Mitte #Destination .destbeschreibung.infotext,
            #Mitte #InhaltAllgemein .inhalt {
                flex-basis: calc(85% - 12.5%);
                width: calc(85% - 12.5%);
                margin-left: 12.5%;
                text-align: left;
            }

            #Mitte #Destination .destbeschreibung.infotext,
            #Mitte #InhaltAllgemein .inhalt.team {
                flex-basis: calc(85% - 5%);
                width: calc(85% - 5%);
                margin-left: 10%;
                text-align: left;
            }



                #Mitte #InhaltAllgemein .inhalt .bildTextTeam4 {
                    width: calc(100% / 5);
                    float: left;
                    text-align: left;
                    font-size: 80%;
                }

                #Mitte #InhaltAllgemein .inhalt .bildTextTeam5 {
                    width: calc(100% / 5);
                    float: left;
                    text-align: left;
                    font-size: 80%;
                }

                #Mitte #InhaltAllgemein .inhalt .bildText {
                    display: inline-block;
                    width: 35%;
                    text-align: left;
                    margin: 10px;
                    font-size: 80%;
                    font-style: italic;
                }

        /* Slider (Destination und Hotel) */

        .slider {
            width: 100%; /*Same as width of the large image*/
            position: relative;
            /*Instead of height we will use padding*/
            padding-top: 285px; /*That helps bring the labels down*/
            margin: 100px auto 0;
        }
            /*Last thing remaining is to add transitions*/
            .slider > img {
                position: absolute;
                right: 10px;
                top: -100px;
                transition: all 0.5s;
                width: calc(80% - 10px);
            }

            .slider label {
                padding: 10px 10px 0 0;
                /*margin: 20px 10px 0 0;*/
                float: left;
                cursor: pointer;
                transition: all 0.5s;
                /*Default style = low opacity*/
                opacity: 0.6;
                width: 20%;
                /*width: calc(20% - 10px);*/
                /*flex-basis: calc(20% - 10px);*/
                height: auto;
                position: relative;
                top: 35px;
            }

        #Mitte #Hotels {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            position: relative;
            top: 35px;
            padding: 15px;
            box-sizing: border-box;
            background-color: #fff;
            text-align: left;
            flex-wrap: wrap;
            margin-bottom: 45px;
        }

        /* Kalender Datum */

        #Mitte #HotelsDatum {
            width: 100%;
            height: auto;
            display: block;
            top: 35px;
            padding: 15px 15px 55px;
            box-sizing: border-box;
            background-color: #fff;
            text-align: left;
            position: relative;
            border-bottom: 1px solid #005ea8;
        }

            #Mitte #HotelsDatum .datumHotels {
                width: auto;
                display: inline-block;
                float: right;
                position: absolute;
                top: 17px;
                right: 15px;
            }

            #Mitte #HotelsDatum div.datumHotels a {
                background-color: #ffd500;
                display: block;
                padding: 10px 20px;
            }

            #Mitte #HotelsDatum div.hinreise,
            #Mitte #HotelsDatum div.rueckreise {
                width: auto;
                /*width: calc(100% / 3);*/
                float: left;
                display: none;
            }

            #Mitte #HotelsDatum div.rueckreise {
                margin-left: 35px;
            }

            #Mitte #HotelsDatum div.hinreise select,
            #Mitte #HotelsDatum div.hinreise input {
                border: 2px solid #ceecf5;
                float: left;
                background-color: #fff !important;
            }

            #Mitte #HotelsDatum div.rueckreise select,
            #Mitte #HotelsDatum div.rueckreise input {
                border: 2px solid #f6ced8;
                background-color: #fff !important;
            }

            #Mitte #HotelsDatum div.hinreise select,
            #Mitte #HotelsDatum div.rueckreise select,
            #Mitte #HotelsDatum div.hinreise input,
            #Mitte #HotelsDatum div.rueckreise input {
                display: block;
                padding: 10px;
                width: 200px;
                text-align: left;
            }

                #Mitte #HotelsDatum div.hinreise input[disabled],
                #Mitte #HotelsDatum div.rueckreise input[disabled] {
                    background-color: #eee;
                }

            #Mitte #HotelsDatum div.hinreise span,
            #Mitte #HotelsDatum div.rueckreise span {
                float: left;
                margin-right: 15px;
                line-height: 2.5em;
            }

            #Mitte #HotelsDatum div.rueckreise span {
                margin-left: 35px;
            }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender,
            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
                margin-top: 25px;
                width: 42%;
                /*width: calc(100% / 3);*/
                padding: 20px;
            }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender {
                position: relative;
                left: 85px;
                float: left;
                border: 1px solid #CEECF5;
            }

                #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender td[class*=Status] {
                    background-color: #CEECF5;
                    color: #005da8;
                    border: 1px solid #CEECF5;
                }

            #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender {
                position: relative;
                left: 115px;
                display: inline-block;
                border: 1px solid #F6CED8;
            }

                #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender td[class*=Status] {
                    background-color: #F6CED8;
                    border: 1px solid #F6CED8;
                }

                #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender,
                #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender {
                    width: 100%;
                    border: transparent;
                    margin-top: 15px;
                }

                    #Mitte #HotelsDatum #Inhalt_DIV_TerminAuswahlKalender table.Calender table.Titel,
                    #Mitte #HotelsDatum #Inhalt_DIV_TerminBisAuswahlKalender table.Calender table.Titel {
                        background-color: #fff;
                        font-weight: 700;
                        height: 45px;
                    }

            #Mitte #HotelsDatum table.Calender .NextPrev {
                font-size: 0;
                position: relative;
                height: auto;
                width: auto;
                margin: 0 20px 20px 0;
                border: 1px solid rgba(0,0,0,0.25);
            }

                #Mitte #HotelsDatum table.Calender .NextPrev a {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                }

                #Mitte #HotelsDatum table.Calender .NextPrev:first-child a {
                    height: 0px;
                    width: 0px;
                    border: 7px solid;
                    border-color: #005da8 #005da8 transparent transparent;
                    transform: rotate(-135deg);
                }

                #Mitte #HotelsDatum table.Calender .NextPrev:last-child a {
                    height: 0px;
                    width: 0px;
                    border: 7px solid;
                    border-color: #005da8 #005da8 transparent transparent;
                    transform: rotate(45deg);
                }

            #Mitte #HotelsDatum table.Calender th[abbr="Montag"],
            #Mitte #HotelsDatum table.Calender th[abbr="Dienstag"],
            #Mitte #HotelsDatum table.Calender th[abbr="Mittwoch"],
            #Mitte #HotelsDatum table.Calender th[abbr="Donnerstag"],
            #Mitte #HotelsDatum table.Calender th[abbr="Freitag"],
            #Mitte #HotelsDatum table.Calender th[abbr="Samstag"],
            #Mitte #HotelsDatum table.Calender th[abbr="Sonntag"] {
                font-weight: normal;
                font-size: 90%;
                color: #005da8 !important;
            }

            #Mitte #HotelsDatum table.Calender th,
            #Mitte #HotelsDatum table.Calender td {
                text-align: center;
                border: none;
                line-height: 2.75em;
            }

            #Mitte #HotelsDatum table.Calender td {
                border: 1px solid #ededed;
                color: #005da8;
            }

                #Mitte #HotelsDatum table.Calender td a {
                    color: #005da8 !important;
                }

                    #Mitte #HotelsDatum table.Calender td a:hover {
                        text-decoration: none;
                    }

                #Mitte #HotelsDatum table.Calender td.DaySelected {
                    background-color: #81F79F !important;
                    color: #fff !important;
                    border: 1px solid #81F79F !important;
                }

                    #Mitte #HotelsDatum table.Calender td.DaySelected a {
                        color: #fff !important;
                    }

                #Mitte #HotelsDatum table.Calender td.StatusAusgebucht {
                    background-color: red !important;
                    border: 1px solid red !important;
                    color: #fff !important;
                }

            #Mitte #HotelsDatum table.Calender tbody tr:first-child td {
                border: 1px solid #fff !important;
            }



        #Mitte #Hotels .hotelbox {
            /*flex-basis: 50%;*/
            padding: 10px 0;
            box-sizing: border-box;
            width: 100%;
            border-bottom: 1px solid #005ea8;
            color: #000;
        }

            #Mitte #Hotels .hotelbox .hotelbild {
                width: 200px;
                float: left;
                height: 127px;
                display: inline-table;
                /*border: 1px solid red;*/
                margin-right: 10px;
            }

                #Mitte #Hotels .hotelbox .hotelbild img {
                    width: 100%;
                    height: auto;
                }

            #Mitte #Hotels .hotelbox .hotelbeschreibung {
                width: calc(100% - 210px);
                height: calc(100% - 35px);
                text-align: left;
                float: right;
            }

            #Mitte #Hotels .hotelbox .hoteldetails {
                line-height: 2.5em;
            }

            #Mitte #Hotels .hotelbox .hotelbeschreibung strong {
            }

            #Mitte #Hotels .hotelbox .hotelbuttons {
                width: auto;
                float: right;
                margin-top: 0;
            }

                #Mitte #Hotels .hotelbox .hotelbuttons a {
                    width: 49%;
                    text-align: center;
                }

                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.details {
                        margin-left: 0;
                        width: 30%;
                        float: left;
                    }

                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen,
                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.beschreibung {
                        margin-right: 0;
                        width: 195px;
                        float: right;
                        border-radius: 0;
                        background-color: #005da8;
                        border: #005da8;
                        color: #fff;
                    }

                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen {
                        width: 230px;
                    }

                        #Mitte #Hotels .hotelbox .hotelbuttons a.btn.buchen img {
                            height: 20px;
                            width: auto;
                            margin: -2px 15px 0 -15px;
                        }

                    #Mitte #Hotels .hotelbox .hotelbuttons a.btn.beschreibung {
                        margin-right: 10px;
                        float: none;
                    }

        #SpalteNavigation {
            /*width: 100%; max-width: 300px;*/
            margin-top: 15px;
            display: block;
        }

        #Footer .container div {
            width: calc(100% / 4);
            float: left;
            padding: 5px 15px 0;
            box-sizing: border-box;
            border-right: 1px solid #f2f2f2;
            border-bottom: none;
            margin: auto;
        }

            #Footer .container div a {
                color: #f2f2f2 !important;
            }
    }


    @media only screen and (min-width: 890px) and (max-width: 1800px) {

        #Footer .container {
            width: 100%;
            max-width: 66%;
            margin: 0 auto;
            padding: 0;
            display: block;
            text-align: left;
            color: #f2f2f2;
        }
    }


    @media only screen and (max-width: 769px) and (orientation: portrait) {
        /* Gästefragebogen */
        .FrageFragebogen .Frage .frageDetail {
            display: flex;
            width: 100%;
            margin: 10px 0;
            flex-direction: column;
        }

        .FrageFragebogen span.fragefirst {
            width: 100%;
            display: block;
            font-weight: 600;
            float: left;
            line-height: 2.3em;
            order: 1;
        }

        .FrageFragebogen .Frage .frageDetail .beurteilung {
            width: 100%;
            display: inline-block;
            line-height: 2.3em;
            order: 3;
        }

        .FrageFragebogen .Frage .frageDetail label {
            width: 100%;
            display: inline-block;
            font-weight: normal;
            font-size: 14px;
            float: left;
            clear: both;
            order: 2;
        }

        .FrageFragebogen .Frage .frageDetail span.frageBeurteilung {
            width: 100%;
            display: inline-block;
            order: 4;
        }

        .FrageFragebogen span.punkte {
            line-height: normal;
            width: 100%;
            display: inline-block;
        }

            .FrageFragebogen span.punkte.gross {
                line-height: normal;
                width: 100%;
                display: inline-block;
            }
        /*--*/
    }