/* ----------- Alex Definition der Backwinkel Hauptfarben ----------- */

:root {
    --bw-hex-01: #fff8dd;
    --bw-rgb-01: 255, 248, 221;
    --bw-hex-02: #faf1c4;
    --bw-rgb-02: 250, 241, 196;
    --bw-hex-03: #faead6;
    --bw-rgb-03: 250, 234, 214;
    --bw-hex-04: #deb787;
    --bw-rgb-04: 222, 183, 135;
    --bw-hex-05: #f0f3d3;
    --bw-rgb-05: 240, 243, 211;
    --bw-hex-06: #e0e79f;
    --bw-rgb-06: 224, 231, 159;
    --bw-hex-07: #b1cd01;
    --bw-rgb-07: 177, 205, 1;
    --bw-hex-08: #f1d1e4;
    --bw-rgb-08: 241, 209, 228;
    --bw-hex-09: #d994bc;
    --bw-rgb-09: 217, 148, 188;
    --bw-hex-10: #e3e3f3;
    --bw-rgb-10: 227, 227, 243;
    --bw-hex-11: #f6f5f6;
    --bw-rgb-11: 246, 245, 246;
    --bw-hex-12: #dcd8de;
    --bw-rgb-12: 220, 216, 222;
    --bw-hex-13: #f0f9fe;
    --bw-rgb-13: 240, 249, 254;
    --bw-hex-14: #d0e2f1;
    --bw-rgb-14: 208, 226, 241;
    --bw-hex-15: #85a6cc;
    --bw-rgb-15: 133, 166, 204;
    --bw-hex-16: #4a6391;
    --bw-rgb-16: 74, 99, 145;
    --bw-hex-17: #8a140c;
    --bw-rgb-17: 138, 20, 12;
    --bw-hex-18: #007282;
    --bw-rgb-18: 0, 114, 130;
    --bw-hex-ge: #ffff05;
    --bw-rgb-ge: 255, 255, 5;
    --bw-hex-ro: #ff2700;
    --bw-rgb-ro: 255, 39, 0;
    --bw-hex-eb: #ebebeb;
    --bw-rgb-eb: 235, 235, 235;
    --bw-hex-cc: #cccccc;
    --bw-rgb-cc: 204, 204, 204;
    --bw-hex-99: #999999;
    --bw-rgb-99: 153, 153, 153;
    --bw-hex-70: #707070;
    --bw-rgb-70: 112, 112, 112;
    /*  Logo grün und blau */
    --bw-hex-lg: #87bc21;
    --bw-rgb-lg: 135, 188, 33;
    --bw-hex-lb: #009de2;
    --bw-rgb-lb: 0, 157, 226;
    /*
    ks -> 09 -> Kindergarten und Spielen
    ma -> 04 -> Möbel und Ausstattung
    sl -> 15 -> Schule, Lernen und Lehren
    dl -> 16 -> Digitales Lernen
*/
    --bw-hex-ma: var(--bw-hex-04);
    --bw-rgb-ma: var(--bw-rgb-04);
    --bw-hex-ks: var(--bw-hex-09);
    --bw-rgb-ks: var(--bw-rgb-09);
    --bw-hex-sl: var(--bw-hex-15);
    --bw-rgb-sl: var(--bw-rgb-15);
    --bw-hex-dl: var(--bw-hex-16);
    --bw-rgb-dl: var(--bw-rgb-16);
    --bw-hex-bg: rgba(250, 234, 214, 0.4);

    /* Lieferzeit: nicht im Lager */
    --bw-notOnStock: var(--bw-hex-18);
}

/* --- Standard Abstände ------------------------------ */

@media (min-width: 992px) {
    :root {
        --bw-space: 20px;
        --bw-rcmgn: 30px;
    }
}

@media (max-width: 991px) {
    :root {
        --bw-space: 10px;
        --bw-rcmgn: 30px;
    }
}

/* ----------- Schrift URW Grotesk Extra Narrow --------- */

@font-face {
    font-family: 'URWGroteskExtNarW05-Regular';
    src: url('/out/wave_child/src/fonts/URWGroteskExtNarW05-Regular.woff2')format('woff2'), url('/out/wave_child/src/fonts/URWGroteskExtNarW05-Regular.woff')format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'URWGroteskExtNarMedW05-Rg';
    src: url('/out/wave_child/src/fonts/URWGroteskExtNarMedW05-Rg.woff2')format('woff2'), url('/out/wave_child/src/fonts/URWGroteskExtNarMedW05-Rg.woff')format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'URWGroteskExtNarLigW05-Rg';
    src: url('/out/wave_child/src/fonts/URWGroteskExtNarLigW05-Rg.woff2')format('woff2'), url('/out/wave_child/src/fonts/URWGroteskExtNarLigW05-Rg.woff')format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'URWGroteskExtNarExtLigW05';
    src: url('/out/wave_child/src/fonts/URWGroteskExtNarExtLigW05.woff2')format('woff2'), url('/out/wave_child/src/fonts/URWGroteskExtNarExtLigW05.woff')format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.bw-f-ugen-reg {
    font-family: 'URWGroteskExtNarW05-Regular';
    font-weight: normal;
    font-style: normal;
}

.bw-f-ugen-med {
    font-family: 'URWGroteskExtNarMedW05-Rg';
    font-weight: normal;
    font-style: normal;
}

.bw-f-ugen-lig {
    font-family: 'URWGroteskExtNarLigW05-Rg';
    font-weight: normal;
    font-style: normal;
}

.bw-f-ugen-exl {
    font-family: 'URWGroteskExtNarExtLigW05';
    font-weight: normal;
    font-style: normal;
}


/* ----------- Schrift LiebeErika ---------- */

@font-face {
    font-family: "liebeerika";
    src: url("/out/wave_child/src/fonts/liebeerika-700.woff2") format("woff2"), url("/out/wave_child/src/fonts/liebeerika-700.woff") format("woff");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "liebeerika";
    src: url("/out/wave_child/src/fonts/liebeerika-400.woff2") format("woff2"), url("/out/wave_child/src/fonts/liebeerika-400.woff") format("woff");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.bw-f-le-reg {
    font-family: 'liebeerika', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bw-f-le-bld {
    font-family: 'liebeerika', sans-serif;
    font-weight: 700;
    font-style: normal;
}


/* ----------- Alex Backwinkel Farben adäquat zu den bootstrap Text- und Backgroundfarben ----------- */

.bw-text-01 {
    color: var(--bw-hex-01);
}

.bw-bg-01 {
    background-color: var(--bw-hex-01);
}

.bw-text-02 {
    color: var(--bw-hex-02);
}

.bw-bg-02 {
    background-color: var(--bw-hex-02);
}

.bw-text-03 {
    color: var(--bw-hex-03);
}

.bw-bg-03 {
    background-color: var(--bw-hex-03);
}

.bw-text-04 {
    color: var(--bw-hex-04);
}

.bw-bg-04 {
    background-color: var(--bw-hex-04);
}

.bw-text-05 {
    color: var(--bw-hex-05);
}

.bw-bg-05 {
    background-color: var(--bw-hex-05);
}

.bw-text-06 {
    color: var(--bw-hex-06);
}

.bw-bg-06 {
    background-color: var(--bw-hex-06);
}

.bw-text-07 {
    color: var(--bw-hex-07);
}

.bw-bg-07 {
    background-color: var(--bw-hex-07);
}

.bw-text-08 {
    color: var(--bw-hex-08);
}

.bw-bg-08 {
    background-color: var(--bw-hex-08);
}

.bw-text-09 {
    color: var(--bw-hex-09);
}

.bw-bg-09 {
    background-color: var(--bw-hex-09);
}

.bw-text-10 {
    color: var(--bw-hex-10);
}

.bw-bg-10 {
    background-color: var(--bw-hex-10);
}

.bw-text-11 {
    color: var(--bw-hex-11);
}

.bw-bg-11 {
    background-color: var(--bw-hex-11);
}

.bw-text-12 {
    color: var(--bw-hex-12);
}

.bw-bg-12 {
    background-color: var(--bw-hex-12);
}

.bw-text-13 {
    color: var(--bw-hex-13);
}

.bw-bg-13 {
    background-color: var(--bw-hex-13);
}

.bw-text-14 {
    color: var(--bw-hex-14);
}

.bw-bg-14 {
    background-color: var(--bw-hex-14);
}

.bw-text-15 {
    color: var(--bw-hex-15);
}

.bw-bg-15 {
    background-color: var(--bw-hex-15);
}

.bw-text-16 {
    color: var(--bw-hex-16);
}

.bw-bg-16 {
    background-color: var(--bw-hex-16);
}

.bw-text-17 {
    color: var(--bw-hex-17);
}

.bw-bg-17 {
    background-color: var(--bw-hex-17);
}

.bw-text-18 {
    color: var(--bw-hex-18);
}

.bw-bg-18 {
    background-color: var(--bw-hex-18);
}

.bw-text-ge {
    color: var(--bw-hex-ge);
}

.bw-bg-ge {
    background-color: var(--bw-hex-ge);
}

.bw-text-ro {
    color: var(--bw-hex-ro);
}

.bw-bg-ro {
    background-color: var(--bw-hex-ro);
}

.bw-text-cc {
    color: var(--bw-hex-cc);
}

.bw-bg-cc {
    background-color: var(--bw-hex-cc);
}

.bw-text-eb {
    color: var(--bw-hex-eb);
}

.bw-bg-eb {
    background-color: var(--bw-hex-eb);
}

.bw-text-99 {
    color: var(--bw-hex-99);
}

.bw-bg-99 {
    background-color: var(--bw-hex-99);
}

.bw-text-70 {
    color: var(--bw-hex-70);
}

.bw-bg-70 {
    background-color: var(--bw-hex-70);
}


/* ----------- Alex Backwinkel Farben für die Warenkategorien adäquat zu den bootstrap Text- und Backgroundfarben ----------- */


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

.bw-text-ks {
    color: var(--bw-hex-ks);
}

.bw-bg-ks {
    background-color: var(--bw-hex-ks);
}

.bw-text-ma {
    color: var(--bw-hex-ma);
}

.bw-bg-ma {
    background-color: var(--bw-hex-ma);
}

.bw-text-sl {
    color: var(--bw-hex-sl);
}

.bw-bg-sl {
    background-color: var(--bw-hex-sl);
}

.bw-text-dl {
    color: var(--bw-hex-dl);
}

.bw-bg-dl {
    background-color: var(--bw-hex-dl);
}

.bw-text-lg {
    color: var(--bw-hex-lg);
}

.bw-bg-lg {
    background-color: var(--bw-hex-lg);
}

.bw-text-lb {
    color: var(--bw-hex-lb);
}

.bw-bg-lb {
    background-color: var(--bw-hex-lb);
}

.bw-bg-n {
    background-color: var(--bw-hex-ge);
}

.bw-bg-s {
    background-color: var(--bw-hex-ro);
}


/* ----------- Alex Schriftgrößen ---------- */

.bw-fs14 {
    font-size: 14px;
}

.bw-fs15 {
    font-size: 15px;
}

.bw-fs18 {
    font-size: 18px;
}

.bw-fs22 {
    font-size: 22px;
}

.bw-fs27 {
    font-size: 27px;
}

.bw-fs36 {
    font-size: 36px;
}

.bw-fs50 {
    font-size: 50px;
}


/* ----------- Stefan Definition: Schriften ---------- */

h1,
h2 {
    font-family: 'URWGroteskExtNarW05-Regular', Arial, Helvetica, sans-serif;
}

h1,
h2,
.h1,
.h2 {
    font-size: 41px;
}

h2,
.h2 {
    font-size: 34px;
}

h3,
h4 {
    font-family: 'URWGroteskExtNarLigW05-Rg', Arial, Helvetica, sans-serif;
}

h3,
h4,
.h3,
.h4 {
    font-size: 32px;
}

h4,
.h4 {
    font-size: 21px;
}

@media (max-width: 991px) {

    h1,
    .h1 {
        font-size: 22px;
    }

    h2,
    .h2 {
        font-size: 20px;
    }

    h3,
    .h3 {
        font-size: 19px;
    }

    h4,
    .h4 {
        font-size: 19px;
    }
}

body,
p {
    font-family: 'URWGroteskExtNarLigW05-Rg', Arial, Helvetica, sans-serif;
    font-size: 17px;
}

strong,
b {
    font-family: 'URWGroteskExtNarW05-Regular', Arial, Helvetica, sans-serif;
}


/* --- Farben abhängig vom body-Tag bw-category-*: bg = background, fg = foreground ------------------------------ */

.bw-category-none .bw-cat-bg {
    background-color: var(--bw-hex-lg)
}

.bw-category-ks .bw-cat-bg {
    background-color: var(--bw-hex-ks);
}

.bw-category-sl .bw-cat-bg {
    background-color: var(--bw-hex-sl);
}

.bw-category-ma .bw-cat-bg {
    background-color: var(--bw-hex-ma);
}

.bw-category-dl .bw-cat-bg {
    background-color: var(--bw-hex-dl);
}

.bw-category-s .bw-cat-bg {
    background-color: var(--bw-hex-ro);
}

.bw-category-n .bw-cat-bg {
    background-color: var(--bw-hex-ge);
}

.bw-category-none .bw-cat-fg,
.bw-category-none a:hover,
.bw-category-none .active .breadcrumb-link {
    color: var(--bw-hex-lg)
}

.bw-category-ks .bw-cat-fg,
.bw-category-ks a:hover,
.bw-category-ks .active .breadcrumb-link {
    color: var(--bw-hex-ks);
}

.bw-category-sl .bw-cat-fg,
.bw-category-sl a:hover,
.bw-category-sl .active .breadcrumb-link {
    color: var(--bw-hex-sl);
}

.bw-category-ma .bw-cat-fg,
.bw-category-ma a:hover,
.bw-category-ma .active .breadcrumb-link {
    color: var(--bw-hex-ma);
}

.bw-category-dl .bw-cat-fg,
.bw-category-dl a:hover,
.bw-category-dl .active .breadcrumb-link {
    color: var(--bw-hex-dl);
}


/* --- Bewertungssterne ------------------------------ */

.ratings-star-filled {
    color: #F3C50C;
}