body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('../images/Website-BG-Test.jpg'); */
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: 0.03;
    z-index: 0;
}

.Product {
    position: relative;
    top: calc(10vh);
    height: auto;
    width: 100vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    /* geändert von 'center' zu 'flex-start' */
    justify-content: center;
    flex-direction: column;
}


/* .Product::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/Website-BG-Test.jpg');
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: 0.05;
    z-index: 0;
} */

.shop-add-on {
    position: relative;
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
    min-height: 100vh;
    width: 100vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slider-container-Shop {
    position: relative;
    width: 90%;
    height: 100%;
    margin: auto;
    overflow: hidden;
}

#sliderWrapperShop {
    height: 100%;
}

#sliderWrapperShop .product {
    height: 90%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.image-container .imageSlide {
    width: 100%;
    height: 100%;
}


/* .shop-add-on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/Website-BG-Test.jpg');
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: 0.05;
    z-index: 0;
} */

.add-on-headline {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.add-on-headline-text {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 4.5px;
    white-space: wrap;
    text-align: center;
    text-transform: uppercase;
    line-height: 2.5rem;
}

@media (max-width: 550px) {
    .add-on-headline-text {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 4.5px;
        white-space: wrap;
        text-align: center;
        text-transform: uppercase;
        line-height: 2.5rem;
    }
}

.image {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4.5rem;
}

.image img {
    max-width: 100%;
    max-height: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

@media (max-width: 550px) {
    .shop-add-on .slider-container {
        margin-left: .75rem;
    }
}

.slider-wrapper {
    display: flex;
    transition: transform 0.25s ease-in-out;
    width: 100%;
    align-items: center;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.slide img {
    width: 100%;
    display: block;
}

.slide .product {
    display: flex;
    align-items: top;
    justify-content: left;
    width: 95%;
    margin-top: 10px;
    padding: .5rem;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 14px;
    margin-top: -22px;
    color: var(--second-color);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    cursor: pointer;
}

.prev ion-icon,
.next ion-icon {
    font-size: 24px;
}

.next {
    right: 0;
}

.prev:hover,
.next:hover {
    color: var(--second-color);
    background-color: var(--fifth-color);
}

.dots-container {
    text-align: center;
    margin-top: 25px;
}

.dot {
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin: 0 8px;
    background-color: #9a9a9a;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    position: relative;
    user-select: none;
}

.dot::before {
    content: '';
    position: absolute;
    top: -10px;
    /* Adjust the size of the clickable area */
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
    /* Invisible but clickable area */
}

.Product .active,
.dot:hover,
.outfit-slider-mobile .active {
    background-color: #000;
}

.grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

#imageSlider,
#imageSliderShop {
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.shop-add-on .image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-add-on .imageSlide {
    width: 100%;
    height: 100%;
}

.Product .imageSlide {
    width: 100%;
    height: auto;
    flex-basis: 100%;
    box-sizing: border-box;
    cursor: zoom-in;
    position: relative;
    z-index: 2;
}

#sliderWrapperShop .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.imageShow {
    position: fixed;
    display: none;
    background-color: #fff;
    width: 100vw;
    overflow-y: scroll;
    height: 100vh;
    z-index: 99;
}

.control {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.control-icon {
    border-radius: 50%;
    margin: 1rem;
    cursor: pointer;
    background-color: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-icon ion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--fifth-color);
}

.small-icon {
    width: 3rem;
    height: 3rem;
}

.big-icon {
    width: 4rem;
    height: 4rem;
}

.big-icon ion-icon {
    font-size: 1.5rem;
}

.control-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

.control-icon ion-icon {
    position: relative;
    top: 0;
    transition: .3s;
}

.control-icon:hover ion-icon {
    transform: scale(1.25);
}

.control-icon:hover {
    transform: scale(1.125);
}

.imageElement {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
    height: 100vh;
    cursor: zoom-in;
}

@media (max-width: 900px) {
    .imageElement {
        max-width: none;
        width: 200vw;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3rem;
        margin-bottom: auto;
    }
}

.name-price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.foukiya {
    color: #333;
    letter-spacing: 1vw;
}

.error-box-container {
    margin-top: 3vh;
}

.error-box {
    color: rgb(172, 18, 18);
    letter-spacing: 1px;
    font-size: .75rem;
    font-weight: 600
}


/* Beispiel-CSS für Optionen, die sich responsiv anpassen */

.optionname {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
    gap: 10px;
    /* Abstand zwischen den Optionen */
}


/* .optionname li {
    flex: 1 1 auto;
    width: 30vw;
    padding: 5px 10px;
    background-color: #000;
    color: #fff;
    border-radius: 1px;
    text-align: center;
    cursor: pointer;
    list-style: none;
} */


/* Größere Bildschirme */

@media (min-width: 768px) {
    .optionname {
        justify-content: flex-start;
    }
}


/* Kleinere Bildschirme */

@media (max-width: 767px) {
    .optionname {
        justify-content: flex-start;
    }
}

.colors {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.options {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin: 5vw;
    margin-bottom: 0;
}

.options h4 {
    margin-top: 0;
}

.options ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.option {
    width: 6rem;
    height: 3rem;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 1rem;
    user-select: none;
    color: var(--second-color);
    border: solid 1px var(--third-color);
    font-weight: 600;
}

.zero-option {
    background-color: #d1d1d1b0;
    color: #777777;
    font-weight: 600;
    cursor: default;
}

.chosenOption {
    color: white;
    background-color: var(--second-color);
}

.notavailable {
    background-color: gray;
    cursor: not-allowed;
}

.quantity-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-top: 2.5vh;
    width: 12vw;
    background-color: var(--fifth-color);
}

.quantity-input {
    width: 12vw;
}

@media (max-width: 500px) {
    .headline .productname {
        font-size: .8rem;
    }
}

.headline .productname {
    font-weight: 600;
    letter-spacing: .75px;
    cursor: pointer;
    margin: 0;
}

.headline .productname:hover {
    text-decoration: underline;
}

.headline .price {
    font-weight: 300;
    letter-spacing: 1px;
    font-size: .75rem;
    margin: 0;
}

.headline {
    margin-bottom: .75rem;
    padding-right: 15px;
}

.quantity h4 {
    font-size: .66rem;
    font-weight: 300;
    margin: 0;
}

.noscroll {
    position: fixed;
    width: 100%;
    overflow-y: hidden;
}

.cart,
.shipping-info-element,
.size-guide-overview {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow-y: auto;
    height: 100vh;
    width: 100vw;
    top: 0;
    position: absolute;
    overflow: hidden;
}

.cart-header,
.shipping-header {
    /* position: absolute; */
    /* position: sticky;     actual code*/
    top: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid var(--second-color) 1px;
    z-index: 1;
}

.cart .close,
.shipping-info-element .close {
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 100;
    margin-right: 0;
    padding: 15px;
}

.cart .delete {
    margin-left: auto;
    cursor: pointer;
}

.cart .delete ion-icon {
    position: relative;
    top: 2px;
}

.filter,
.shipping-filter {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #00000081;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    /* For Android and iOS */
    -webkit-touch-callout: none;
    /* Disable callout for long-press */
    -webkit-user-select: none;
    /* Disable text selection */
    user-select: none;
    /* Disable text selection */
}

.filter.show,
.shipping-filter.show {
    opacity: 1;
}

.cart-element,
.shipping-element,
.size-guide-overview-container {
    background-color: var(--fifth-color);
    width: 80vw;
    height: 100vh;
    position: fixed;
    right: -80vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 999;
    transition: right 0.2s ease-in-out;
}

.cart-element.show,
.shipping-element.show,
.size-guide-overview-container.show {
    right: 0;
}

@media (max-width: 900px) {
    .add-to-cart-button-element {
        position: fixed;
        height: 5rem;
        bottom: 0;
        background-color: var(--fifth-color);
        width: 100vw;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .add-to-cart-button-element .addtocart-button {
        margin: 5vw;
        margin-top: 1rem;
        margin-bottom: 1rem;
        height: 3rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        background-color: var(--second-color);
        border: 1px solid var(--second-color);
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }
    .addtocart-button .text {
        font-weight: 300;
        letter-spacing: .95px;
        width: 100%;
        font-size: 4w;
        color: var(--fifth-color);
        position: relative;
        z-index: 1;
    }
    .cart-headline,
    .shipping-headline {
        flex-grow: 1;
        margin-left: 1.25rem;
        cursor: pointer;
    }
    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: url('../images/Website-BG-Test.jpg'); */
        background-repeat: repeat-y;
        background-size: 250% auto;
        opacity: 0.05;
        z-index: 0;
    }
    /* .Product::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/Website-BG-Test.jpg');
        background-repeat: repeat-y;
        background-size: 250% auto;
        opacity: 0.05;
        z-index: 0;
    } */
    /* .shop-add-on::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/Website-BG-Test.jpg');
        background-repeat: repeat-y;
        background-size: 250% auto;
        opacity: 0.05;
        z-index: 0;
    } */
    .slider-container {
        display: flex;
    }
    #imageSlider-Web {
        display: none;
    }
    #dotsContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        margin-bottom: 1rem;
    }
    .description {
        margin-top: 5vw;
        margin-bottom: 5vw;
        padding-top: 3vw;
        padding-bottom: 3vw;
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .Product .description-text {
        font-size: 3vw;
        letter-spacing: .3vw;
        line-height: 3vh;
        font-weight: 300;
    }
    .details .quantity {
        margin: 5vw;
    }
    .name {
        white-space: unset;
        display: block;
        text-align: center;
        width: 90%;
        letter-spacing: .5vw;
        margin: 0 auto;
        padding: 0;
        font-size: calc(12px + 1vw);
        /* oder auch inline, je nach Bedarf */
    }
    .product-information {
        flex: 2;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        position: sticky;
        top: 15vh;
    }
    .options {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin: 5vw;
        margin-bottom: 0;
    }
    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: calc(100% - 10vw);
        margin: 5vw;
    }
    .cookie-Banner .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        margin: 0;
        margin-top: .75rem;
    }
}

.shipping-headline h2 {
    font-size: 1.25rem;
}

.shipping-content {
    margin: 0 1.5rem;
    margin-top: 1.5rem;
    color: var(--second-color);
}

.shipping-content h3 {
    text-transform: uppercase;
}

.shipping-content a {
    text-decoration: underline;
    color: var(--second-color);
}

.shipping-content p {
    line-height: 1.35rem;
}

@media (min-width: 600px) {
    .cart-element,
    .shipping-element,
    .size-guide-overview-container {
        width: 450px;
        right: -450px;
    }
}

@media (min-width: 900px) {
    .add-to-cart-button-element {
        display: none;
    }
    .cart-headline,
    .shipping-headline {
        flex-grow: 1;
        margin-left: 5%;
        cursor: pointer;
    }
    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: calc(100% - 10vw);
        margin: 2.5vw;
        margin-left: 5vw;
    }
    .cookie-Banner .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        margin: 0;
        margin-top: .75rem;
    }
    .options {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin: 2.5vw;
        margin-left: 5vw;
        margin-bottom: 0;
    }
    .product-information {
        flex: 2;
        width: 100%;
        margin-top: 3vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        position: -webkit-sticky;
        position: sticky;
        top: 0vh;
    }
    .name {
        white-space: unset;
        display: block;
        text-align: center;
        width: 90%;
        letter-spacing: .25vw;
        margin: 0 auto;
        padding: 0;
        font-size: calc(12px + 1vw);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .foukiya {
        color: #333;
        letter-spacing: .75vw;
    }
    .details .quantity {
        margin-left: 5vw;
    }
    .description {
        margin-bottom: 1vw;
        padding-top: 1.5vw;
        padding-bottom: 1.5vw;
        padding-left: 5vw;
        padding-right: 1vw;
    }
    .Product .description-text {
        font-size: 1.15vw;
        letter-spacing: .15vw;
        line-height: 3vh;
        font-weight: 300;
    }
    .Product .slider-container,
    .Product #imageSlider {
        display: none;
    }
    #imageSlider-Shop {
        display: flex;
    }
    #imageSlider-Web {
        margin-top: 3vh;
        flex: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 1vw;
    }
    #imageSlider-Web .imageSlide {
        flex: 1 0 45%;
        margin: 5px;
        max-width: 100%;
        height: auto;
    }
    #dotsContainer {
        display: none;
    }
    .filter,
    .shipping-filter {
        width: calc(100vw);
    }
    .cart .close,
    .shipping-info-element .close {
        font-size: 1.5rem;
    }
    .quantity h4 {
        font-size: .75rem;
        font-weight: 300;
        margin: 0;
    }
    .headline .price {
        font-size: 1rem;
    }
    .cart .imageSlide {
        margin-right: 1rem;
    }
    .cart .imageSlide:hover {
        cursor: pointer;
    }
    .headline .productname {
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        margin: 0;
    }
    .Product {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        position: relative;
        height: auto;
        width: 100vw;
        left: 0;
        right: 0;
    }
    .Checkout .order-value-text,
    #product-cart .order-value-text,
    .Checkout .shipping-value-text,
    #product-cart .shipping-value-text {
        font-size: 1rem;
    }
    .Checkout .total-text,
    #product-cart .total-text,
    .Checkout .total-price,
    #product-cart .total-price {
        font-size: 1.25rem;
    }
}

.product img {
    width: 20%;
    height: auto;
    object-fit: cover;
}

.cart-element-details {
    flex: 1;
    margin-left: 10px;
}

.cart-element-price {
    font-weight: bold;
}

.cart-element-quantity {
    display: flex;
    align-items: center;
}

.cart-element-quantity button {
    background: none;
    border: 1px solid #ddd;
    padding: 5px;
    cursor: pointer;
}

.cart-element-quantity input {
    width: 30px;
    text-align: center;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px;
}

.checkout {
    padding: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
}

.checkout button {
    width: 100%;
    padding: 10px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
}

.empty-basket {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 80%;
    width: 100%;
}

.product {
    display: flex;
    align-items: top;
    justify-content: left;
    width: 95%;
    margin-top: 10px;
    padding: .5rem;
}

.shop-add-on .product {
    margin: 5px;
    border: solid 3px var(--second-color);
    background-color: rgba(255, 255, 255, 0.35);
}

.cart-element .product {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 90%;
    height: auto;
}

.cart .imageSlide {
    margin-right: 1rem;
    width: 35%;
}


/* Checkout */

.Checkout .checkout-form {
    width: 90%;
    height: auto;
    margin-top: auto;
    margin-bottom: 2.5rem;
}

#product-cart .checkout-form {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    bottom: 0;
    background-color: var(--fifth-color);
    padding-right: 10px;
    padding-left: 10px;
    z-index: 1000;
    width: calc(100% - 20px);
    border-top: solid 1px var(--second-color)
}

@media (min-width: 900px) {
    #product-cart .checkout-form {
        position: -webkit-sticky;
        /* For Safari */
        position: sticky;
        bottom: 0;
        background-color: var(--fifth-color);
        padding-right: 10px;
        padding-left: 10px;
        z-index: 1000;
        width: calc(100% - 20px);
        border-top: solid 1px var(--second-color);
        margin-top: -2rem;
    }
}


/* #product-cart .checkout-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/Website-BG-Test.jpg');
    background-repeat: repeat-y;
    background-size: 250% auto;
    opacity: 0.05;
    z-index: 0;
} */

.Checkout .order-value,
#product-cart .order-value,
.Checkout .shipping-value,
#product-cart .shipping-value {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -2rem;
}

.Checkout .total,
#product-cart .total {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 550px) {
    .Checkout .order-value-text,
    #product-cart .order-value-text,
    .Checkout .shipping-value-text,
    #product-cart .shipping-value-text {
        font-size: .75rem;
    }
    .Checkout .total-text,
    #product-cart .total-text,
    .Checkout .total-price,
    #product-cart .total-price {
        font-size: 1rem;
    }
}

.Checkout .order-value-text,
#product-cart .order-value-text,
.Checkout .shipping-value-text,
#product-cart .shipping-value-text {
    margin-left: .5rem;
    margin-right: auto;
    font-weight: 300;
}

.Checkout .total-text,
#product-cart .total-text {
    margin-left: .5rem;
    margin-right: auto;
    font-weight: 700;
}

#product-cart .total-text,
#product-cart .total-price {
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.Checkout .shipping-value-price,
#product-cart .shipping-value-price,
.Checkout .order-value-price,
#product-cart .order-value-price {
    margin-right: .5rem;
}

#product-cart .order-value-price,
#product-cart .shipping-value-price {
    font-weight: 400;
    font-size: .85rem;
}

#product-cart .shipping-value {
    margin-top: 0rem;
    margin-bottom: -1.25rem;
}

.Checkout .total-price,
#product-cart .total-price {
    margin-right: .5rem;
}

.Checkout .line,
#product-cart .line {
    margin-top: .75rem;
    width: 97.5%;
    margin-left: 1.25%;
    height: 1px;
    background-color: var(--second-color);
}

.Checkout .checkout-button,
#product-cart .checkout-button,
.Checkout .basket-button,
#product-cart .basket-button {
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: .5rem;
}

.Checkout .checkout-button .text,
#product-cart .checkout-button .text,
.Checkout .basket-button .text,
#product-cart .basket-button .text {
    font-weight: 600;
}

#product-cart .checkout-button {
    margin: 0;
}

.continue-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    cursor: pointer;
    z-index: 1;
}

.continue-shopping-text {
    font-size: .7rem;
    font-weight: 400;
    color: #333;
}

.shop-add-on .checkout-form {
    position: absolute;
    bottom: 20vh;
    top: auto;
    margin: 0;
}

.indicator-bar-box {
    width: 90%;
    padding: 5%;
    padding-top: 6.5%;
    padding-bottom: 6.5%;
    margin: 0;
    border-bottom: solid 1px var(--second-color);
    height: 4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
}

.indicator-bar-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/Website-BG.webp');
    background-repeat: repeat-y;
    background-size: 250% auto;
    opacity: 0.05;
    z-index: 0;
}

@media (min-width: 600px) {
    .indicator-bar-price-text {
        margin-bottom: .5rem;
        padding-bottom: .35rem;
        font-size: .85rem;
        font-weight: 500;
        color: var(--second-color);
        align-self: flex-start;
        white-space: unset;
    }
    .indicator-bar-info-text {
        margin-top: .5rem;
        padding-top: .35rem;
        font-size: .75rem;
        font-weight: 500;
        color: #9a9a9a;
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .indicator-bar-price-text {
        margin-bottom: .5rem;
        padding-bottom: .5rem;
        font-size: .7rem;
        font-weight: 500;
        color: var(--second-color);
        align-self: flex-start;
        white-space: unset;
    }
    .indicator-bar-info-text {
        margin-top: .5rem;
        padding-top: .5rem;
        font-size: .65rem;
        font-weight: 500;
        color: #9a9a9a;
        align-self: flex-start;
    }
}

.indicator-bar {
    width: 97.5%;
    height: 1rem;
    border-radius: 2px;
    background-color: #b6b6b6;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.indicator-bar-width {
    height: 100%;
    border-radius: 2px;
    background-color: var(--second-color);
    transition: .3s;
}

.product-list {
    min-height: 47.5vh;
    flex-direction: column;
}

.cart .product-optioninfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 1rem;
}

.cart .product-optioninfo-value {
    font-weight: normal;
    white-space: nowrap;
    font-weight: 600;
    font-size: .6rem;
    margin-left: 2.5px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.cart .quantity-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-top: .5rem;
    background-color: var(--fifth-color);
}

.cart .quantity-controls {
    height: 1.25rem;
}

.product-optioninfo-text {
    font-size: .6rem;
}

.prices {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.actual-price,
.selling-price {
    font-size: 1rem;
    font-weight: 400;
    margin: 3px;
}

.product-name {
    max-width: 90%;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
}

.product-specification {
    margin-top: .75rem;
}

.sale {
    position: absolute;
    background-color: #c9002e;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--fifth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 2.5%;
    left: 2.5%;
}

.out-of-stock {
    position: absolute;
    background-color: var(--second-color);
    padding: 10px;
    color: var(--fifth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 2.5%;
    left: 2.5%;
}

.search-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--fifth-color);
    width: 2rem;
    /* Breite des gesamten Containers */
    height: 2rem;
    /* Höhe des gesamten Containers */
    border-radius: 5px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.search-icon ion-icon[name="search-outline"] {
    font-size: 1rem;
    /* Größe des Such-Icons */
    position: relative;
    color: var(--second-color);
}

.plus-icon {
    position: absolute;
    font-size: .5rem;
    left: 11px;
    top: 11px;
    /* Kleinere Größe für das Plus-Icon */
    color: var(--second-color);
    /* Oder eine andere Farbe für das Plus-Icon */
    pointer-events: none;
}

.size-guide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: .5rem;
}

.size-guide-container {
    min-width: 33%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    margin-right: 5vw;
    margin-left: auto;
    margin-bottom: 0;
}

.size-guide-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100% - 70.2333px);
}

.size-guide-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    border-bottom: solid 3px var(--second-color);
}

.size-guide-headline {
    margin-left: 1.5rem;
}

.size-guide-header .close {
    position: relative;
    top: 5px;
    margin-left: auto;
    font-size: 1.5rem;
    margin-right: 1.5rem;
    cursor: pointer;
}

.size-guide-header .size-guide-container h5 {
    font-weight: 500;
}

.size-guide-container:hover h5 {
    text-decoration: underline;
}

.messanweisung {
    margin-top: 1.5rem;
}

.measurement-options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 1.5rem;
}

.messanweisung {
    position: relative;
    /* Macht das Container-Element relativ */
}

.messanweisung img {
    display: block;
    /* Entfernt den Abstand unter dem Bild */
}

.armwidth {
    font-weight: 500;
    letter-spacing: 1.5px;
    /* Position von links */
}

.chestwidth {
    font-weight: 500;
    letter-spacing: 1.5px;
    /* Position von links */
}

.totalheight {
    font-weight: 500;
    letter-spacing: 1.5px;
    /* Position von links (ändere nach Bedarf) */
}

@media (min-width: 600px) {
    .measurement-options .option {
        width: 2.5rem;
        height: 2.5rem;
        margin: 1rem;
    }
    .size-chart-table th,
    .size-chart-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .armwidth,
    .chestwidth,
    .totalheight {
        font-size: 10px;
    }
    .measurement-options .option {
        width: 2rem;
        height: 2rem;
        margin: .5rem;
    }
    .size-chart-table th,
    .size-chart-table td {
        border: 1px solid #ddd;
        padding: 4px;
        text-align: center;
        font-size: .75rem;
    }
}

.size-info {
    width: 80%;
    margin-left: .3rem;
    margin-top: 1.5rem;
}

.size-info-text {
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: 1.25px;
    color: #a5a3a3;
    font-style: italic;
    margin-top: 0;
}

.size-info-span {
    font-weight: 700;
    letter-spacing: 1.5px;
    font-style: normal;
    color: var(--second-color);
}

.size-chart-action-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    cursor: pointer;
    width: 80%;
    margin-left: .3rem;
    margin-bottom: 2rem;
}

.size-chart-action-button:hover .size-chart-action-button-text {
    text-decoration: underline;
}

.size-chart-action-button-text {
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    font-size: .8rem;
    margin-right: .5rem;
}

.size-chart-action-button ion-icon {
    position: relative;
    top: -1px;
}

.size-chart-logo {
    width: 37.5%;
    margin-top: .5rem;
}

.size-chart {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.size-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.size-chart-table th {
    background-color: var(--second-color);
    color: var(--fifth-color);
    font-weight: bold;
}