@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Book_BT.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Book_Italic_BT.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Light_BT.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Light_Italic_BT.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Medium_BT.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Medium_Italic_BT.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Bold_BT.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Bold_Italic_BT.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Heavy_BT.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Futura PT';
    src: url('../Images/Fonts/Futura_Heavy_Italic_BT.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

:root {
    --main-font: 'Futura PT';
    /* Bootstrap 5 Color Overrides */
    --bs-primary: #D7B585;
    /* Custom hover variables */
    --bs-primary-hover: #947935; /* Darker shade for hover */
    --bs-btn-disabled-bg: #D7B585;

    --bs-body-font-size: 16px;
    --bg-gray: #F3F3F3;
}

input, select, textarea {
    max-width: unset;
    border-radius: 12px;
    border: 1px solid #bdbdbd;
    background: #fff;
    font-size: 1rem;
}

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        font-style: normal !important;
        font-family: var(--main-font), Arial, sans-serif !important;
        color: #808080;
        font-family: "Futura PT";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        font-style: normal !important;
        font-family: var(--main-font), Arial, sans-serif !important;
        color: #808080;
        font-family: "Futura PT";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    input::-ms-input-placeholder,
    textarea::-ms-input-placeholder {
        font-style: normal !important;
        font-family: var(--main-font), Arial, sans-serif !important;
        color: #808080;
        font-family: "Futura PT";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    input::placeholder,
    textarea::placeholder {
        font-style: normal !important;
        font-family: var(--main-font), Arial, sans-serif !important;
        color: #808080;
        font-family: "Futura PT";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }


.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    text-decoration: none;
}

.btn-primary:active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    text-decoration: none;
}

.btn-primary:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    text-decoration: none;
}

.bg-gray {
    background-color: var(--bg-gray);
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
}

html, body, h1, h2, h3, h4, h5, h6, label {
    font-family: var(--main-font);
}

h1 {
    color: #000;
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h2 {
    color: #000;
    font-family: "Futura PT";
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 32.5px */
}

h3 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 22.5px */
    text-transform: uppercase;
}

p {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 22.5px */
}

.nav-link img {
    width: 24px;
    height: 24px;
}

.nav-link:hover{
    text-decoration: none;
}

/* Dropdown bei Hover öffnen */
.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
    pointer-events: auto;
}

.dropdown-menu {
    position: absolute;
    min-width: 245px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    border: none;
    margin-top: 1rem;
    z-index: 1000;
    margin-top: 0.125rem;
    left: -80px !important;
}

.dropdown-item {
    font-size: 20px;
}

    .dropdown-item.active, .dropdown-item:active {
        background-color: var(--bg-gray);
        color: black;
    }

    .dropdown-item:hover {
        background-color: var(--bg-gray);
        text-decoration: none;
        font-weight: 600;
    }


.border-bottom {
    border-bottom: 1px solid #445666;
}

@media(max-width: 600px) {
    .btn {
        font-size: 18px;
    }

    .dropdown-menu{
        left: -110px !important;
    }
}




/* Homepage */
.hero .btn {
    height: 54px;
    flex-shrink: 0;
}


.password-wrapper {
    position: relative;
}
.password-toggle {
    position: absolute;
    top: 25%;
    right: 1rem;
    cursor: pointer;
    color: #888;
    z-index: 2;
}
.password-input {
    padding-right: 2.5rem;
}


.process .container {
    max-width: 1000px;
}

.process .carousel-item {
    height: 170px;
}

.benefits .carousel-item{
    height: 490px;
}



/* Custom Carousel Arrow Design */
.process-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f6f7 !important;
    box-shadow: none;
    opacity: 1;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
}

.benefits .process-arrow {
    top: 25%;
}

.benefits .carousel-control-next{
    right: 10px;
}

.benefits .carousel-control-prev {
    left: 10px;
}

.process-arrow:active,
.process-arrow:focus {
    background: #ececec !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .carousel-control-next-icon::after,
    .carousel-control-prev-icon::after {
        content: '';
        display: block;
        width: 28px;
        height: 28px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28px 28px;
    }

    .carousel-control-next-icon::after {
        background-image: url("data:image/svg+xml;utf8,<svg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='14' cy='14' r='14' fill='white' fill-opacity='0'/><path d='M8 14H20' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M16 10L20 14L16 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }

    .carousel-control-prev-icon::after {
        background-image: url("data:image/svg+xml;utf8,<svg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='14' cy='14' r='14' fill='white' fill-opacity='0'/><path d='M20 14H8' stroke='black' stroke-width='2' stroke-linecap='round'/><path d='M12 10L8 14L12 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }

.faq-card {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-toggle {
    display: flex;
    align-items: center; /* Vertikal mittig */
    justify-content: space-between; /* Text links, Chevron rechts */
    background: #f5f5f5;
    border: none;
    padding: 24px 24px 16px 24px;
    font-size: 1.1rem;
    position: relative;
    outline: none;
    transition: background 0.2s;
    width: 100%;
    text-align: left; /* Text bleibt linksbündig */
    color: black;
}

.faq-text {
    flex: 1 1 0;
    max-width: 80%;
    white-space: normal;
    overflow-wrap: break-word;
    display: flex;
    align-items: center; /* Vertikal mittig innerhalb des Textbereichs */
    height: 100%;
}

.faq-chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center; /* Vertikal mittig */
    justify-content: center;
    height: 100%;
    margin-left: 12px;
}

.faq-body {
    padding: 0 24px 24px 24px;
    font-size: 1rem;
    color: #222;
}

.faq-chevron::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/></svg>') no-repeat center;
    transition: transform 0.2s;
}

.faq-toggle[aria-expanded="true"] .faq-chevron::after {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .hero-text {
        padding-left: 70px;
    }

    .hero .btn {
        width: 257px;
        height: 54px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .process-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-left: 24px;
        padding-right: 12px;
    }

    .process .row {
        flex-wrap: nowrap !important;
        min-width: 900px;
    }

    .process .col-md-3,
    .process .col-md-1 {
        flex: 0 0 auto;
        width: 75vw;
        max-width: 260px;
        min-width: 180px;
    }

    .process .col-md-1 {
        width: 40px;
        min-width: 40px;
        max-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Footer */

footer .container {
    max-width: 900px;
}

/* Login */

.divider-vertical-container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.divider-vertical-label {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    font-size: 2.5rem;
    font-family: var(--main-font);
    font-weight: 400;
    color: #222;
    z-index: 2;
    padding: 0 16px;
    letter-spacing: 1px;
}

.divider-vertical {
    width: 1px;
    height: 80vh;
    background: #bdbdbd;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.custom-date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-date-input {
    padding-right: 48px !important;
    height: 48px;
}

.custom-date-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    height: 24px;
}

.custom-date-input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    right: 0;
}

.custom-date-input[type="date"]::-ms-input-placeholder {
    color: #888;
}

.custom-date-input[type="date"]::placeholder {
    color: #888;
}

.divider-horizontal-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 32px 0 24px 0;
}

.divider-horizontal-line {
    border: none;
    border-top: 2px solid #bdbdbd;
    margin: 0;
}

.divider-horizontal-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: #fff;
    font-size: 38px;
    font-family: var(--main-font);
    font-weight: 400;
    color: #222;
    padding: 0 16px;
    z-index: 2;
    letter-spacing: 1px;
    line-height: 1;
}
/*Account*/

.container-account {
    max-width: 1000px;
}

/* Menüleiste für Overview */
.overview-nav {
    margin-top: 32px;
    margin-bottom: 48px;
}

.overview-nav-link {
    color: #000;
    font-family: var(--main-font);
    font-size: 18px;
    font-weight: 400;
    padding: 0 24px;
    transition: color 0.2s;
}

    .overview-nav-link.active,
    .overview-nav-link:focus,
    .overview-nav-link:hover {
        font-weight: 600;
        color: #000;
        text-decoration: none;
        background: none;
        cursor: pointer;
    }

.accountoverview .btn {
    width: 12rem;
}

.stamp-dot {
    font-size: 1.2rem;
    line-height: 1;
}

.stamp-row {
    display: flex;
    margin-bottom: 0.1rem;
}

.stamp-dot.filled {
    color: var(--bs-primary);
}

.stamp-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
}

.stamp-badge {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-30%, -25%);
    background: #CBB385;
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: none;
    padding: 0;
}

.stamp-icon-img {
    display: block;
}

.img-muehlenkarte {
    width: 304px;
    height: 182px;
}

.img-empty-voucher {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.no-card-box {
    background: #555;
    border-radius: 0.5rem;
    min-height: 220px;
    padding: 2.5rem 1rem 2rem 1rem;
}


.btn:disabled {
    background: #eee;
    color: #222;
    opacity: 1;
    border: none;
    font-weight: bold;
    min-width: 240px;
    box-shadow: none;
}

.stamp-row {
    display: flex;
    gap: 0.1rem;
}

.stamp-dot {
    font-size: 1.3rem;
    color: #222;
    margin-right: 0.1rem;
}

.stamp-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
}

.stamp-icon-img {
    display: block;
}

/* Topup */
#payExecuteError {
    display: none;
    color: red;
    padding-top: 20px;
    text-align: justify;
}


/* Cookie */

#cookieWarning .btn{
    width: 40%;
}



/**
* Sylvester design 
**/

.hero-side-divider { 
    height:1px;
    background:#D7B482;
    width:100%; 
}

.sylvester-badge {
    z-index: 2; 
}

.brand-bar { 
    height:10px;
    width:100%;
    background:#D7B482;
    border-radius:4px;
}

.qty-box {
    border:1px solid var(--bs-primary);
    width:2.4rem;
    min-width: 2.4rem;
    height:2.4rem;
    min-height: 2.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    line-height:1;
    padding: 0px;
    margin: 0px;
}

.qty-box-input {
    border: 1px solid var(--bs-primary);
    border-left: 0px;
    border-right: 0px;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
}

.qty-box-input:focus {
    border: 1px solid var(--bs-primary-hover);
}

.qty-box:hover {
    border:1px solid var(--bs-primary-hover);
    cursor:pointer;
}

/* reset product box */
.product-box {
    border: 0;
    justify-content: unset;
}

/* reset product box hover */
.product-box:hover {
    box-shadow: 0 0 0 rgba(0,0,0,0.08);
    border: none;
}

/* reset product box link */
.product-box a {
    text-decoration: none;
    color: black;
}

footer {
    background-color: var(--bg-gray);
}
 
.filterProductsNot {
    display: none;
}

.stores-col {
    height: 500px !important;
    overflow-y: scroll;
}

.store-card {
    border: 0;
    border-top: 1px solid lightgray;
    border-radius: 0;
}

.store-card:hover {
    box-shadow: unset;
}

.store-name {
    font-size: 1.1rem;
}

.store-address {
    font-size: 1rem;
    line-height: 1.2;
}

.btn-time {
    border-color: #808080;
    background-color: #F3F3F3;
    color: #808080;
    height: 52px;
    width: 100%;
    font-weight: bold;
}

.btn-time:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary-hover);
    color: white;
    font-weight: bold;
}

.cart-sidebar {
    background-color: #505050;
    color: white;
}

.hero-badge {
    width:164px;
    height:164px;
    font-weight:800;
    font-size:30px;
    color:#424e40;
    line-height:1;
    transform: rotate(-20deg);
}

.cart-item a {
    color: black;
    text-decoration: none;
}

.ol_graustufe {
    filter: grayscale(100%);
}

.picture-box {
    min-height: 300px;
    max-height: unset;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    text-decoration: none;
}