/* ==========================================================================
   Media Queries

   Die Stufen folgen den Breakpoints von Bootstrap 5, damit Grid-Klassen und
   dieses Stylesheet an derselben Stelle umschalten:

       768px = md, 992px = lg, 1200px = xl, 1400px = xxl

   Frueher lagen sie bei 1000, 1199 und 1399 -- also je ein bis acht Pixel
   neben Bootstrap. In diesen Zwischenraeumen wechselte das Grid schon,
   dieses Stylesheet noch nicht.

   Die Stufen 1px, 200px, 350px, 500px und 640px sind eigene Zwischenschritte
   unterhalb von md und haben in Bootstrap keine Entsprechung.

   Hier standen ausserdem sechs leere Bloecke (320, 481, 641, 961, 1025,
   1281px) ohne eine einzige Regel. Sie sahen wie die Breakpoints des Projekts
   aus, waren aber ohne Wirkung.
   ========================================================================== */

/*MIN*/
@media (min-width: 1px) {

    .news-item {
      /*2 Spalte  */
      flex: 0 50%;                         
      min-width: 0;    
      padding: 5px;
    }

    /*body::-webkit-scrollbar { -webkit-appearance: none;}*/

    #headerSmall, #header_mobile_plch {
        display: block;
    }
    /*Menü umschalten*/
    .div_banner.slogan {
        background: none;
        width: 34%;
        float: right;
    }
    /*Menü umschalten*/
    .div_banner.ham {
        display: block;
        width: 34%;
        float: left;
        color: var(--portal-header-fg-sm);
    }
    /*Menü umschalten*/

    /* Hier stand `.row { display: block }` unter 768px, dazu `display: flex`
       ab 768px -- ein Bootstrap-3-Reflex. Bootstrap 5 macht Spalten auf
       kleinen Displays von sich aus voll breit und behaelt dabei die
       Rinnenabstaende. Solange die Regel stand, war `col-6`/`col-sm-*` auf
       dem Telefon wirkungslos, also genau das Werkzeug fuer Mobile-Layout. */

    .service_block_wrapper {
        padding: 0px;
    }

    .service_area {
        padding-bottom: 50px;
    }

    .main-section.client.customer {
        padding: unset;
    }

    .main-section.client.shops {
        padding: 0;
    }

    /*Kunden*/
    .client_profile, .client_profile.flt {
        float: none;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .quote_section {
        width: 90%;
        float: none;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    /*so funktionierts*/
    .team-leader-box {
        width: 65%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 40px;
        height: auto;
        float: none;
        cursor: pointer;
    }

    .team-leader-block {
        width: 75%;
        margin: 2% auto auto auto;
        font-size: 18px;
    }

    .container.impressum2 {
        height: auto;
    }

    .impressum2 {
        padding: 0px 20px;
    }

    .impressum {
        width: 100%;
        height: auto;
        float: none;
        padding: 20px;
        border-right: none;
    }

        .impressum:first-child {
            width: 100%;
            height: auto;
            float: none;
            padding: 20px;
            border-right: none;
        }

    #registerForm {
        width: 85%;
    }

    .row.ColForm {
        padding-top: 40px;
    }

    .downloadsection {
        font-size: 9px;
        padding-top: 20px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 12px;
        padding-top: 40px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadsection .downloadh1 {
        width: 50%;
    }

        .downloadsection .downloadh1 .spacer {
            width: 0%;
        }

    .downloadh2 {
        color: white;
        font-size: 8px;
        padding-top: 10px;
    }

        .downloadh2 a {
            font-size: 9px;
        }

    .downloadfooter2 .downloadh2 {
        padding-left: 30px;
        text-align: left;
    }

    .downloadh1f {
        color: #f00;
        font-size: 10px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 8px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 49%;
    }

    .downloadicon {
        margin-bottom: 5px;
        max-width: 100px;
    }

    .downloadfooter1 {
        margin-top: 30px;
    }

    .downloadfooter2 {
        padding-bottom: 30px;
    }

    .downloadfooter3 {
        width: 100%;
    }

    .downloadfooter4 {
        padding-bottom: 15px;
        padding-top: 15px;
        color: white;
        font-size: 7px;
    }

    .downloadmail {
        height: 8px;
        margin-right: 5px;
    }

    .section {
        margin-top: 50px;
        padding: 10px;
    }



    /* Schriftskala mobil: 14 / 16 / 18 / 20 / 24 / 28 px.
       Vorher standen in dieser Datei vierzehn Groessen zwischen 7px und 34px
       ohne erkennbares Verhaeltnis. Der Grundtext lag bei 8pt (10,7px) und
       9pt (12px) und damit unter jeder Empfehlung -- Browser, Bootstrap und
       Material Design setzen 16px, Apple 17pt. Die Zeilenhoehe von 1,1 war
       fuer Lesetext zu gedraengt; empfohlen sind 1,5 bis 1,7.

       Die Stufen sind kumulativ (min-width), deshalb traegt dieser Block die
       Werte fuer alle Breiten bis 1200px. Ab dort steigt der Grundtext wie
       bisher weiter (12pt, 13pt, 14pt). Bedingung ist, dass die Leiter
       monoton bleibt: keine Stufe darf kleiner sein als die darunter, sonst
       schrumpft die Schrift auf dem groesseren Display. */
    body {
        font-size: var(--portal-type-body);
        line-height: 1.5;
    }

    .smallerFont {
        font-size: var(--portal-type-small);
    }

    .container_row { /*display:block;*/
        text-align: left;
        padding: 3px;
    }

    .container_r {
    }

    .container_l {
    }

    .footer_font {
        font-size: 14px;
    }

    .page-wrap {
        margin-bottom: -60px;
    }
    /*.footer_section { height: 60px; }*/


    .container {
        max-width: 96%;
    }

        .container h1 {
            font-size: 20px;
            margin: 20px 6px 0px;
        }

        .container h3 {
            font-size: 14px;
        }

    .infotext {
        width: 100%;
        padding: 10px;
    }

    .service_block h3 {
        font-size: 14px;
    }

    .project-overlay2bottom {
        font-size: 10px;
    }

    .project-overlay2top {
        font-size: 8px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 8px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 9px;
        height: unset;
        padding: 2px 12px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/
    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }

    input.login {
        font-size: 10px;
        height: 34px;
    }

        input.login.small {
            font-size: 8px;
        }

    .btn.shopInfoBtn {
        font-size: 8px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 1px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .carousel-indicators {
        bottom: 0px;
    }

    .formCenter {
        width: 95%;
    }

    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel .carousel-indicators button {
        width: 8px;
        height: 8px;
        bottom: 0px;
    }

    .modal-title {
        font-size: 20px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14px;
    }

    .carousel-caption {
        bottom: 10px;
    }

    /*NEU*/
    .div_banner {
        height: 17px;
        background-position: right 0px;
    }

    header .spk-logo {
        width: 80px;
        margin: -3px 0 0 0;
    }

    header #headerBig {
        height: 36px;
    }

    img.headerimg {
        padding-top: 36px;
    }

    div.headerimg {
        top: 36px;
    }

    .co_l > div {
        padding: 8px 0 8px;
        width: 100%;
    }

    .footer_section > .container-fluid {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .stage { /*Höhe Slider*/
        height: 183px;
    }

    .slider {
        height: 183px;
    }

    .welcome {
        top: 140px;
        width: 80%;
    }

    .customerq2 h1 {
        font-size: 16px;
    }

    .customerq2 h2 {
        font-size: 10px;
    }

    .customerq2 h3 {
        font-size: 12px;
    }

    .customerq {
        width: 98%;
    }

    .soeinfach {
        width: 60%;
    }

    .btn {
        font-size: var(--portal-type-body);
    }

    h1 {
        font-size: 18px;
    }

    .Passwortvergessen {
        padding-top: 15px;
        padding-bottom: 5px;
    }

    /*Kundenkonto*/
    .col-md-9 {
        padding-left: 0px;
    }

    .container-fluid.container-fluid.admin {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    .shoppage {
        margin-top: 30px;
    }

    .shoppageText {
        font-size: 14pt;
        padding-left: 34px;
        padding-bottom: 2px;
    }
    #shopCode, #shopCode2, #shopCode3, #shopCode4 {
        width: 100%;
        margin-top: 1px;
        margin-bottom: 3px;
    }
}

/*iPhone 4 und kleinere Phones*/
@media (min-width: 200px) {

    /* body und .smallerFont standen hier mit genau denselben Werten wie in
       der Stufe darunter -- reine Wiederholung. Die Basisstufe traegt sie. */

    .container {
        max-width: 96%;
    }

        .container h1 {
            font-size: 24px;
        }

        .container h3 {
            font-size: 18px;
        }

    .service_block h3 {
        font-size: 24px;
    }

    .project-overlay2bottom {
        font-size: 12px;
    }

    .project-overlay2top {
        font-size: 10px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 9px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 10px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }


    .page-wrap {
        margin-bottom: -60px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/


    input.login {
        font-size: 12px;
        height: 34px;
    }

        input.login.small {
            font-size: 10px;
        }

    .btn.shopInfoBtn {
        font-size: 9px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 2px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .formCenter {
        width: 95%;
    }


    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel .carousel-indicators button {
        width: 9px;
        height: 9px;
        bottom: 0px;
    }


    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14px;
    }

    .carousel-caption {
        bottom: 10px;
    }
}

/*iPhone 5 + 6*/
@media (min-width: 350px) {

    /* Grundtext und Sekundaertext kommen aus der Basisstufe. Frueher stiegen
       sie hier auf 9pt und 8pt -- beides unterhalb des Ausgangswerts, den
       diese Skala jetzt setzt. */

    .container {
        max-width: 92%;
    }

        /* 34px war auf einem 375px-Display zu gross: der Titel drueckte den
           Inhalt unter die Falz. Empfohlen sind mobil 24 bis 28px. */
        .container h1 {
            font-size: 28px;
            margin: 36px 6px 0px;
        }

        .container h3 {
            font-size: 20px;
        }

    .service_block h3 {
        font-size: 26px;
    }

    .project-overlay2bottom {
        font-size: 14px;
    }

    .project-overlay2top {
        font-size: 12px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 12px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 10px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }

    .page-wrap {
        margin-bottom: -60px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/

    input.login {
        font-size: 12px;
        height: 34px;
    }

        input.login.small {
            font-size: 10px;
        }

    .btn.shopInfoBtn {
        font-size: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 4px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .formCenter {
        width: 95%;
    }

    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel .carousel-indicators button {
        width: 9px;
        height: 9px;
        bottom: 0px;
    }


    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14px;
    }

    .carousel-caption {
        bottom: 12px;
    }

    h1 {
        font-size: 24px;
    }

    .impressum2 {
        padding: 40px 20px;
    }
}

/*Größer als 500*/
@media (min-width : 500px) {
    .downloadsection {
        font-size: 11px;
        padding-top: 20px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 16px;
        padding-top: 60px;
    }

    .downloadsection .downloadh1 {
        width: 50%;
    }

        .downloadsection .downloadh1 .spacer {
            width: 0%;
        }

    .downloadh2 {
        color: white;
        font-size: 10px;
        padding-top: 15px;
    }

        .downloadh2 a {
            font-size: 10px;
        }

    .downloadh1f {
        color: #f00;
        font-size: 14px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 9px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 49%;
    }

    .downloadicon {
        margin-bottom: 5px;
    }

    .downloadfooter1 {
        margin-top: 30px;
    }

    .downloadfooter2 {
        padding-bottom: 30px;
    }

    .downloadfooter3 {
        width: 100%;
    }

    .downloadfooter4 {
        padding-bottom: 15px;
        padding-top: 15px;
        color: white;
        font-size: 8px;
    }

    .downloadmail {
        height: 8px;
        margin-right: 5px;
    }

    .container h1 {
        margin: 66px 6px 0px;
    }

    .impressum2 {
        padding: 70px 20px;
    }
    #shopCode, #shopCode2, #shopCode3, #shopCode4 {
        width: 40%;
        margin-top: 1px;
        margin-bottom: 3px;
    }
}

/*kleine Tablets*/
@media (min-width: 768px) {
    .news-item {
      /*3 Spalten  */
      flex: 0 33.2%;                         
      min-width: 0;    
      padding: 5px;
    }
    body {
        padding-top: 0px;
    }

    .container {
        max-width: 88.5%;
    }


        .container h1 {
            font-size: 39px;
            margin: 20px 6px 0px;
        }

        .container h3 {
            font-size: 28px;
        }

    .infotext {
        padding: 10px;
    }

    .service_block h3 {
        font-size: 30px;
    }


    .page-wrap {
        margin-bottom: -40px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 12px;
        padding-top: 0px;
    }

    .navwrapper {
        height: 22px;
        line-height: 22px;
    }

    .form-control, .form {
        font-size: 14px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 10px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 10px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 1.4%;
    }

    input.login {
        font-size: 14px;
        height: 24px;
    }

        input.login.small {
            font-size: 12px;
        }


    .btn.shopInfoBtn {
        font-size: 16px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .project-overlay2bottom {
        font-size: 18px;
    }

    .project-overlay2top {
        font-size: 14px;
    }

    .project-overlay {
        padding-top: 85%;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 95%;
        top: 50px;
    }

    .quote_section p {
        font-size: 24px;
    }

    .carousel .carousel-indicators button {
        width: 10px;
        height: 10px;
    }


    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14px;
    }

    .carousel-caption {
        bottom: 14px;
    }


    .navwrapper, #header_outer, #header_outer_plch {
        display: block;
    }
    /*Menü umschalten*/
    #headerSmall, #header_mobile_plch {
        display: none;
    }
    /*Menü umschalten ALT*/
    .div_banner.slogan {
        display: block;
        width: 34%;
        height: var(--portal-logo-height-sm);
        background: url("/Content/img/siesind.png") no-repeat;
        background-size: contain;
        background-position: var(--portal-logo-pos-sm);
        background-attachment: local;
    }
    /*Menü umschalten*/
    .div_banner.ham {
        display: none;
        width: 34%;
        float: left;
    }
    /*Menü umschalten*/

    /*Kunden*/
    .client_profile {
        float: left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

        .client_profile.flt {
            float: right;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

    .quote_section {
        width: 53%;
        float: left;
        margin: 4% 5% 4% 5%;
    }

    /*so funktionierts*/
    .team-leader-box {
        margin-right: 2%;
        margin-left: 2%;
        width: 29%;
        margin-bottom: 40px;
        height: auto;
        float: left;
    }

    .team-leader-block {
        width: 80%;
        margin: 2.5% auto auto auto;
    }

    #registerForm {
        width: 75%;
    }

    .downloadsection {
        font-size: 16px;
        padding-top: 30px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 18px;
    }

    .downloadsection .downloadh1 {
        width: 22%;
    }

        .downloadsection .downloadh1.spacer {
            width: 12%;
        }

    .downloadh2 {
        color: white;
        font-size: 12px;
        padding-top: 20px;
    }

        .downloadh2 a {
            font-size: 16px;
        }

    .downloadh1f {
        color: #f00;
        font-size: 17px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 11px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 25%;
    }

    .downloadicon {
        margin-bottom: 10px;
    }

    .downloadfooter1 {
        margin-top: 40px;
    }

    .downloadfooter2 {
        padding-bottom: 40px;
    }

    .downloadfooter3 {
        width: 70%;
    }

    .downloadfooter4 {
        padding-bottom: 20px;
        padding-top: 20px;
        color: white;
        font-size: 10px;
    }

    .downloadmail {
        height: 14px;
        margin-right: 10px;
    }


    .div_banner {
        height: 17px;
        background-position: right 0px;
    }

    header .spk-logo {
        width: 150px;
        margin: -3px 0 0 0;
    }

    .navwrapper {
        margin-top: 78px;
    }

    header #headerBig {
        height: 60px;
    }

    img.headerimg {
        padding-top: 60px;
    }

    div.headerimg {
        top: 60px;
    }

    .footer_section > .container-fluid {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .stage {
        height: auto;
    }

    .slider {
        height: 100%;
    }

    .slick-carousel {
        height: 550px;
    }

    .welcome {
        top: 460px;
        width: 65%;
    }

    .co_l > div {
        float: left;
        width: auto;
        border-bottom: none;
        width: auto;
        padding: 5px 0 5px;
    }
    /*.co_l > div:last-child {float: right;} Copyright doch linksbündig*/

    .customerq2 h1 {
        font-size: 20px;
    }

    .customerq2 h2 {
        font-size: 14px;
    }

    .customerq2 h3 {
        font-size: 16px;
    }

    .customerq {
        width: 48%;
    }

    .soeinfach {
        width: 60%;
    }

    h1 {
        font-size: 26px;
    }

    .Passwortvergessen {
        padding-top: 5px;
        padding-bottom: 0px;
    }

    .row.ColForm {
        padding-top: 70px;
    }

    .container-fluid.container-fluid.admin {
        padding-top: 70px;
        padding-bottom: 20px;
    }
}

/* iPad */
@media (min-width: 992px) {

    /* Grundtext und Sekundaertext lagen hier bei 11pt (14,7px) und 9pt
       (12px), also unter den 16px und 14px der Basisstufe. Sie kommen jetzt
       von dort; ab 1200px steigt der Grundtext wie bisher weiter. Die
       Zeilenhoehe stand auf 1,42857 und ist mit 1,5 vereinheitlicht. */

    .container h1 {
        font-size: 46px;
        margin: 2% 6px 0px;
    }

    .container h3 {
        font-size: 32px;
    }


    .infotext {
        padding: 20px;
    }

    .service_block h3 {
        font-size: 34px;
    }


    .page-wrap {
        margin-bottom: -30px;
    }
    /*.page-wrap:after, .footer_section { height: 30px; }*/

    /*Menü*/
    .navwrapper {
        height: 26px;
        line-height: 26px;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 14px;
    }

    .navdivitem.first {
        width: 70px;
    }

    .form-control, .form {
        font-size: 16px;
    }


    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 14px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 14px;
        margin-top: 1%;
    }

    .spacer1 {
        padding-bottom: 2%;
    }

    input.login {
        font-size: 16px;
        height: 30px;
    }

        input.login.small {
            font-size: 14px;
        }

    .project-overlay2bottom {
        font-size: 20px;
    }

    .project-overlay2top {
        font-size: 18px;
    }

    .project-overlay {
        padding-top: 83.5%;
    }

    .btn.shopInfoBtn {
        font-size: 18px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 95%;
        top: 100px;
    }

    .quote_section p {
        font-size: 26px;
    }

    .carousel .carousel-indicators button {
        width: 11px;
        height: 11px;
    }


    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 11pt;
    }

    .carousel-caption {
        bottom: 16px;
    }

    /*.navdivitem > a, .xcell.login  { font-size: 16px; padding-top:3px}
    .navdivitem {padding-top: 2px;}*/
    .container_row {
        padding: 0px 20px 0px 20px;
    }

    .service_block_wrapper {
        padding: 0px;
    }

    .service_area {
        padding-bottom: 30px;
    }



    .main-section.client.customer {
        padding-left: 15%; /*Beeinflusst die Größe der Shop Kacheln*/
        padding-right: 15%;
    }

    .main-section.client.shops {
        padding-left: 8%; /*Beeinflusst die Größe der Shop Kacheln*/
        padding-right: 8%;
    }

    .container.impressum2 {
        height: auto;
        padding: 40px 0px;
    }

    .impressum {
        width: 48%;
        height: auto;
        float: left;
        padding: 0px 0px 40px 40px;
    }

    .impressum2 {
        height: auto;
        padding: 90px 0px 40px 40px;
    }

    .impressum:first-child {
        width: 48%;
        height: auto;
        float: left;
        padding: 0px 40px 40px 0px;
        border-right: solid 1px var(--portal-divider);
    }

    #registerForm {
        width: 65%;
    }


    .downloadsection {
        font-size: 18px;
        padding-top: 50px;
        padding-left: 30px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 22px;
    }

    .downloadsection .downloadh1 {
        width: 22%;
    }

        .downloadsection .downloadh1.spacer {
            width: 12%;
        }

    .downloadh2 {
        color: white;
        font-size: 18px;
        padding-top: 16px;
        padding-left: 30px;
        padding-right: 30px;
    }

        .downloadh2 a {
            font-size: 15px;
        }

    .downloadfooter2 .downloadh2 {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }

    .downloadh1f {
        color: #f00;
        font-size: 19px;
        padding-top: 45px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 13px;
        padding-top: 15px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadicon {
        margin-bottom: 10px;
        max-width: 250px;
    }

    .downloadfooter1 {
        margin-top: 70px;
    }

    .downloadfooter2 {
        padding-bottom: 70px;
    }

    .downloadfooter3 {
        width: 58%;
        display: table-cell;
        vertical-align: middle;
    }

    .downloadfooter4 {
        padding-bottom: 30px;
        padding-top: 30px;
        color: white;
        font-size: 12px;
    }

    .downloadmail {
        height: 20px;
        margin-right: 10px;
    }

    .section {
        margin-top: 20px;
    }

    .co_l > div {
        padding: 8px 0 8px;
    }

    .footer_section > .container-fluid {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    h1 {
        font-size: 32px;
    }

    /*Kundenkonto*/
    .col-md-9 {
        padding-left: 15px;
    }

    .shoppage {
        margin-top: 58px;
    }

    .shoppageText {
        font-size: 18pt;
        padding-left: 14px;
        padding-bottom: 20px;
    }
}

/* Laptops */
@media (min-width: 1200px) {

    /* 12pt entspricht genau den 16px der Basisstufe -- die Angabe war
       redundant. .smallerFont stand hier auf 10pt (13,3px) und waere damit
       kleiner gewesen als die 14px darunter; ab 1400px steigt es wieder. */

    .container h1 {
        font-size: 50px;
        margin: 2% 6px 0px;
    }

    .container h3 {
        font-size: 40px;
    }

    .btn {
        font-size: var(--portal-type-lead);
    }

    .service_block h3 {
        font-size: 44px;
    }


    .page-wrap {
        margin-bottom: -30px;
    }
    /*.page-wrap:after, .footer_section { height: 30px; }*/

    /*Menü*/
    .navwrapper {
        height: 28px;
        line-height: 28px;
        margin-top: 124px;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 16px;
    }

    .navdivitem.first {
        width: 80px;
    }

    .form-control, .form {
        font-size: 18px;
        height: 35px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 18px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 18px;
    }

    .spacer1 {
        padding-bottom: 2.2%;
    }

    input.login {
        font-size: 18px;
        height: 30px;
    }

        input.login.small {
            font-size: 15px;
        }

    .project-overlay2bottom {
        font-size: 24px;
    }

    .project-overlay2top {
        font-size: 22px;
    }

    .btn.shopInfoBtn {
        font-size: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 88.5%;
        top: 90px;
    }

    .quote_section p {
        font-size: 26px;
    }

    .carousel .carousel-indicators button {
        width: 13px;
        height: 13px;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 12pt;
    }

    .carousel-caption {
        bottom: 18px;
    }

    header .spk-logo {
        width: 240px;
        margin: 2px 0 0 0;
    }

    header #headerBig {
        height: 96px;
    }

    img.headerimg {
        padding-top: 96px;
    }

    div.headerimg {
        top: 96px;
    }

    .div_banner.slogan {
        width: 23%;
        height: var(--portal-logo-height-md);
        background-position: var(--portal-logo-pos-md);
    }
    /*nur Größe*/

    .co_l > div {
        padding: 8px 0 8px;
    }

    .footer_section > .container-fluid {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    h1 {
        font-size: 36px;
    }

    .shoppage {
        margin-top: 96px;
    }
}

/* Desktops  */
@media (min-width: 1400px) {

    body {
        font-size: 13pt;
    }

    .smallerFont {
        font-size: 11pt;
    }

    .container {
        max-width: 88.5%;
    }

        .container h1 {
            font-size: 64px;
            margin: 2% 6px 0px;
        }

        .container h3 {
            font-size: 54px;
        }

    .infotext {
        padding: 20px;
    }

    .btn {
        font-size: var(--portal-type-display);
    }

    .service_block h3 {
        font-size: 58px;
    }


    .page-wrap {
        margin-bottom: -34px;
    }
    /*.page-wrap:after, .footer_section { height: 34px; }*/
    /*Menü*/
    .form-control, .form {
        font-size: 20px;
        height: 42px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 21px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 21px;
    }

    .spacer1 {
        padding-bottom: 2.9%;
    }

    input.login {
        font-size: 18px;
        height: 34px;
    }

        input.login.small {
            font-size: 16px;
        }

    .project-overlay2bottom {
        font-size: 30px;
    }

    .project-overlay2top {
        font-size: 24px;
    }

    .btn.shopInfoBtn {
        font-size: 22px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .btn.shopInfoBtn2 {
        font-size: 22px;
        padding-top: 0px;
        padding-bottom: 0px;
    }



    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 88.5%;
        margin: auto;
        max-width: 88.5%;
        top: 90px;
    }

    .quote_section p {
        font-size: 32px;
    }

    .carousel .carousel-indicators button {
        width: 15px;
        height: 15px;
    }

    .modal-title {
        font-size: 24px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14pt;
    }

    .carousel-caption {
        bottom: 20px;
    }

    .slideroverlayPlaceholder {
        max-height: 520px;
    }

    .slideroverlay {
        max-height: 800px;
    }

    .slider {
        max-height: 670px;
    }

    .downloadmail {
        height: 25px;
        margin-right: 20px;
    }
}

/* Ab 2160 x 1440 Beispiel 2523 x 1680 Faktor 1 */
@media (min-width: 1799px) {

    body {
        font-size: 14pt;
    }

    .smallerFont {
        font-size: 12pt;
    }

    .container {
        max-width: 1700px;
    }

        .container h1 {
            font-size: 82px;
            margin: 3% 6px 0px;
        }

        .container h3 {
            font-size: 55px;
        }

    .btn, .title {
        font-size: var(--portal-type-display);
    }

    .service_block h3 {
        font-size: 58px;
    }


    .page-wrap {
        margin-bottom: -44px;
    }
    /*.page-wrap:after, .footer_section { height: 44px; }*/

    /*Menü*/
    .form-control, .form {
        font-size: 24px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 24px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 24px;
    }

    .spacer1 {
        padding-bottom: 3.6%;
    }

    input.login {
        font-size: 18px;
        height: 38px;
    }

        input.login.small {
            font-size: 16px;
        }

    .project-overlay2top {
        font-size: 28px;
    }

    .project-overlay2bottom {
        font-size: 34px;
    }

    .btn.shopInfoBtn {
        font-size: 24px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 50px;
        line-height: 1.4;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 100%;
        margin: auto;
        max-width: 925px;
        top: 90px;
    }

    .quote_section p {
        font-size: 36px;
    }

    .carousel .carousel-indicators button {
        width: 16px;
        height: 16px;
    }

    .modal-title {
        font-size: 28px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 16pt;
    }

    .carousel-caption {
        bottom: 22px;
    }


    .navdiv {
        max-width: 1700px;
    }

    .modal-dialog {
        max-width: 925px;
    }

    .slideroverlayPlaceholder {
        max-height: 580px;
    }
}
/* *********************WIDTH*************************** */
/* *********************WIDTH*************************** */
/* *********************WIDTH*************************** */



/* Hier standen 15 Media Queries, die die Hoehe des Teaser-Bildes in
   100px-Schritten an die Viewport-Hoehe koppelten -- alle ueber den
   Bootstrap-3-Selektor `.carousel-inner > .item > img`. Seit Bootstrap 4
   heisst das Element `.carousel-item`, die Regeln griffen also nie. Dieselbe
   Absicht erfuellt das `max-height: 50vh` an den drei Teaser-Bildern in
   _Layout.cshtml, stufenlos und in einer Zeile. */

/*
    ************
    NEWS BEREICH
    ************
*/
@media (min-width: 1px) {

    .col-sm-4.news-col {
        border-left: hidden;
        padding: 0px;
        float: left;
    }

    .col-sm-8.shop-col {
        /*padding-right: 3px;*/
    }

    .shop-col {
        display: inline-block;
    }

    .container-fluid.shops { /*Container für Shop Boxes*/
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .newsshops { /*News Korrektur auf Portalseite für Container für Shop Boxes*/
        padding-top: 5%;
        padding-bottom: 10px;
    }

    .news-header {
        font-size: 10px;
    }

    /*.container-fluid.newsshops {
        width: 200px;
    }*/

    /*.shop-item.shop-col-count {

    }*/

    /*.box-width {
        width: 79px;
    }
    .box-height {
        height: 79px;
    }
    .box-margin {
        margin:2px;
    }*/

    .shops-shop-item {
        width: 48%;
        height: 48%;
    }

    .container-teaser {
        position: relative;
        top: -25px;
    }

    /*NEUE BOXEN*/
    .shop-item {
        width: 48%;
        margin: 1%;
    }

    .news-item.box-width {
        width: 98%;
    }

    .news-item.box-margin {
        margin: 1%;
    }

    .box-width {
        width: 100%;
    }

    .box-height {
        height: 100%;
    }

    .box-margin {
        margin: 0px;
    }

    .shop-image > img, .shop-image2 > img {
        width: 100%;
        height: 100%;
    }

    .shop-item.box-margin {
        margin: 1%;
    }

    .container-fluid.newsshops {
        width: 95%;
    }

    .container-fluid.container-teaser {
        padding: 1%;
    }
}

@media (min-width: 200px) {
    .newsshops {
        padding-top: 6%;
        padding-bottom: 15px;
    }

    .container-fluid.shops {
        padding-top: 30px;
        padding-bottom: 20px;
    }
}

@media (min-width: 350px) {

    .news-header {
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .newsshops {
        padding-top: 9%;
        padding-bottom: 30px;
    }

    /*.container-fluid.newsshops {
        width: 340px;
    }*/

    /*.shop-item.shop-col-count {
        width: 149px;
        height: 149px;
        margin:2px;
    }*/

    /*.box-width {
        width: 148px;
    }
    .box-height{
        height: 148px;
    }
    .box-margin {
        margin:2px;
    }*/

    .container-fluid.shops {
        padding-top: 84px;
        padding-bottom: 20px;
    }
    
    .news-item.box-width {
        width: 48%;
    }
}

@media (min-width: 500px) {

    .newsshops {
        padding-top: 14%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 480px;
    }*/

    .container-fluid.shops {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    /*.shop-item.shop-col-count {
        width: 217px;
        height: 217px;
        margin:3px;
    }*/

    /*.box-width {
        width: 217px;
    }
    .box-height{
        height: 217px;
    }
    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 217px;
        height: 217px;
        margin:3px;
    }*/
    /*.shops-shop-item {
        width: 23.2%;
        height: 23.2%;
    }*/



    .shops-shop-item {
        width: 31.3%;
        height: 31.3%;
    }
}

@media (min-width: 640px) {

    .newsshops {
        padding-top: 14%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 620px;
        padding-top: 7%;
        padding-bottom: 40px;
    }*/
    .newsshops {
    }
    /*.shop-item.shop-col-count {
        width: 285px;
        height: 285px;
        margin:4px;
    }*/

    /*.box-width {
        width: 285px;
    }
    .box-height{
        height: 285px;
    }

    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 285px;
        height: 285px;
        margin:4px;
    }*/

    /*.shop-item {width: 23%; height: 23%;}*/


}

@media (min-width: 768px) { /*Bootstrap MD*/
    /*ab hier Newsbereich rechts!*/

    .news-header {
        width: 100%;
        font-size: 14px;
        /*margin: 0 1% 1% 1%;*/
    }

    .col-sm-4.news-col {
        border-left: solid 1px;
        padding-right: 3px;
        padding-left: 10px;
        float: right;
        margin-top: 6px; /*linker Rahmen oben bündig*/
    }

    .newsshops {
        padding-top: 7%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 760px;
    }*/

    /*.shop-item.shop-col-count {
        width: 153px;
        height: 153px;
        margin:4px;
    }*/

    .news-item.box-width {
        width: 100%; /*News rechts und volle Breite*/
    }

    /*.box-width {
        width: 153px;
    }
    .box-height{
        height: 153px;
    }
    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 153px;
        height: 153px;
        margin:4px;
    }*/

    .container-teaser {
        top: -100px;
    }

    .shop-teaser--overlay {
        margin-top: -100px;
    }
    /*NEUE BOXEN*/

    .shop-item {
        width: 31%;
        margin: 1%;
    }

    .shops-shop-item {
        width: 23%;
        height: 23%;
    }
}

@media (min-width: 992px) {
    .newsshops {
        padding-top: 8%;
        padding-bottom: 40px;
    }

    .news-header {
        font-size: 16px;
    }

    /*.container-fluid.newsshops {
        width: 760px;
    }*/

    /*.shop-item.shop-col-count {
        width: 149px;
        height: 149px;
        margin:6px;
    }*/

    /*.box-width {
        width: 149px;
    }
    .box-height{
        height: 149px;
    }
    .box-margin {
        margin:6px;
    }*/
    /*.shop-item-div2 {
        width: 149px;
        height: 149px;
                margin:6px;
    }*/

    .container-fluid.shops {
        padding-top: 70px;
        padding-bottom: 40px;
    }
}

@media (min-width: 1200px) {
    .newsshops {
        padding-top: 7%;
        padding-bottom: 20px;
    }

    .news-header {
        font-size: 18px;
    }

    /*.container-fluid.newsshops {
        width: 960px;
    }*/

    /*.shop-item.shop-col-count {
        width: 193px;
        height: 193px;
        margin: 6px;
    }*/

    /*.box-width {
        width: 193px;
    }
    .box-height{
        height: 193px;
    }
    .box-margin{
        margin: 6px;
    }*/

    /*.shop-item-div2 {
        width: 193px;
        height: 193px;
        margin: 6px;
    }*/

}

@media (min-width: 1400px) {
    .newsshops {
        padding-top: 7%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 960px;
    }*/
}

@media (min-width: 1799px) {
    .newsshops {
        padding-top: 5%;
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   Touch und Mobile

   Bewusst am Ende und ausschliesslich mit max-width: alles ab 992px bleibt
   unberuehrt. Die Regeln oben sind kumulativ (min-width), deshalb liesse sich
   ein Wert wie die Feldhoehe sonst nur an fuenf Stellen gleichzeitig aendern.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* iOS Safari zoomt die Seite selbsttaetig, sobald ein Eingabefeld unter
       16px liegt -- danach springt das Layout beim Antippen. Die Stufen oben
       setzten 9px, 10px und 14px. */
    .form-control,
    .form,
    input.login,
    input.login.small,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }

    /* WCAG 2.2 verlangt unter 2.5.8 mindestens 24x24 CSS-Pixel Trefferflaeche,
       Apple empfiehlt 44pt. Die Felder waren mit `font-size: 9px` und
       `padding: 2px 12px` rund 13px hoch. */
    .form-control,
    input.login,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        padding: 8px 12px;
    }

    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* .btn-close rechnet mit box-sizing: content-box. 24px Inhalt plus 10px
       Innenabstand ergeben die 44px Trefferflaeche, das Kreuz bleibt 20px. */
    .btn-close {
        width: 24px;
        height: 24px;
        padding: 10px;
        background-size: 20px;
        opacity: 0.75;
    }

    .modal-header .close {
        font-size: 24px;
        padding: 10px;
        opacity: 0.75;
    }
}

/* Die Admin-Listen (Shop/Index, LogList, Users/Index und neun weitere) sind
   breiter als ein Telefon und schoben bisher das ganze Seitenlayout auf.
   Bootstrap loest das mit einem Wrapper um die Tabelle (.table-responsive);
   dieselbe Wirkung erreicht die Tabelle hier selbst -- so gilt es auch fuer
   Listen, die spaeter dazukommen, ohne zwoelf Views anzufassen.
   Bewusst nur `table.table`: in _LayoutMyAccount traegt auch ein <div> diese
   Klasse. */
@media (max-width: 767.98px) {
    table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Schrift steckt im PNG. Am Telefon den CSS-Rand streichen, damit
       die Buchstaben groesser werden — ohne cover, das wuerde die
       erste Zeile abschneiden. newbox bleibt gleich breit. */
    .shop-teaser {
        padding: 0 2% 1% 2%;
    }

    .newbox {
        margin-left: 2%;
        margin-right: 2%;
        width: 96%;
    }

    /* Gewinnt gegen .slick-slide > div { height:550px } aus dem alten
       Bundle. Die Buehne ist 183px; bleibt die Innenbox 550, zoomt
       cover nur die linke obere Ecke. */
    .stage,
    .stage .slider,
    .stage .slick-carousel,
    .stage .slick-list,
    .stage .slick-track,
    .stage .slick-slide,
    .stage .slick-slide > div,
    .stage .sliderslideimg {
        height: 183px !important;
        max-height: 183px;
    }
}

/* Unter 576px laufen die Dialoge als Vollbild (modal-fullscreen-sm-down).
   Die Altregeln setzten `top: 50px` und feste Hoehen auf .modal-content und
   .modal-body -- damit ragte der Dialog unten aus dem Bild und der Inhalt war
   nicht erreichbar, weil zusaetzlich per JS `position: fixed` gesetzt wurde. */
@media (max-width: 575.98px) {

    .modal-dialog.modal-fullscreen-sm-down {
        top: 0;
        left: 0;
        width: 100vw;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content,
    .modal-fullscreen-sm-down .modal-content.teaser,
    .modal-fullscreen-sm-down .modal-content.info {
        width: 100% !important;
        height: 100%;
        max-height: 100%;
    }

    /* Kopf und Fuss muessen stehen bleiben, damit "Jetzt zum Shop" sichtbar
       ist; scrollen darf nur der Rumpf. */
    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
        flex-shrink: 0;
    }

    .modal-fullscreen-sm-down .modal-body,
    .modal-fullscreen-sm-down .modal-body.teaser,
    .modal-fullscreen-sm-down .modal-content > .infotext {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
    }

    /* Ohne Teasertext den Rumpf nicht strecken — sonst sitzt der Button
       unten am Bildschirm und die Lücke liegt dazwischen. */
    #shopInfo .modal-body.teaser {
        flex: 0 1 auto;
    }

    /* #textInfo ist nur ein kurzer Anmeldehinweis. Nicht Vollbild:
       sonst füllt .infotext das Telefon und die Knöpfe wirken verloren. */
    #textInfo .modal-dialog.modal-fullscreen-sm-down {
        top: 48px;
        left: 5%;
        width: 90%;
        max-width: 90%;
        height: auto;
        margin: 0;
        max-height: calc(100dvh - 64px);
    }

    #textInfo .modal-fullscreen-sm-down .modal-content.info {
        height: auto !important;
        max-height: none;
    }

    #textInfo .modal-content > .infotext {
        flex: 0 1 auto;
        height: auto;
        overflow: visible;
    }
}