/* --- Desktop ------------------------------ */

@media (min-width: 992px) {
    .bwSP-catBox {
        display: grid;
        display: -ms-grid;
        grid-template-columns: auto 276px auto;
        -ms-grid-columns: auto 20px 276px 20px auto;
        -ms-grid-rows: 1fr 20px 1fr;
        grid-gap: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .bwSp-ks {
        grid-column: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .bwSp-ma {
        grid-column: 3;
        grid-row: 2;
        -ms-grid-column: 5;
        -ms-grid-row: 3;
    }

    .bwSp-ib {
        display: block;
        grid-column: 2;
        grid-row: 1 / 3;
        -ms-grid-column: 3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
    }

    .bwSp-sl {
        grid-column: 3;
        grid-row: 1;
        -ms-grid-column: 5;
        -ms-grid-row: 1;
    }

    .bwSp-dl {
        grid-column: 1;
        grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .bwSp-offers {
        display: none;
    }
}

/* --- Mobile ------------------------------ */

@media (max-width: 991px) {
    .bwSP-catBox {
        display: grid;
        /* https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css */
        grid-template-columns: calc(50vw - 5px) calc(50vw - 5px);
        grid-template-rows: calc(50vw - 5px) calc(50vw - 5px);
        grid-gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .bwSp-ks {
        grid-column: 1;
        grid-row: 1;
    }

    .bwSp-ma {
        grid-column: 1;
        grid-row: 2;
    }

    .bwSp-ib {
        display: none;
    }

    .bwSp-sl {
        grid-column: 2;
        grid-row: 1;
    }

    .bwSp-dl {
        grid-column: 2;
        grid-row: 2;
    }

    .bwSP-info {
        display: none;
    }

    .bwSp-offers {
        display: block;
    }

    .bwSP-nsBox {
        display: grid;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        grid-gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .bwSp-new {
        grid-column: 1;
        grid-row: 1;
    }

    .bwSp-sale {
        grid-column: 2;
        grid-row: 1;
    }
}

/* --- Kategoriekarten ------------------------------ */

.bwSP-catBox>* {
    overflow: hidden;
}

/*
    ks -> 09 -> Kindergarten und Spielen
    ma -> 04 -> Möbel und Ausstattung
    sl -> 15 -> Schule, Lernen und Lehren
    dl -> 16 -> Digitales Lernen
*/

.bwSp-ks {
    aspect-ratio: 1;
    border: 4px solid var(--bw-hex-ks);
    background-color: white;
    cursor: pointer;
}

.bwSp-ma {
    aspect-ratio: 1;
    border: 4px solid var(--bw-hex-ma);
    background-color: white;
    cursor: pointer;
}

.bwSp-sl {
    aspect-ratio: 1;
    border: 4px solid var(--bw-hex-sl);
    background-color: white;
    cursor: pointer;
}

.bwSp-dl {
    aspect-ratio: 1;
    border: 4px solid var(--bw-hex-dl);
    background-color: white;
    cursor: pointer;
}

.bwSp-ks>img, .bwSp-ma>img, .bwSp-sl>img, .bwSp-dl>img {
    /*object-fit: contain;*/
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-height: 1px;
}

.bwSP-overlay {
    position: absolute !important;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 100%;
}

.bwSP-title {
    margin-bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    font-size: 48px;
    text-align: center;
    font-family: 'liebeerika', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bwSp-ks .bwSP-title {
    color: var(--bw-hex-ks);
}

.bwSp-ma .bwSP-title {
    color: var(--bw-hex-ma);
}

.bwSp-sl .bwSP-title {
    color: var(--bw-hex-sl);
}

.bwSp-dl .bwSP-title {
    color: var(--bw-hex-dl);
}

/* Font Scaling: 48px / 1200px = 0.04 das entspricht 4% von der Viewport Width also 4vw */

@media (max-width: 1200px) {
    .bwSP-title {
        font-size: calc(12px + 3vw);
    }

    .bwSP-info {
        font-size: calc(4.25px + 1.0625vw);
    }
}

/* --- Infobox ------------------------------ */

.bwSP-info {
    margin-bottom: 0;
    background-color: rgba(255, 255, 255, 0.86);
    color: var(--bw-hex-70);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.bwSp-ib {
    white-space: nowrap;
}

.bwSp-ib>p>img {
    height: 50px;
}

.bwSp-ib>p:nth-of-type(1) {
    font-family: 'URWGroteskExtNarLigW05-Rg';
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    text-align: center;
    color: var(--bw-hex-70);
    margin-top: 15px;
    padding-top: 1.5rem;
}

.bwSp-ib>p:nth-of-type(2) {
    text-align: right;
    margin-top: -2.6em;
}

.bwSp-ib>p:nth-of-type(3) {
    font-family: 'liebeerika', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: var(--primary);
}
.bwSp-ib>p:nth-of-type(3)>a {
    color: var(--primary);
}

/* --- Angebote ------------------------------ */

.bwSp-offers {
    font-family: 'liebeerika', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
}

.bwSp-benfit {
    font-size: 36px;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    color: var(--bw-hex-99);
}

.bwSp-new {
    display: flex;
    align-items: flex-end;
    justify-content: end;
    aspect-ratio: 1;
    background-color: var(--bw-hex-ge);
    color: var(--bw-hex-70);
    padding: 0 20px 0 10px;
}

.bwSp-sale {
    display: flex;
    align-items: flex-end;
    justify-content: end;
    aspect-ratio: 1;
    background-color: var(--bw-hex-ro);
    color: white;
    padding: 0 20px 0 10px;
}

/* --- weitere Media Einstellungen ------------------------------ */


@media (max-width: 1200px) {
    .bwSP-catBox {
        grid-template-columns: calc(50% - 10px - 105px) 210px calc(50% - 10px - 105px);
    }

    .bwSp-ib>p>img {
        height: 36px;
    }

    .bwSp-ib>p:nth-of-type(1) {
        font-size: 17px;
    }

    .bwSp-ib>p:nth-of-type(2) {
        margin-top: -2.2em;
    }

    .bwSp-ib>p:nth-of-type(3) {
        font-size: 24px;
    }
}


@media (max-width: 991px) {
    .bwSP-catBox {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        grid-template-rows: auto;
    }
}

@media (max-width: 474px) {
    .bwSP-title {
        font-weight: 700;
    }
}