<style>
    /* raleway-100 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 100;
        src: url('../fonts/raleway-v34-latin-100.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-200 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 200;
        src: url('../fonts/raleway-v34-latin-200.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-300 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/raleway-v34-latin-300.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-regular - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-500 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 500;
        src: url('../fonts/raleway-v34-latin-500.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-600 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 600;
        src: url('../fonts/raleway-v34-latin-600.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-700 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 700;
        src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* raleway-800 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 800;
        src: url('../fonts/raleway-v34-latin-800.woff2') format('woff2');
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* comic-neue-regular - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Comic Neue';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/comic-neue-v8-latin-regular.eot');
        /* IE9 Compat Modes */
        src: url('../fonts/comic-neue-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('../fonts/comic-neue-v8-latin-regular.woff2') format('woff2'),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url('../fonts/comic-neue-v8-latin-regular.woff') format('woff'),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
            url('../fonts/comic-neue-v8-latin-regular.ttf') format('truetype'),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
            url('../fonts/comic-neue-v8-latin-regular.svg#ComicNeue') format('svg');
        /* Legacy iOS */
    }

    /* comic-neue-700 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Comic Neue';
        font-style: normal;
        font-weight: 700;
        src: url('../fonts/comic-neue-v8-latin-700.eot');
        /* IE9 Compat Modes */
        src: url('../fonts/comic-neue-v8-latin-700.eot?#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('../fonts/comic-neue-v8-latin-700.woff2') format('woff2'),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url('../fonts/comic-neue-v8-latin-700.woff') format('woff'),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
            url('../fonts/comic-neue-v8-latin-700.ttf') format('truetype'),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
            url('../fonts/comic-neue-v8-latin-700.svg#ComicNeue') format('svg');
        /* Legacy iOS */
    }

    /* pacifico-regular - latin */
    @font-face {
        font-display: swap;
        font-family: 'Pacifico';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/pacifico-v22-latin-regular.eot');
        /* IE9 Compat Modes */
        src: url('../fonts/pacifico-v22-latin-regular.eot?#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('../fonts/pacifico-v22-latin-regular.woff2') format('woff2'),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url('../fonts/pacifico-v22-latin-regular.woff') format('woff'),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
            url('../fonts/pacifico-v22-latin-regular.ttf') format('truetype'),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
            url('../fonts/pacifico-v22-latin-regular.svg#Pacifico') format('svg');
        /* Legacy iOS */
    }
    @font-face {
    font-family: 'iG-Headerfont';
    src: url('../fonts/iG-Headerfont.eot');
    src: url('../fonts/iG-Headerfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/iG-Headerfont.woff2') format('woff2'),
        url('../fonts/iG-Headerfont.woff') format('woff'),
        url('../fonts/iG-Headerfont.ttf') format('truetype'),
        url('../fonts/iG-Headerfont.svg#iG-Headerfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




    :root {
        --star-size: 20px;
        --star-color: #fff;
        --star-background: #fc0;
        --main-fontColor: #333;
        --column-gap: 20px;
        --row-gap: 20px;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    body {
        background: #156C6F;
        background: linear-gradient(to right, #004c5b 0%, #004c5b 34%, #0b0759 100%);
        font-family: 'Comic Neue', Helvetica, Arial, sans-serif;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 var(--column-gap);
    }

    #masterhead {
        position: relative;
        z-index: 9999;
        background: #156C6F;
        background: linear-gradient(to right, #004c5b 0%, #004c5b 34%, #0b0759 100%);




        text-align: center;
        color: white;
    }

    #masterhead img {
        margin-left: 1%;
        margin-top: 0.5%;
        margin-bottom: 0.5%;
        max-width: 200px;
        filter: drop-shadow(1px 1px 2px black);
        -webkit-filter: drop-shadow(1px 1px 2px black);

    }

    /*Navigationen*/
    nav#topnav {
        position: sticky;
        top: 0;
        z-index: 9999;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4), -2px -5px 10px rgba(0, 0, 0, 0.4);
        background: #222;
    }

    nav#topnav #logo_nav {
        position: absolute;
        top: 50%;
        left: 1%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0 !important;
        display: none;
    }

    /* topnav */
    #topnav_inner>ul {
        display: flex;
        list-style: none;
        width: fit-content;
        margin: 0 auto;
    }

    #topnav ul li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: wheat;
        font-size: 1.2rem;
        font-weight: 500;
        /*text-transform: uppercase;
    */
        transition: 0.1s;
    }

    #topnav a.active {
        font-weight: bold;
    }

    #topnav ul ul {
        position: absolute;
        /*display: none;*/
        background: #222;
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s;
    }

    #topnav li:hover ul {
        /*display: block;*/
        max-height: 500px;
    }

    /* ende topnav*/
    #topnav_inner {
        position: relative;
    }

    #cart_nav {

        position: absolute;
        right: 2%;
        top: 0;
    }

    #cart_nav img {
        max-height: 40px;
        filter: drop-shadow(1px 1px 5px black);
    }

    #display_basket_anzahl {
        position: absolute;
        right: -12px;
        background: white;
        border-radius: 50%;
        border: 2px solid black;
        min-width: 22px;
        padding: 2px;
        text-align: center;
        line-height: 16px;
        color: green;
        font-weight: bold;
        z-index: 9999;
        display: none;
    }

    /* sideNav */
    #sideNavCont {
        border: 1px solid black;
        padding: 4%;
        margin-bottom: var(--row-gap);
    }

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

    #sideNav li.expanded>ul {
        display: block;
    }

    #sideNav li>ul {
        display: none;
        margin-left: 10px;
    }

    #sideNav a.active {
        font-weight: bold;
        color: red;
    }

    #headerimg {
        background: black;
        position: relative;
    }

    #headerimg>img {
        width: 100%;
        /*position: fixed; */
        top: 0;
        z-index: 1;
        /*min-height: 200px;*/
        object-fit: cover;
        object-position: center;
        border-bottom: 1px solid black;
    }

    .stickyNav {
        position: fixed !important;
        width: 100%;
        z-index: 999;
        top: 0;
    }

    main {
        padding: 2% !important;
        background: #222;
        color: var(--main-fontColor);
        min-height: 800px;
        border: 1px solid black;
        /* margin-top: 1% !important; */
        /* margin-bottom: 1% !important; */
        box-shadow: 0 0 10px black;
    }

    main h1 {
        text-align: center;
    }

    main .pageTitle {
        /* border: 1px solid black; */
        padding: 1%;
        padding-top: 0;
        margin-bottom: var(--column-gap);
        /* background: url(../img/bg_wall.webp); */
        /*background: url(../img/half_radial.svg);*/
        /* background-position: center; */
        background-position: bottom;
    }

    .pageTitleContainer {
        filter: drop-shadow(0px 0px 2px black);
        width: fit-content;
        margin: 0 auto;
    }

    .pageTitleContainer div {

        background: #fcfc88;
        clip-path: polygon(10% 0%, 15% 5%, 20% 0%, 25% 5%, 30% 0%, 35% 5%, 40% 0%, 45% 5%, 50% 0%, 55% 5%,
                60% 0%, 65% 5%, 70% 0%, 75% 5%, 80% 0%, 85% 5%, 90% 0%, 95% 5%, 100% 0%,
                95% 10%, 100% 15%, 95% 20%, 100% 25%, 95% 30%, 100% 35%, 95% 40%, 100% 45%, 95% 50%,
                100% 55%, 95% 60%, 100% 65%, 95% 70%, 100% 75%, 95% 80%, 100% 85%, 95% 90%, 100% 95%,
                90% 100%, 85% 95%, 80% 100%, 75% 95%, 70% 100%, 65% 95%, 60% 100%, 55% 95%, 50% 100%,
                45% 95%, 40% 100%, 35% 95%, 30% 100%, 25% 95%, 20% 100%, 15% 95%, 10% 100%, 5% 95%,
                0% 90%, 5% 85%, 0% 80%, 5% 75%, 0% 70%, 5% 65%, 0% 60%, 5% 55%, 0% 50%,
                5% 45%, 0% 40%, 5% 35%, 0% 30%, 5% 25%, 0% 20%, 5% 15%, 0% 10%, 5% 5%);
        border-radius: 50%;
    }

    .pageTitle h1 {
        position: relative;
        padding: 15px 50px 0px 50px;
        color: #2d2d2d;
        font-family: 'iG-Headerfont', sans-serif;
        font-weight: normal;
        font-size: 3rem;
        text-align: center;

    }

    .pageTitle p {
        padding-bottom: 10px;
    }


    main .anzProd {
        text-align: center;
        font-style: italic;
    }


    .article__hr {
        border: none;
        border-top: 1px solid #999;
        margin: 10px 0;
    }

    /* Detail-Page  img-slider */
    .splide__list {
        height: auto;
        transform-style: flat;
    }

    .splide__slide img {
        width: 100%;
        height: auto;
    }

    .splide__slide {
        opacity: 0.3;
    }

    .splide__slide.is-active {
        opacity: 1;
    }

    #detail-block {
        display: flex;
        justify-content: space-between;
    }

    #detail-block__images {
        width: 50%;
    }

    #main-slider {
        width: 80%;
        margin: 0 auto;
    }

    #main-slider .splide__arrow {
        background: transparent;
    }

    #main-slider .splide__arrow--prev {
        left: -2.5rem;
    }

    #main-slider .splide__arrow--next {
        right: -2.5rem;
    }

    #main-slider-track {
        border: 1px solid #444;
        box-shadow: 0 0 7px gray;
        border-radius: 4.5%;
        margin-bottom: 5%;
    }

    .splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,
    .splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
        border: 1px solid #444 !important;
        opacity: 1 !important;
    }

    #thumbnail-slider .splide__slide {
        opacity: 0.6;
        border-radius: 10px;
        border: 1px solid gray !important;
    }

    #thumbnail-slider .splide__slide {
        margin-right: 1% !important;
    }

    /* Rating-Stars mit prozentualer Füllung - --rating -> Wert kommt aus inline-style der die % angibt*/
    .stars-landing {
        --percent: calc(var(--rating) / 5 * 100%);
        display: inline-block;
        font-size: var(--star-size);
        font-family: Times;
        line-height: 1;
        text-align: left;
        letter-spacing: -4px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .stars-landing::before {
        content: '★★★★★';
        letter-spacing: -4px;
        background: linear-gradient(90deg, var(--star-background) 0%, var(--star-background) var(--percent), rgba(0, 0, 0, 1) var(--percent), rgba(0, 0, 0, 1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block;
        position: absolute;
        font-family: Times;

        /*transform: translatey(20px);
    -webkit-transform: translatey(20px);
    -moz-transform: translatey(20px);
    -ms-transform: translatey(20px);
    -o-transform: translatey(20px);*/
    }

    .nameRatingBox {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .nameRatingBox table td:first-child {
        padding-right: 10px;
    }

    .nameRatingBox td {
        color: var(--main-fontColor);
        ;
    }

    /* ende rating-stars */
    /*rating Histogram*/
    .customer-reviews__histogram-row {
        display: flex;
        justify-content: flex-end;
        margin-top: .5rem;
    }

    .customer-reviews__histogram__btn {
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        flex: 0 1 auto;
        font: inherit;
        max-width: 10em;
        outline: none;
        overflow: hidden;
        padding: 0;
        text-align: inherit;
    }

    .customer-reviews__histogram-bar {
        border: 1px solid;
        display: flex;
        flex: 0 0 auto;
        height: 1rem;
        margin: 0 1rem;
        width: 10rem;
    }

    .customer-reviews__histogram-bar__inner {
        background-color: black;
    }

    .customer-reviews__histogram-count {
        flex: 0 0 auto;
        min-width: 4rem;
        width: calc(100% - 20rem);
    }

    /* Dropup-Content standardmäßig ausblenden */
    #dropup__content {
        display: none;
        position: relative;
        background-color: white;
        border: 1px solid #ccc;
        padding: var(--column-gap);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Schließen-Button (x) stylen */
    #dropup__content .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    /* available colors-anzeige*/
    .color-boxes a {
        text-decoration: none;
        padding: 2px;
        display: inline-block;
        border-radius: 50%;
        border: 1px solid #999;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }

    .color-box {
        display: inline-block;
        width: 30px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        vertical-align: bottom;
    }

    .color-boxes a:has(p.currentAppearance) {
        border: 2px solid black;
    }

    .size-box {
        display: inline-block;
        width: fit-content;
        height: 40px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #999;
        text-align: center;
        line-height: 28px;
        /* Vertically center the text */
    }

    .activeSize {
        border: 2px solid black;
        line-height: 26px;
    }


    .size-box[data-available="1"] {
        cursor: pointer;
    }

    .size-box[data-available=""] {
        color: yellow;
    }

    /* Overlay Masstabelle */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .overlay-content {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: var(--column-gap);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 80%;
        max-width: 600px;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    #size-chart {
        display: flex;
        justify-content: space-between;
    }

    #size-chart div {
        margin-right: 10px;
        max-width: 200px;
    }

    #size-chart table {
        flex: 1;
        color: var(--main-fontColor);
    }

    #size-chart table tr.sizeNotAvail {
        color: lightgray;
    }

    #size-chart table th,
    td {
        text-align: center;
    }

    #size-chart table td:first-child,
    #size-chart table th:first-child {
        text-align: left;
    }

    .overlay-content p {
        width: 100%;
        text-align: center;
        margin-top: 2%;
    }

    .overlay-content h2 {
        text-align: center;
    }

    /* Ende Overlay Masstabelle */

    /*alle Produkte Liste*/
    /* Filter-Anzeige */
    #aktiveFilters {
        display: flex;
        flex-direction: column;
        width: fit-content;
        border: 1px solid black;
        margin: 0 auto var(--row-gap) auto;
        padding: 10px;
        background: #f9d1f9;
    }

    .filter-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
    }

    .filter-item .removeFilter {
        cursor: pointer;
        color: white;
        margin: 0 5px;
        display: inline-block;
        background: #01465B;
        background: linear-gradient(to right, #004c5b 0%, #004c5b 34%, #0b0759 100%);
        box-shadow: 2px 2px 2px grey;
        padding: 5px;
        line-height: 10px;
        /* border-radius: 50%; */
        font-weight: bold;
    }

    .filter-item .fett {
        font-weight: bold;
    }

    #aktiveFilters button {
        background: #01465B;
        background: linear-gradient(to right, #004c5b 0%, #004c5b 34%, #0b0759 100%);
        color: white;
        padding: 5px 10px;
        border: none;
        box-shadow: 2px 2px 2px grey;
        margin: 0 auto;
        cursor: pointer;
        font-family: 'Comic Neue', Helvetica, Arial, sans-serif;
        ;
    }

    #aktiveFilters h4 {
        text-align: center;
    }

    /* Mobile View */
    @media (max-width: 768px) {
        .filter-container {
            flex-direction: column;
        }
    }

    /* Ende Filter-Anzeige */

    #main_content {
        display: flex;
        hyphens: auto;
    }

    #main_content #filter {
        width: 20%;
        padding-right: var(--column-gap);
    }

    #filter h3{
        margin-bottom: var(--column-gap);
        background-position: center;
        font-weight: normal;
        font-size: 1.5rem;
        border: 1px solid black;
        padding: 10px;
    }

    #main_content #produktAnzeige {
        width: 80%;
    }

    #produktAnzeige h1 {
        text-align: center;
    }

    /* #products {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    } */
    #products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-column-gap: var(--column-gap);
        /* Horizontaler Abstand */
        grid-row-gap: var(--row-gap);
        /* Vertikaler Abstand */
    }

    @media (max-width: 548px) {
        #products {
            justify-items: center;
        }
    }

    #products .product {
        /* max-width: 100%; */
        min-width: 200px;
        max-width: 300px;
        position: relative;
        border: 1px solid black;
        box-shadow: 0 0 10px transparent;
        -webkit-filter: saturate(0.6);
        filter: saturate(0.6);
    }

    /* Dynamische Hintergrundbilder für Produkte */
    /* TODO: retina-Display abdecken mit Bilder in 2x (noch hochzuladen) */
    #products .product:nth-child(18n+1) {
    background: url(../img/productBgs/01_blueSquirel.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+2) {
    background: url(../img/productBgs/02_bunt.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+3) {
    background: url(../img/productBgs/03_blueStarburst1.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+4) {
    background: url(../img/productBgs/04_flieder.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+5) {
    background: url(../img/productBgs/05_blueStarburst2.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+6) {
    background: url(../img/productBgs/06_greenStarburst.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+7) {
    background: url(../img/productBgs/07_blueWhite.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+8) {
    background: url(../img/productBgs/10_blueWhite2.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+9) {
    background: url(../img/productBgs/11_orangeWhite.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+10) {
    background: url(../img/productBgs/12_blueYellowStarburst.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+11) {
    background: url(../img/productBgs/13_orangeYellow.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+12) {
    background: url(../img/productBgs/15_orangeYellow2.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+13) {
    background: url(../img/productBgs/16_lblueWithDots.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+14) {
    background: url(../img/productBgs/17_orangeYellow3.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+15) {
    background: url(../img/productBgs/18_pastell.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+16) {
    background: url(../img/productBgs/20_YellowRed.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+17) {
    background: url(../img/productBgs/21_pinkStarburst.jpg) no-repeat center center;
    background-size: cover;
}
#products .product:nth-child(18n+18) {
    background: url(../img/productBgs/24_yellowStarburst.jpg) no-repeat center center;
    background-size: cover;
}
#products .product .prodDetails span {
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #products .product .prodDetails {
        position: relative;
        background: white;
        padding: 15px;
        z-index: 10;
        width: 98%;
        text-align: center;
        border-radius: 50%;
        border: 1px solid black;
        margin: 4px auto 6px auto;
        box-shadow: 0 0 1px black;
    }

    #products .product .prodDetails::before {
        content: '';
        position: absolute;
        bottom: -10px;
        /* Position des Dreiecks */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid white;
        z-index: -1;
    }

    #products .product .prodDetails::after {
        content: '';
        position: absolute;
        bottom: -12px;
        /* Position des äußeren Dreiecks */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid black;
        z-index: -2;
    }

    #products .product .prodImgCont {
        padding-bottom: 8px;
    }

    #products .product img {
        filter: drop-shadow(4px 4px 8px black);
        -webkit-filter: drop-shadow(4px 4px 8px black);
        transform: scale(1);
        transition: all 0.3s;
    }

    #products .product:hover .prodImgCont img {
        transform: scale(1.1);
    }

    #products .product a {
        text-decoration: none;
        color: black;
        font-weight: normal;
        font-size: 1rem;
    }

    #products .product .color-boxes a {
        border: none;
    }

    #products .product h3 {
        font-weight: normal;
        font-size: 1.1rem;
        text-overflow: ellipsis;
        text-align: center;
    }

    #products .product h3 span {
        /* font-style: italic; */
        display: inline-block;
        margin-top: 2px
    }

    #products .product .price {
        font-weight: bold;
        font-size: .875rem;
        text-align: center;
        margin: 6px 0;
        margin-bottom: 0;
    }

    .product .sizes {
        display: flex;
        justify-content: center;
        margin: 6px 0;
    }

    .product .sizes p {
        margin: 0 4px;
        font-size: .875rem;
        font-weight: 500;
    }


    /* color-boxes auf Page alle Produkte */
    #products .color-boxes,
    #filter .color-boxes {
        display: flex;
        justify-content: center;
        margin: 6px 0;
    }

    #filter .color-boxes {
        flex-wrap: wrap;
    }

    #products .color-boxes div,
    #filter .color-boxes div {
        position: relative;
        padding: 1px;
        display: inline-block;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin: 0 1px;
    }

    #products .color-boxes div {
        border: 1px solid #999;
    }

    #filter .activeColorFilter::after {
        content: '✔';
        /* Das Häkchen-Symbol */
        color: var(--checkmark-color, green);
        /* Farbe des Häkchens */
        font-size: 1.2rem;
        /* Größe des Häkchens */
        position: absolute;
        /* Positionierung */
        top: 50%;
        /* Vertikale Ausrichtung */
        left: 50%;
        /* Horizontale Ausrichtung */
        transform: translate(-50%, -50%);
        /* Zentrieren */
        background-color: transparent;
        /* Hintergrundfarbe des Häkchens */
        border-radius: 50%;
        /* Rundes Häkchen */
        padding: 2px;
        /* Abstand um das Häkchen */
    }

    #products .color-box {
        display: inline-block;
        width: 18px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        vertical-align: bottom;
    }

    #filter .color-box {
        display: inline-block;
        width: 20px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        vertical-align: bottom;
    }

    #filter .size-boxes {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .new-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #fc0;
        color: black;
        padding: 5px;
        border-radius: 0 10px 0 10px;
        font-size: 1rem;
        font-weight: bold;
        -webkit-border-radius: 0 10px 0 10px;
        -moz-border-radius: 0 10px 0 10px;
        -ms-border-radius: 0 10px 0 10px;
        -o-border-radius: 0 10px 0 10px;
    }

    .loading {
        display: none;
        text-align: center;
        padding: 10px;
        font-size: 16px;
    }

    /* pagination */
    #pagination {
        border: 1px solid #999;
        border-right: none;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        width: fit-content;
        margin: 0 auto;
        background: white;
    }

    #pagination a,
    #pagination span {
        display: inline-block;
        padding: 8px 16px;
        border-right: 1px solid #999;
        text-decoration: none;
        color: black;
    }

    #pagination span:last-child,
    #pagination a:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-top-right-radius: 5px;
        -moz-border-bottom-right-radius: 5px;
        -ms-border-top-right-radius: 5px;
        -ms-border-bottom-right-radius: 5px;
        -o-border-top-right-radius: 5px;
        -o-border-bottom-right-radius: 5px;
    }

    #pagination span {
        color: #999;
    }

    #pagination span.current-page,
    #pagination a:hover {
        background: #999;
        color: white;
    }

    /* end pagination */

    /* FOOTER*/
    footer {
        background: #222;
        color: white;
        box-shadow: -2px -5px 10px rgba(0, 0, 0, 0.4);
    }

    #footerContainer {
        display: flex;
        justify-content: space-between;
        padding: var(--column-gap);
    }

    footer a {
        color: white;
        text-decoration: none;
    }

    footer a:hover {
        color: #fc0;
    }

    footer ul {
        list-style: none;
    }

    /* ENDE Footer */

    /*promo-Banner*/
    .promo_description {
        display: none;
    }

    .promo_arrow {
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
        transition: transform 0.3s ease;
    }

    .promo_toggle_text {
        vertical-align: middle;
    }

    #promo_info {
        display: none;
    }

    /* end promo-Banner*/

    /* error/success-box*/
    .hidden {
        display: none !important;
    }

    #error-message,
    #success-message {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        background: white;
        border: 2px solid #333;
        padding: 10px;
        font-size: 16px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 99999;
        display: flex;
        align-items: center;
        gap: 10px;
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translate(-50%, -20%);
        -moz-transform: translate(-50%, -20%);
        -ms-transform: translate(-50%, -20%);
        -o-transform: translate(-50%, -20%);
    }

    #error-text {
        color: red;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 2%;
        text-align: center;
        border: 1px solid red;
        background: #FFFBDD;
    }

    #success-text {
        color: darkgreen;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 2%;
        text-align: center;
        border: 1px solid darkgreen;
        background: #FFFBDD;
    }

    #close-error,
    #close-success {
        cursor: pointer;
        font-size: 2.5rem;
        font-weight: bold;
        margin-left: auto;
        display: inline-block;
        position: absolute;
        top: 42%;
        right: 0;
        transform: translateY(-42%);
    }

    .close-success {
        cursor: pointer;
    }

    #close-error:hover {
        color: black;
    }

    /*end error/success-box*/

    #sketchomat {
        width: 100%;
    }

    /* basket */
    #basketContent {
        display: flex;
        justify-content: space-between;
        max-width: 1000px;
        margin: 0 auto;
    }

    .basketItem {
        display: flex;
        flex-direction: column;
        margin-bottom: 78px;
    }

    .basketItem img {
        width: 150px;
        height: auto;
    }

    .basketItem>div:first-child {
        display: flex;
        justify-content: space-between;
    }

    .ItemQuantity {
        display: flex;
        justify-content: flex-end;
    }

    .quantityHolder {
        display: flex;
        align-items: center;
        border: 1px solid darkgray;
        margin-right: 10px;
    }

    /* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
    .quantityHolder input[type="number"]::-webkit-outer-spin-button,
    .quantityHolder input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Für Firefox */
    .quantityHolder input[type="number"] {
        -moz-appearance: textfield;
        /*standard*/
        appearance: textfield;
    }

    .quantityHolder input {
        padding: 0.25rem;
        border: none;
        margin: 0;
        padding: 0 0.5rem;
        border: none;
        width: 20px;
        text-align: center;
        box-sizing: content-box;
        flex: 0 0 auto;
        font-size: 0.9rem;
    }

    .quantityHolder button {
        background: transparent;
        border: none;
        padding: 0 0.5rem;
        cursor: pointer;
        font-size: 1.6rem;
    }

    .quantityHolder button:first-child {
        border-right: 1px solid darkgray;
    }

    .quantityHolder button:last-child {
        border-left: 1px solid darkgray;
    }

    /* end basket */
</style>