/* @import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"); */


/* 
Abril Fatface
Raleway
*/


/* @font-face {
    font-family: 'Janna';
    src: url('https://www.foukiya.com/fonts/Janna.ttf') format('truetype');
} */

@font-face {
    font-family: 'Raleway';
    src: url('https://www.foukiya.com/fonts/Raleway-Medium.woff2') format('woff2');
    font-display: swap;
}

:root {
    --first-color: #0091AD;
    /* Blue (Munsell) */
    --second-color: #001B2E;
    /* Oxford Blue */
    --third-color: #263238;
    /* Gunmetal */
    --fourth-color: #D88A36;
    --fourth-color-op: rgba(217, 240, 255, 0.7);
    /* Alice Blue */
    --fifth-color: #f7f7ff;
    /* Ghost White */
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-display: swap;
    font-style: normal;
    scroll-behavior: auto;
    background-color: var(--fifth-color);
    visibility: visible;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

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

::selection {
    background-color: #263238;
    color: var(--fifth-color);
}

img {
    will-change: auto;
    display: block;
    /* Vermeidet Lücken unter Bildern, die durch Inline-Elemente verursacht werden */
    max-width: 100%;
    /* Stellt sicher, dass das Bild nicht breiter als das umgebende Element wird */
    height: auto;
}


/* ion-icon:not(.basket,
.hydrated) {
    pointer-events: none;
} */


/* Nav */

nav {
    position: fixed;
    width: 100%;
    top: 0;
    height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: .3s;
    z-index: 10;
}

nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/Website-BG.webp');
    background-repeat: repeat-y;
    background-size: cover;
    background-position: top -100px;
    opacity: 1;
    /* Hintergrundbild nur zu 50% sichtbar */
    z-index: -1;
    /* Hintergrundbild hinter die Nav-Elemente setzen */
}

nav::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 27, 46, 0.85);
    /* Halbtransparenter weißer Filter */
    z-index: -1;
    /* Weißer Filter hinter die Nav-Elemente, aber vor dem Hintergrundbild */
}

.checkout-button-element {
    position: fixed;
    height: auto;
    top: 4.5rem;
    width: 100vw;
    align-items: center;
    justify-content: center;
    background-color: var(--fifth-color);
    z-index: 9;
    border-bottom: solid 1px var(--second-color);
}

.checkout-button-element .btn-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 900px) {
    .checkout-button-element {
        display: none;
    }
}

@media (max-width: 900px) {
    .checkout-button-element {
        display: flex;
    }
    body,
    html {
        margin: 0;
        padding: 0;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        scroll-behavior: auto;
        overflow-x: visible;
        background-color: var(--fifth-color);
        position: relative;
    }
    body::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.02;
        z-index: 0;
    }
    nav::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: 1;
        /* Hintergrundbild nur zu 50% sichtbar */
        z-index: -1;
        /* Hintergrundbild hinter die Nav-Elemente setzen */
    }
}

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.nav-list {
    letter-spacing: 1.5px;
    cursor: pointer;
    position: relative;
    transition: .3s;
    white-space: unset;
}

.nav-list:before {
    position: absolute;
    display: block;
    transform: scaleX(0);
    bottom: 0;
    left: 0;
    background: transparent;
    width: 100%;
    content: "";
    height: auto;
    transition: transform 0.25s ease-in-out;
}

.nav-list:hover:before {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.nav-list:hover .nav-link {
    color: var(--fourth-color);
}

@media (max-width: 900px) {
    .nav-link {
        font-size: 1.5rem;
        margin: 0;
    }
    .payment {
        margin-top: .5rem;
    }
    .payment-slider {
        position: relative;
        top: -10px;
    }
}

@media (min-width: 900px) {
    .payment-slider {
        position: relative;
        top: -6px;
    }
}

.nav-link {
    text-decoration: none;
    color: var(--fifth-color);
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 1rem;
    transition: 0.3s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
}

.nav-link:hover {
    color: var(--fourth-color);
}

.active:hover:before {
    transform: scaleX(0);
}

.active {
    color: #999;
    cursor: pointer;
}

.active:hover {
    color: var(--second-color);
}

.Footer .logo img {
    margin-right: 0;
    width: 15rem;
    z-index: 0;
    cursor: pointer;
    position: relative;
    top: -1rem;
}

.nav .logo img {
    margin-top: .25rem;
    margin-left: 3rem;
    margin-right: 0;
    width: 15rem;
    z-index: 0;
    cursor: pointer;
}

.button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    margin-left: 0.5rem;
    margin-right: 2.5rem;
    display: none;
}

.btn-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: .5vw;
    position: relative;
    background-color: var(--second-color);
    border: 1px solid var(--second-color);
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: color 0.3s, background-color 0.3s;
}

.btn-2 .text {
    font-weight: 300;
    letter-spacing: .95px;
    width: 100%;
    font-size: 4w;
    color: var(--fifth-color);
    position: relative;
    z-index: 1;
    user-select: none;
}

@media (min-width: 550px) {
    .btn-2 .text {
        font-size: 1.25rem;
    }
}

.btn-2:hover {
    background-color: var(--fifth-color);
}

.btn-2:hover .text {
    color: var(--third-color)
}

.btn-2::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    /* Ändere die Position auf rechts */
    width: 100%;
    height: 100%;
    background-color: var(--fifth-color);
    transition: right 0.3s;
    /* Ändere die Transition auf 'right' */
}

.btn-2:hover::before {
    right: 0;
    /* Bewege es von rechts nach links beim Hover */
}

.opened {
    transition: 0.9s;
    z-index: 999;
}

.line {
    fill: none;
    stroke: var(--fifth-color);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
}

.line2 {
    stroke-dasharray: 30 60;
    stroke-width: 3;
}

.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
}

.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
}

.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 3;
}

.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
}

.icons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    margin-right: 2.5vw;
    position: relative;
    top: 25%;
    transform: translate(0, -50%);
}

.basket-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    cursor: pointer;
}

.basket {
    width: 38px;
    height: 38px;
}

.basket-path {
    fill: var(--fifth-color);
    transition: fill 0.3s;
}

.basket-wrapper:hover .basket-path {
    fill: var(--fourth-color);
}

.basket-wrapper:hover .value {
    color: var(--fourth-color);
}

.value {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fifth-color);
    user-select: none;
    margin-left: -.5rem;
    z-index: 0;
    width: 25px;
    border-radius: 25px;
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.animated {
    opacity: 0;
    transform: translateY(10px);
}

.animate-now .animated {
    animation: fadeInUp 0.3s ease-out forwards;
}

.animate-now .animated:nth-child(2) {
    animation-delay: 0.2s;
}

.animate-product .animated {
    animation: fadeInRight 0.3s ease-out forwards;
}

.animate-product .animated:nth-child(2) {
    animation-delay: 0.2s;
}

.animate-product .animated:nth-child(3) {
    animation-delay: 0.4s;
}

.animate-product .animated:nth-child(4) {
    animation-delay: 0.6s;
}

.animate-product .animated:nth-child(5) {
    animation-delay: 0.7s;
}

.animate-opac {
    animation: opac 0.3s ease-out forwards;
}

.category-2.animate-opac {
    animation-delay: .1s;
}

.animate-nav {
    animation: navFadeUp 0.3s ease-out forwards;
}

@keyframes navFadeUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes opac {
    from {
        transform: scale(1.02);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.start-btn {
    background-color: var(--fifth-color);
    border: 1px solid var(--fifth-color);
}

.start-btn .text {
    color: var(--second-color);
    font-weight: 500;
    text-transform: uppercase;
}

.start-btn:hover {
    background-color: var(--second-color);
}

.start-btn:hover .text {
    color: var(--fifth-color);
}

.start-btn::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    /* Ändere die Position auf rechts */
    width: 100%;
    height: 100%;
    background-color: var(--second-color);
    transition: right 0.3s;
    /* Ändere die Transition auf 'right' */
}

.mouse .h6 {
    color: var(--fifth-color);
    margin-top: 1rem;
}

.mouse svg {
    animation: scrollDownAnimation 2.5s infinite ease-in-out;
    /* 2s Gesamtdauer */
}

@keyframes scrollDownAnimation {
    0%,
    65% {
        /* 70% = 1.4s Ruhezeit */
        transform: translateY(0);
        /* Maus bleibt in der Ausgangsposition */
    }
    85% {
        /* Bewegung nach unten (1.4s bis 1.7s) */
        transform: translateY(7px);
        /* Maus bewegt sich nach unten */
    }
    100% {
        /* Bewegung zurück nach oben (1.7s bis 2s) */
        transform: translateY(0);
        /* Maus kehrt zurück */
    }
}

@media (max-width: 900px) {
    .start-btn {
        width: 40vw;
        margin-top: 5vh;
        height: auto;
    }
    .button-web {
        display: none;
    }
    .button-mobile {
        display: flex;
    }
    .shop-add-on-main {
        margin-top: 3rem;
    }
}

@media (max-width: 900px) {
    .Video-bg .overlay {
        position: absolute;
        top: -19px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        /* Black overlay with 35% opacity */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Video-bg {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        overflow: hidden;
    }
    .bg-video {
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        object-fit: cover;
        height: 100%;
        z-index: 0;
        min-width: 100%;
        min-height: 100%;
        display: none;
        /* Standardmäßig unsichtbar */
    }
    .bg-video.active {
        display: block;
    }
    .Video-bg .content .h2 {
        user-select: none;
        text-transform: uppercase;
        margin-bottom: 1rem;
        font-size: 2.5rem;
        opacity: .75;
    }
    .Video-bg .content .h4 {
        user-select: none;
        text-transform: uppercase;
        font-size: .75rem;
        margin-top: 0;
        letter-spacing: .5px;
        margin-bottom: 1rem;
        opacity: .75;
    }
    .mouse {
        cursor: pointer;
        position: absolute;
        bottom: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

@media (min-width: 900px) {
    .Video-bg .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        /* Black overlay with 35% opacity */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Video-bg {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        overflow: hidden;
    }
    .bg-video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        object-fit: cover;
        height: 100%;
        z-index: 0;
        min-width: 100%;
        min-height: 100%;
        display: none;
        /* Standardmäßig unsichtbar */
    }
    .bg-video.active {
        display: block;
        /* Nur das aktive Video wird angezeigt */
    }
    .Video-bg .content .h2 {
        user-select: none;
        text-transform: uppercase;
        margin-bottom: .5rem;
    }
    .Video-bg .content .h4 {
        user-select: none;
        text-transform: uppercase;
        font-size: 1rem;
        margin-top: 0;
        letter-spacing: .5px;
    }
    .mouse {
        cursor: pointer;
        position: absolute;
        bottom: 0%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

.Video-bg .content {
    text-align: center;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1vw;
    margin-left: 1vw;
    font-size: 4vw;
    color: var(--fifth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 900px) {
    .start-btn {
        width: 20vw;
        margin-top: 5vh;
        height: auto;
    }
    .outfit-slider-mobile {
        display: none;
    }
    .button-web {
        display: flex;
    }
    .button-mobile {
        display: none;
    }
}

.Banner {
    position: relative;
    width: 105vw;
    bottom: 0;
    left: -2.5vw;
    height: auto;
}

.Banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(180deg, transparent, transparent, transparent, transparent, transparent, #eeeeee3f, #eee);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(180deg, transparent, transparent, transparent, transparent, transparent, #eeeeee3f, #eee);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.smth-else {
    width: 100vw;
    height: 100vh;
}

.cookies {
    position: fixed;
    bottom: .5rem;
    left: .5rem;
    background-color: var(--fifth-color);
    border-radius: .5rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 9;
}

.cookie-container:focus,
.cookie-container-big:focus {
    outline: none;
}

.cookie-container,
.cookie-container-big {
    position: relative;
    top: 1px;
}

.cookies img {
    width: 80%;
}

.cookies:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cookie-Banner {
    position: fixed;
    bottom: 1rem;
    /* Abstand vom unteren Rand */
    left: 1rem;
    /* Abstand vom linken Rand */
    max-width: 25rem;
    min-width: 24rem;
    background-color: var(--fifth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 180px;
    padding: 1vw;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

.cookie-Banner.visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width:900px) {
    .cookie-Banner {
        bottom: 0;
        left: 0;
        min-width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        display: flex;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 1.5rem;
        min-height: 180px;
        position: fixed;
    }
    .cookie-Banner .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .cookie-Banner .buttons .btn-2 {
        width: 100%;
    }
    .cookie {
        padding-top: 1.5rem;
    }
    .cookie img {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (min-width: 900px) {
    .cookie-Banner .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
}

.cookie-Banner .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.5rem;
    cursor: pointer;
}

.close svg {
    width: 24px;
    height: 24px;
}

.cookie-Banner .links {
    margin-top: -2vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
}

.cookie-Banner .links .link {
    color: var(--third-color);
    font-size: .85rem;
    padding: 10px;
    transition: color 0.3s;
    /* Farbübergang */
}

.cookie-Banner .links .link:hover {
    color: var(--third-color)
}

.cookie-Banner .links .ball {
    font-size: 1rem;
    /* Schriftgröße */
    color: var(--third-color);
    /* Farbe des Balls */
    transition: color 0.3s;
    /* Farbübergang */
}

.cookie-Banner .links .link,
.cookie-Banner .links .ball {
    display: flex;
    align-items: center;
}

.cookie-Banner .links .link:not(:last-child) {
    margin-right: 10px;
    /* Abstand zwischen den Links */
}

.cookie-Banner .links .ball-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.cookie-Banner .links svg {
    width: .75vw;
    height: .75vw;
    margin-left: -12.5px;
}

.cookie-Banner .buttons {
    margin-top: 1.5vh;
    width: 100%;
}

.cookie-Banner .text {
    font-weight: 100;
    letter-spacing: .9px;
    font-size: .9vw;
    color: #fff;
    position: relative;
    z-index: 1;
}

.black-line {
    margin-top: 1.5rem;
    margin-left: 5vw;
    margin-right: 5vw;
    width: calc(100% - 10vw);
    height: 2px;
    background-color: var(--second-color);
}

.quantity-box {
    display: inline-flex;
    align-items: center;
}

.quantity-controls {
    display: flex;
    align-items: center;
    width: auto;
    border: 1px solid var(--third-color);
    background-color: var(--fifth-color);
    /* border-radius: 5px; */
    padding: 5px;
}

.quantity-controls button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
}

.quantity-input {
    text-align: center;
    border: none;
    outline: none;
    -moz-appearance: textfield;
    background-color: var(--fifth-color);
}

.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.addtocart,
.paynow {
    height: 8vh;
    width: 100%;
    text-align: center;
}

.decline-button,
.accept-button {
    height: 5vh;
    width: 48%;
    margin: 0;
}

.decline-button {
    margin-right: 4px;
}

.accept-button {
    margin-left: 4px;
}

.decline-button .text,
.accept-button .text {
    font-size: 1rem;
}

.info-text {
    font-weight: 200;
    font-size: 1rem;
    margin-left: .5rem;
    margin-right: .5rem;
}

.description-text {
    font-size: 1vw;
    font-weight: 300;
}


/* Footer */

.Footer {
    width: 100vw;
    height: auto;
    background-color: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9;
    position: relative;
}

.payments {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    margin-bottom: -.5rem;
}

.footer-base {
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

@media (max-width: 900px) {
    .Footer {
        height: auto;
    }
    .footer-base {
        flex-direction: column;
    }
    .footer-right {
        flex-direction: column;
    }
    .payments {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        /* Allow elements to wrap to the next row */
        margin-bottom: -.5rem;
        width: 80vw;
    }
}

.footer-left {
    width: 30%;
    height: auto;
    margin-left: 3rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-direction: column;
}

.footer-left .logo h4 {
    font-weight: 100;
    letter-spacing: .2vw;
    color: var(--fifth-color);
    margin: 0;
    position: relative;
    top: -1.5rem;
}

.social-media {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 2.5rem;
    padding: 0;
}

.social-media-icon {
    list-style: none;
    margin: .5rem;
}

.social-media-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--fifth-color);
    transition: 0.3s;
}

.social-media-icon svg:hover {
    color: #dcd9d9;
}

.footer-right {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    margin-right: 5vw;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-left: 5vw;
}

.footer-section h4 {
    margin-bottom: 5vh;
    color: #e7e6e6;
    font-weight: 100;
    letter-spacing: .15vw;
    text-transform: uppercase;
}

.footer-section ul {
    list-style-type: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 0;
}

@media (max-width: 900px) {
    .nav .logo {
        margin-left: 1rem;
    }
    .footer-left {
        margin-left: 0;
        margin-top: 2.5rem;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer-left .logo h4 {
        position: relative;
        top: 0;
    }
    .Footer .logo img {
        position: relative;
        top: 0;
    }
    .Footer .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .footer-end {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }
    .trademark {
        margin: 0;
        margin-bottom: 1.5rem;
    }
    .payment-options,
    .delivery-options {
        margin: 0;
        width: 50vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .delivery-options {
        margin-top: 2rem;
        margin-bottom: 3rem;
    }
    .general-options {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-right {
        margin: 0;
        width: 100vw;
    }
    .footer-section {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .footer-section ul {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .dhl-headline,
    .payment-headline {
        color: var(--fifth-color);
        font-size: .6rem;
        letter-spacing: 2px;
        margin: 0;
        margin-bottom: .25rem;
    }
}

.footer-section ul li {
    margin-bottom: 1.5vh;
}

.footer-section ul li a {
    color: var(--fifth-color);
    text-decoration: none;
    cursor: pointer;
    font-weight: 100;
    transition: .3s;
}

.footer-section ul li a:hover {
    color: var(--fourth-color);
}

@media (min-width: 900px) {
    .footer-end {
        height: auto;
        width: 100vw;
        border-top: solid 1px var(--fifth-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    .general-options {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row-reverse;
        height: 90%;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }
    .trademark {
        margin-left: 7.5rem;
    }
    .payment-options {
        margin-right: 5rem;
    }
    .delivery-options {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin-right: 2rem;
    }
    .dhl-headline,
    .payment-headline {
        color: var(--fifth-color);
        margin-right: .5rem;
        font-size: .6rem;
        letter-spacing: 2px;
    }
}

.trademark-text {
    color: var(--fifth-color);
    font-weight: 100;
    font-size: .75rem;
    letter-spacing: 1.5px;
}

.payment {
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-right: .25rem;
}

.payment img {
    user-select: none;
    width: 2.25rem;
}

.payment svg,
.dhl {
    width: 2.25rem;
    height: 2.25rem;
}

.payment-slider {
    width: 36px;
    height: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-right: .25rem;
}

.payment-slider .payment {
    display: none;
}

.payment-slider .payment-slider-active {
    display: flex;
}

@media (max-width: 1000px) {
    .nav .logo img {
        margin-left: 0;
    }
    nav {
        max-height: 4.5rem;
        height: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav-items {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: var(--second-color);
        left: -100vw;
        top: -10vh;
        text-align: center;
        padding: 80px 0;
        transition: .3s;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column-reverse;
        z-index: 90;
    }
    .nav-items::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.1;
        z-index: 0;
    }
    .nav-link {
        color: var(--fifth-color);
    }
    .nav-list .active {
        color: #999;
    }
    .icons {
        position: relative;
        top: 33%;
        transform: translate(0, -50%);
    }
    .basket {
        width: 32px;
        height: 32px;
    }
    .nav-list:hover:before {
        transform: scaleX(0);
        transform-origin: 0 50%;
    }
    .button {
        z-index: 99;
        margin-right: 0;
        margin-left: 2rem;
    }
    .basket {
        margin-left: 0;
    }
    .toggle {
        left: 0rem;
    }
    .nav-items li {
        margin-top: -8rem;
        font-size: 200%;
        text-transform: uppercase;
    }
    .nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
    }
    .open .nav-list {
        transform: translateX(0);
    }
    .open nav::before {
        opacity: 1;
        transform: scale(1);
    }
    .button-mobile {
        display: block;
    }
    .button-web {
        display: none;
    }
}

@media (max-width: 600px) {
    .nav .logo img {
        width: 10rem;
    }
    .Footer .logo img {
        width: 10rem;
    }
    .button {
        margin-left: .5rem;
        margin-right: -1rem;
    }
    .toggle {
        width: 100%;
    }
    .nav-items {
        transition: .5s;
    }
}

.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;
}

@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;
}

.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;
}

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

.Category-add-on {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 5vw;
    grid-template-rows: repeat(auto-fill, minmax(200px, auto));
}

.category-item {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    transition: .3s;
    z-index: 1;
}

.category-1 {
    grid-column: span 1;
    /* Nimmt 1 von 3 Spalten ein */
    aspect-ratio: 1 / 1;
    margin-right: 8px;
}


/* Kategorie 2: 2/3 der Reihe und gleiche Höhe wie Kategorie 1 */

.category-2 {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
    margin-left: 15px;
}

.category-4,
.category-8 {
    grid-column: span 3;
    aspect-ratio: 2 / 1;
}

.category-4 {
    grid-row: span 1;
}

.category-5 {
    grid-column: span 1;
    grid-row: span 1;
}

.category-6 {
    grid-column: span 1;
    grid-row: span 1;
}

.category-7 {
    grid-column: span 1;
    grid-row: span 1;
}

.category-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.category-item:hover img {
    transform: scale(1.02);
}

.category-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    transition: background-color 0.3s ease;
    z-index: 2;
}

.outfit-image-filter {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 2;
}

.category-item:hover .category-filter {
    background-color: rgba(0, 0, 0, 0.55);
}

.category-link {
    position: absolute;
    z-index: 3;
    text-decoration: none;
    color: var(--fifth-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px;
    letter-spacing: 1.5px;
}

@media (max-width: 550px) {
    .category-link {
        font-size: 1.85rem;
    }
}

@media (max-width: 450px) {
    .nav-link {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

.category-link-confirm {
    position: absolute;
    top: 3.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.category-link-confirm-text,
.nav-link {
    text-decoration: none;
    color: var(--fifth-color);
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    transition: .5s;
    overflow: hidden;
    position: relative;
}

.category-link-confirm-text::before,
.nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--fifth-color);
    transform: scaleX(1);
    transform-origin: bottom left;
    transition: transform 0.3s ease;
}

.category-link-confirm-text:hover::before,
.nav-link:hover::before {
    transform: scaleX(0);
}

@media (max-width: 768px) {
    .Category-add-on {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .category-1,
    .category-2,
    .category-3,
    .category-4,
    .category-5,
    .category-6,
    .category-7,
    .category-8 {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 1;
        margin: 0;
    }
}

.Icon-Section {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    padding: 3.5rem 3rem;
    box-sizing: border-box;
    margin-top: 5rem;
    margin-bottom: 7.5rem;
    border: solid 1px var(--second-color);
    background-color: rgba(255, 255, 255, 0.35);
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 17.5rem;
}

.icon-element svg {
    width: 36px;
    height: 36px;
}

.icon-headline-element,
.icon-text-element {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-headline {
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: 1.65px;
    text-align: center;
    text-transform: uppercase;
}

.icon-text {
    font-size: 1rem;
    font-weight: 500;
    margin-top: .65rem;
    text-align: center;
}

@media (max-width: 1200px) {
    .icon-container {
        flex-basis: calc(33.333% - 2rem);
        margin-top: .65rem;
    }
}

@media (max-width: 768px) {
    .icon-container {
        flex-basis: calc(50% - 2rem);
        margin-top: .65rem;
    }
}

@media (max-width: 480px) {
    .icon-container {
        margin-top: .65rem;
        flex-basis: calc(100% - 2rem);
    }
}

.instagram {
    width: calc(100% - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 5%;
    margin-bottom: 10%;
    position: relative;
}

.instagram-headline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    margin-bottom: 1rem;
}

.instagram-name {
    margin-left: 2.5%;
    margin-right: auto;
    cursor: pointer;
    color: var(--second-color);
    text-transform: uppercase;
    transition: .3s;
    font-weight: bold;
}

.instagram-name:hover {
    color: #3f3f3f;
}

.follow-us {
    margin-right: 2.5%;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    color: var(--second-color);
}

.follow-us::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--second-color);
    transition: width 0.3s ease, left 0.3s ease;
    pointer-events: none;
}

.follow-us:hover::after {
    width: 0;
    left: 100%;
}

.posts {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    /* Ermöglicht horizontales Scrollen */
    width: 95%;
    margin-left: 1rem;
    margin-right: 1rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    will-change: transform;
}

.posts::-webkit-scrollbar {
    display: none;
    /* Scrollbar in Webkit-Browsern (Chrome, Safari) verstecken */
}

.post {
    flex: 0 0 calc(30% - 0.5rem);
    /* Drei ganze Posts und ein halber sichtbar */
    height: 30vw;
    width: 30vw;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.post:hover img {
    transform: scale(1.02);
}

.post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
}

.post:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

.post::after {
    content: '';
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.post svg {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.post:hover svg {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

@media (max-width: 768px) {
    .posts {
        gap: 0.5rem;
        /* Weniger Abstand für kleinere Bildschirme */
    }
    .post {
        flex: 0 0 calc(30% - 0.5rem);
        /* Drei ganze Posts und ein halber sichtbar */
        height: 30vw;
        width: 30vw;
        overflow: hidden;
    }
    .post img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .instagram-name {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .post {
        flex: 0 0 calc(30% - 0.5rem);
        height: 30vw;
        width: 30vw;
        overflow: hidden;
    }
    .post img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .instagram-name {
        font-size: 1.25rem;
    }
}

.MadeInMorocco-Section {
    position: relative;
    width: 100vw;
    height: calc(15rem + 10vh);
    overflow: hidden;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.MadeInMorocco-Section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.MadeInMorocco-Section .filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Schwarzer Filter mit 50% Deckkraft */
    z-index: 2;
    /* Filter zwischen Bild und Texten platzieren */
}

.madeinmorocco-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--fifth-color);
    z-index: 3;
    width: 90vw;
    /* Weißer Text auf dem Bild, kann je nach Bild angepasst werden */
}

.madeinmorocco-text {
    font-size: .85rem;
    letter-spacing: 2px;
    /* Anpassung der Schriftgröße nach Wunsch */
    margin: 0;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.madeinmorocco-info-text {
    font-size: 2rem;
    margin: 0;
    margin-top: .5rem;
    letter-spacing: 2.5px;
    /* Anpassung der Schriftgröße nach Wunsch */
    text-transform: uppercase;
}

.QandA {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden;
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

.qanda-container {
    max-width: 90%;
    margin: 0 auto;
}

.QandA-headline {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 4.5px;
    white-space: wrap;
    text-align: center;
    text-transform: uppercase;
    line-height: 2.5rem;
    margin-top: 5rem;
    margin-bottom: 3.5rem;
    color: var(--second-color);
}

.Outfit-info {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 4.5px;
    white-space: wrap;
    text-align: center;
    text-transform: uppercase;
    line-height: 2.5rem;
    margin-bottom: 3.5rem;
    color: var(--second-color);
}

@media (max-width: 550px) {
    .QandA-headline,
    .Outfit-info {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 4.5px;
        white-space: wrap;
        text-align: center;
        text-transform: uppercase;
        line-height: 2.5rem;
        margin-bottom: 2.5rem;
        color: var(--second-color);
    }
}

.qanda-section {
    margin-bottom: 20px;
}

.qanda-section h2 {
    font-size: 24px;
    margin-bottom: 1.25rem;
    color: var(--second-color);
}

.qanda-section ul,
.accordion ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.qanda-item {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    border: solid 1px var(--second-color);
    background-color: rgba(255, 255, 255, 0.35);
}

.question {
    font-size: 16px;
    color: var(--second-color);
    letter-spacing: 1.25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.question-text {
    font-size: 16px;
    font-weight: normal;
    color: var(--second-color);
    margin: 0;
    letter-spacing: 1.25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Für Safari */
    -ms-hyphens: auto;
    /* Für ältere IE-Versionen */
    word-break: break-word;
}

.plus-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
}

.plus-minus .add-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.plus-minus .remove-icon {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.qanda-item.open .plus-minus .add-icon {
    transform: rotate(180deg);
    opacity: 0;
}

.qanda-item.open .plus-minus .remove-icon {
    opacity: 1;
}

.accordion.open .plus-minus .add-icon {
    transform: rotate(180deg);
    opacity: 0;
}

.accordion.open .plus-minus .remove-icon {
    opacity: 1;
}

.answer,
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: .85rem;
    color: var(--second-color);
    transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.qanda-item.open .answer {
    max-height: 1200px;
    /* adjust as needed */
    transform: translateY(0);
    opacity: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}

.qanda-item.closing .answer {
    max-height: 0;
    transform: translateY(20px);
    opacity: 0;
    transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.accordion.open .accordion-content {
    max-height: 1200px;
    /* adjust as needed */
    transform: translateY(0);
    opacity: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}

.accordion.closing .accordion-content {
    max-height: 0;
    transform: translateY(20px);
    opacity: 0;
    transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.Outfit-Section {
    position: relative;
    width: 100vw;
    overflow: hidden;
    margin-top: 7.5rem;
}

.Outfit-headline {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--second-color);
}

.outfit-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4.5rem;
}

@media (max-width:900px) {
    .outfit-slider-container {
        display: none;
    }
    .outfit-slider-mobile {
        display: flex;
    }
}

.product-overview-header {
    width: 100vw;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: row;
    border-bottom: solid 1px var(--second-color);
}

.product-overview-header .close {
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 100;
    margin-right: 2vw;
    padding: 15px;
    position: absolute;
    right: 1vw;
    margin-top: 2px;
}

.product-overview {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    width: 100vw;
    transform: translateY(100%);
    min-height: 50vh;
    height: auto;
    background-color: var(--fifth-color);
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    /* Ensure smooth transition */
    z-index: 1000;
    cursor: auto;
}

.product-overview-headline h2 {
    text-transform: uppercase;
    letter-spacing: 1.75px;
    font-weight: 400;
    font-size: 1.25rem;
}

.product-overview .outfit-image-container {
    width: 10rem;
}

.product-overview .outfit-product {
    padding: 0;
    margin: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.product-overview .outfit-imageSlide {
    width: 40%;
    height: auto;
}

.product-overview .outfit-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.outfit-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.outfit {
    width: 100vw;
    padding-left: 15vw;
    padding-right: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    box-sizing: border-box;
}

.outfit-product-container {
    width: 100%;
    height: 100%;
}

.outfit-image-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.outfit-image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.outfit-imageSlide,
.outfit .product-name {
    cursor: pointer;
}

.outfit-filter {
    background-color: #00000081;
    z-index: 20;
    width: 100vw;
    height: 100vh;
    position: fixed;
}

.view-btn {
    padding: 16px;
    width: 35%;
    margin: 0;
    margin-top: 1.5rem;
}

.view-btn .text,
.preview-btn .text {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .85rem;
}

.preview-btn {
    align-self: center;
    padding: 16px;
    width: 7.5rem;
    margin: 0;
    margin-top: 3rem;
}

.outfit-product {
    padding: 5vw;
    padding-left: 5vw;
    padding-right: 2.5vw;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 5vw;
}

.outfit-arrow {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 14px;
    margin-top: -22px;
    color: var(--fifth-color);
    background-color: var(--second-color);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    cursor: pointer;
    z-index: 9;
}

.outfit-arrow svg {
    height: 24px;
    width: 24px;
}

.outfit-arrow:hover {
    color: var(--second-color);
    background-color: var(--fifth-color);
}

.outfit-arrow.outfit-prev {
    left: 5%;
}

.outfit-arrow.outfit-next {
    right: 5%;
}

@media (max-width: 768px) {
    .outfit-arrow {
        display: none;
    }
}


/* AGB STUFF */

@media (min-width: 900px) {
    .AGB {
        min-height: 100vh;
        position: relative;
        top: 7.5rem;
        padding-left: 25%;
        padding-right: 25%;
        margin-bottom: 15rem;
    }
    .AGB-header h1 {
        font-size: 5rem;
        text-transform: uppercase;
    }
}

@media (max-width: 900px) {
    .AGB {
        min-height: 100vh;
        position: relative;
        top: 7.5rem;
        padding-left: 5%;
        padding-right: 5%;
        margin-bottom: 15rem;
    }
    .AGB-header h1 {
        font-size: 2.25rem;
        text-transform: uppercase;
        text-align: center;
    }
}

.AGB-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.E-Mail-Section {
    z-index: 1;
    margin-top: 10rem;
    width: 60vw;
    position: relative;
    left: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.E-Mail-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 5rem;
}

.E-Mail-input-details {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 1.5rem;
}

.E-Mail-input {
    width: 100%;
}


/* Einheitliche Stile für Input-Felder und Textarea */

.E-Mail-Section input,
textarea {
    width: calc(100% - 1rem);
    /* Breite reduziert, um Padding und Margin auszugleichen */
    height: 3rem;
    border: 1px solid #e1e1e1;
    padding: 0 1rem;
    margin: 0 0.5rem;
    /* Gleiche Margin links und rechts */
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    resize: vertical;
    /* Nur Y-Achse für Textarea expandierbar */
}


/* Zusätzliche Stile für die Textarea */

.E-Mail-Section textarea {
    min-height: 40vh;
    /* Mindesthöhe für die Textarea */
    height: auto;
    /* Höhe passt sich basierend auf dem Inhalt an */
    padding: 0.5rem 1rem 0 1rem;
    /* Padding oben (0.5rem) sorgt für Abstand des Textes (einschließlich des Platzhalters) */
    margin: 0 0.5rem;
    /* Gleiche Margin wie das Input */
}

.E-Mail-Section .btn-2 {
    width: 50%;
    margin-top: 2.5rem;
    text-transform: uppercase;
    padding: 16px;
}

@media(max-width: 900px) {
    .E-Mail-input-details {
        flex-direction: column;
    }
    #E-Mail-Name {
        margin-bottom: 1.5rem;
    }
    .E-Mail-Section textarea {
        min-height: 30vh;
        /* Mindesthöhe für die Textarea */
        height: auto;
        /* Höhe passt sich basierend auf dem Inhalt an */
        padding: 0.5rem 1rem 0 1rem;
        /* Padding oben (0.5rem) sorgt für Abstand des Textes (einschließlich des Platzhalters) */
        margin: 0 0.5rem;
        /* Gleiche Margin wie das Input */
    }
    .E-Mail-Section {
        z-index: 1;
        margin-top: 8.5rem;
        width: 80vw;
        position: relative;
        left: 10vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

.security {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100vw;
    height: 3rem;
    margin-bottom: 4rem;
}

@media (min-width: 550px) {
    .security h4 {
        color: var(--second-color);
        font-size: .85rem;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 2px;
    }
    .security ion-icon {
        color: var(--second-color);
        position: relative;
        top: 2.5px;
        font-size: 1rem;
        margin-right: 5px;
    }
}

@media (max-width: 550px) {
    .security h4 {
        color: var(--second-color);
        font-size: .7rem;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1.5px;
    }
    .security ion-icon {
        color: var(--second-color);
        position: relative;
        top: 2.5px;
        font-size: .9rem;
        margin-right: 5px;
    }
}

@media (min-width: 1000px) {
    .nav-link {
        margin-right: 0;
    }
    nav {
        min-height: 6rem;
    }
}

@media (min-width: 1250px) {
    .nav-link {
        margin-right: 1.5rem;
    }
}


/* index php sachen */

.shop-add-on {
    position: relative;
    overflow: hidden;
    padding-left: 20px;
}


/* Styling für den Slider Container */

.slider-container {
    position: relative;
    overflow: hidden;
    /* Keine Scrollbar anzeigen */
}


/* Styling für den Slider Wrapper */

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

.product {
    flex: 0 0 calc(25% - 20px);
    /* 3.5 Produkte sichtbar auf dem Desktop */
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    cursor: grab;
}

.product .image-container {
    flex: 1;
    width: 100%;
    height: 200px;
}

.product .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bild soll den Container vollständig abdecken */
}


/* Styling für die Produktbeschreibung */

.product-specification {
    text-align: center;
}


/* Pfeiltasten Styling */

.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--second-color);
    color: var(--fifth-color);
    cursor: pointer;
    user-select: none;
    z-index: 9;
    display: block;
    /* Startposition sichtbar */
    transition: all 0.3s ease;
    /* Hinzufügen der Transition */
    opacity: 0;
}

.slider-container:hover .prev,
.slider-container:hover .next {
    opacity: 1;
    /* Sichtbar bei Hover */
    pointer-events: all;
    /* Klickbar bei Hover */
}

.slider-container:hover .prev {
    left: 2rem;
}

.slider-container:hover .next {
    right: 5rem;
}

.prev {
    left: -50px;
    /* Ausgangsposition außerhalb des Sichtbereichs */
}

.next {
    right: -50px;
    /* Ausgangsposition außerhalb des Sichtbereichs */
}


/* Klasse zum vollständigen Verbergen der Pfeile */

.hidden {
    display: none !important;
}

.slide {
    position: relative;
    /* Wichtig, um die absolute Positionierung der Kreiselemente zu ermöglichen */
}

.outfit-circle-button {
    background-color: var(--fifth-color);
    width: 35px;
    height: 35px;
    border-radius: 100%;
    position: absolute;
    cursor: pointer;
    opacity: .2;
    z-index: 4;
    animation: pulse 2.5s infinite;
}

.outer-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: var(--fifth-color);
    opacity: 1;
    z-index: 3;
}

.outfit-imageSlide {
    width: 60%;
    height: auto;
}

.outfit-product {
    height: 100%;
    padding: 0;
    margin-right: 0;
    margin-left: auto;
}

.outfit-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes pulse {
    0% {
        width: 35px;
        height: 35px;
    }
    50% {
        width: 45px;
        height: 45px;
    }
    100% {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 1000px) {
    .product {
        flex: 0 0 85%;
        /* 1.5 Produkte sichtbar auf mobilen Geräten */
    }
    .shop-add-on {
        position: relative;
        overflow: hidden;
        padding-left: 10px;
    }
}

@media (max-width: 767px) {
    .product {
        flex: 0 0 85%;
        /* 1.5 Produkte sichtbar auf mobilen Geräten */
    }
    .shop-add-on {
        position: relative;
        overflow: hidden;
        padding-left: 0;
    }
    .prev,
    .next {
        display: none;
    }
}