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

    --color-gray: #808080;
    --color-positive: #12b500;
    --color-negative: #e00000;
}

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

/* Hero image col: always fills its space */
.hero .col-lg-6.bg-white {
    overflow: hidden;
    min-height: 340px;
}

.hero .col-lg-6.bg-white img,
.hero .col-md-12 img,
.hero .d-block.d-md-none img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero buttons: stay in one row, shrink gracefully */
.hero .d-flex.gap-4 {
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
}

.hero .d-flex.gap-4 .btn,
.hero .d-flex.flex-row .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(13px, 2vw, 16px);
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Mobile hero button row */
.hero .col-12.d-flex.flex-row {
    gap: 0.75rem;
    flex-wrap: nowrap !important;
    padding-left: 1rem;
    padding-right: 1rem;
}


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

    /* On md screens the two buttons might still be tight – allow shrink below 257px */
    @media (max-width: 1100px) {
        .hero .btn {
            width: auto;
            min-width: 140px;
        }
    }
}

@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;
    /* Generous spacing on wide screens; tightened per breakpoint below so all five items
       stay on one line down to tablet (md) width. Only wraps on phones, where this
       horizontal nav is hidden anyway (mobile uses the button nav). */
    padding: 0 24px;
    white-space: nowrap;
    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;
    }

/* lg (≤1199px → .container is 960px wide, e.g. iPad landscape): tighten the spacing so all
   five items stay on one line. */
@media (max-width: 1199.98px) {
    .overview-nav-link { padding: 0 14px; }
}
/* md (≤991px → .container is 720px wide, e.g. iPad portrait): tighten spacing + font so it
   still fits on one line. Below md the nav is hidden (phones use the button nav). */
@media (max-width: 991.98px) {
    .overview-nav-link { padding: 0 8px; font-size: 14px; }
}

/* Bonus-Stempel info tooltip (Manage/Index) — solid black bubble with centred white text
   and a matching arrow, per Figma node 611-1967. */
.bonus-stempel-tooltip {
    --bs-tooltip-bg: #000;
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-border-radius: 5px;
    --bs-tooltip-font-size: 0.95rem;
    --bs-tooltip-max-width: 220px;
    --bs-tooltip-padding-x: 14px;
    --bs-tooltip-padding-y: 10px;
}
.bonus-stempel-tooltip .tooltip-inner {
    text-align: center;
    line-height: 1.3;
}

.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,
.img-gutschein {
    width: 304px;
    height: 182px;
    object-fit: contain;
    display: block;
}

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

/* Footer link list: tighter vertical spacing + underline on hover */
.footer-link-list .nav-link {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

.footer-link-list .nav-link:hover,
.footer-link-list .nav-link:focus {
    text-decoration: underline;
}
 
.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 {
    width: 128px;
    height: 42px;
    border-radius: 9px;
    background-color: #F3F3F3;
    color: #808080;
    border: 0.5px solid #808080;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    white-space: nowrap;
    padding: 0;
}

.btn-time:hover:not(:disabled) {
    background: #e0dada;
}

.btn-time.active {
    background: var(--bs-primary);
    font-weight: bold;
    color: #fff;
}

.btn-time.active:hover {
    background: var(--bs-primary-hover);
}

.btn-time:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-time .time-value::after {
    content: " Uhr";
}

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

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

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

.product-options-select {
    font-size: 0.85rem;
    height: 2.4rem;
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.5rem center;
    background-size: 8px 8px;
    padding-left: 1.5rem;
    padding-right: 0.5rem;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 120px;
    width: auto;
}

.product-options-select:focus {
    box-shadow: none;
    outline: none;
    background-color: rgba(0,0,0,0.02);
}

.price-display {
    min-width: 60px;
    text-align: right;
    display: inline-block;
}

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

/* ── Shared ───────────────────────────────────────────── */
.bm-home { font-family: 'Futura PT', sans-serif; color: #3d3d3d; }
.bm-section-title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    margin-bottom: 0;
}

/* Brand-Color Utility-Klassen (für Inline-Nutzung mit Bootstrap) */
.bg-gold { background-color: #D7B482 !important; }
.text-gold { color: #D7B482 !important; }
.border-gold { border-color: #D7B482 !important; }

/* Card-Hover Helpers für Pickup/Delivery Cards (Bootstrap card + leichter Lift) */
.home-hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.home-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.home-zoom-img { transition: transform .4s ease; }
.home-hover-lift:hover .home-zoom-img { transform: scale(1.04); }

/* ── 1. Hero ──────────────────────────────────────────── */
.bm-hero {
    display: grid;
    grid-template-columns: 60fr 40fr;
    grid-template-rows: 254px 254px;
    gap: 6px;
    padding: 6px;
}
.bm-hero__panel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.bm-hero__panel--main { grid-row: 1 / 3; }
.bm-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}
.bm-hero__panel:hover .bm-hero__bg { transform: scale(1.04); }
.bm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, transparent 100%);
}
.bm-hero__content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.75rem;
    color: #fff;
}
.bm-hero__kicker {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .3rem;
    opacity: .9;
}
.bm-hero__title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: .75rem;
}
.bm-hero__panel--sub .bm-hero__title { font-size: clamp(1rem, 1.6vw, 1.35rem); }
.bm-btn-hero {
    display: inline-block;
    background-color: #D7B482;
    color: #fff !important;
    border: none;
    border-radius: 24px;
    font-family: 'Futura PT', sans-serif;
    font-weight: 600;
    font-size: .875rem;
    padding: .4rem 1.2rem;
    letter-spacing: .04em;
    text-decoration: none !important;
    transition: background .2s;
}
.bm-btn-hero:hover { background-color: #c4a065; }
.bm-b2b-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.93);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    transform: rotate(-8deg);
    transition: transform .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: .68rem;
    text-transform: uppercase;
    color: #3a3a3a !important;
    line-height: 1.25;
    padding: .5rem;
}
.bm-b2b-badge:hover { transform: rotate(-8deg) scale(1.06); }

/* ── 2. Steps: identisch mit .process auf Products-Seite ─ */

/* Abholen/Lieferung: Bootstrap card + bg-gold + home-hover-lift — kein Custom-Block mehr nötig */

/* ── 4. Mühlenkarte Banner ────────────────────────────── */
.bm-muehlenkarte-banner {
    display: block;
    padding: 72px 0;          /* Freiraum für Kartenüberlauf oben + unten */
    text-decoration: none !important;
    position: relative;
    transition: opacity .2s;
}
.bm-muehlenkarte-banner:hover { opacity: .9; }
.bm-muehlenkarte-banner__strip {
    background-color: #D7B482;
    height: 86px;
    position: relative;
    display: flex;
    align-items: center;
}
.bm-muehlenkarte-banner__card {
    position: absolute;
    left: 19%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    height: 216px;            /* überragt Leiste oben + unten */
    width: auto;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
    pointer-events: none;
}
.bm-muehlenkarte-banner__text {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1rem, 2.3vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    white-space: nowrap;
    margin-left: 36%;
}
@media (max-width: 991px) {
    .bm-muehlenkarte-banner__card { left: 5%; height: 160px; }
    .bm-muehlenkarte-banner__text { margin-left: 30%; font-size: 1rem; }
}
@media (max-width: 575px) {
    .bm-muehlenkarte-banner { padding: 50px 0; }
    .bm-muehlenkarte-banner__card { left: 2%; height: 130px; }
    .bm-muehlenkarte-banner__text { margin-left: 40%; white-space: normal; font-size: .85rem; }
}

/* ── 4. Highlights ────────────────────────────────────── */
/* Section-padding + Header werden mit Bootstrap-Utilities gesetzt (py-5, d-flex, justify-content-between, mb-4) */
.bm-nav-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid #D7B482;
    background: transparent;
    color: #D7B482;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.bm-nav-btn:hover { background: #D7B482; color: #fff; }
/* .bm-highlight-grid wurde durch Bootstrap row row-cols-* ersetzt */
.bm-highlight-card { display: flex; flex-direction: column; height: 100%; }
.bm-highlight-card > a { display: block; text-decoration: none; color: inherit; }
.bm-highlight-card__img-wrap {
    position: relative;
    padding-top: 90%;   /* etwas mehr Höhe als Figma-Original für größere Bildwirkung */
    overflow: hidden;
    background: #f2f0ec;
    margin-bottom: 1rem;
}
.bm-highlight-card__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}
.bm-highlight-card:hover .bm-highlight-card__img { transform: scale(1.04); }
.bm-highlight-card__tags {
    position: absolute;
    top: .75rem; right: .75rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: flex-end;
}
.bm-highlight-card__tag {
    background: #3d5a47;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .2rem .6rem;
    border-radius: 3px;
    text-transform: uppercase;
}
.bm-highlight-card__name {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
    color: #1a1a1a;
    margin-bottom: .5rem;
    text-decoration: none;
    display: block;
}
.bm-highlight-card__name:hover { color: #D7B482; text-decoration: none; }
/* Footer & Preise: durch Bootstrap-Utilities ersetzt (d-flex justify-content-between mt-auto pt-2 + d-flex flex-column) */
.bm-highlight-card__price {
    font-weight: 700;
    font-size: 1rem;
    color: #3d3d3d;
}
.bm-highlight-card__price--sale { color: #c0392b; }
.bm-highlight-card__price-old {
    font-size: .8rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}
.bm-highlight-card__basket {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: #D7B482;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .2s;
    flex-shrink: 0;
}
.bm-highlight-card__basket:hover { background-color: #c4a065; }
.bm-highlight-skeleton {
    background: #f0eeeb;
    padding-top: 80%;
    animation: bm-pulse 1.4s ease-in-out infinite;
}
@keyframes bm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* ── 5. Blog Carousel ─────────────────────────────────── */
.bm-blog { position: relative; overflow: hidden; height: 340px; }
.bm-blog__inner {
    display: flex;
    height: 100%;
    align-items: stretch;
}
.bm-blog__side {
    width: 155px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.bm-blog__side img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.65) grayscale(.25);
    transition: filter .3s;
}
.bm-blog__side:hover img { filter: brightness(.8) grayscale(.1); }
.bm-blog__inner.is-animating { transition: opacity .25s ease; }
.bm-blog__inner.is-fading { opacity: 0; }
.bm-blog__center {
    flex: 1;
    display: grid;
    grid-template-columns: 55% 45%;
    min-width: 0;
}
.bm-blog__photo { overflow: hidden; }
.bm-blog__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-blog__text {
    background-color: #D7B482;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2rem;
    color: #fff;
    overflow: hidden;
    min-height: 0;
}
.bm-blog__sub {
    font-size: .775rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    opacity: .9;
}
.bm-blog__title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: .9rem;
}
.bm-blog__body {
    font-size: .875rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
}
.bm-blog__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #3d3d3d;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: background .2s;
}
.bm-blog__arrow:hover { background: #fff; }
.bm-blog__arrow--left  { left:  110px; }
.bm-blog__arrow--right { right: 110px; }

/* ── 6. Sortiments-Bar ────────────────────────────────── */
.bm-sortiment { padding: 3.5rem 0 4rem; }
.bm-sortiment__title { margin-bottom: 2.5rem; }
.bm-sortiment-bar {
    /* Single horizontal row that fills the width when the items fit and becomes
       swipeable (horizontal scroll) when it does not — replaces the old fixed grid
       whose inline grid-template-columns broke responsiveness on mobile. */
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox: hide scrollbar */
    border-top: 1px solid #D7B482;
    border-bottom: 1px solid #D7B482;
}
.bm-sortiment-bar::-webkit-scrollbar { display: none; }   /* Chrome/Safari: hide scrollbar */
.bm-sortiment-item {
    /* Grow to share the width when everything fits; never shrink below the basis so
       the row overflows (and scrolls) instead of squeezing the items on mobile. */
    flex: 1 0 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    text-align: center;
    text-decoration: none !important;
    color: #1a1a1a !important;
    padding: 1.6rem .75rem 1.2rem;
    border-right: 1px solid #D7B482;
    transition: transform .2s ease, background .2s ease;
    min-height: 140px;
}
.bm-sortiment-item:last-child { border-right: none; }
.bm-sortiment-item:hover {
    background: rgba(215,180,130,.08);
    transform: translateY(-2px);
}
.bm-sortiment-item.bm-sortiment-item--active {
    background: rgba(215,180,130,.18);
}
.bm-sortiment-item.bm-sortiment-item--active .bm-sortiment-item__label {
    color: #8B6A3F;
}
.bm-sortiment-item__icon {
    height: 56px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.bm-sortiment-item__label {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
    color: #1a1a1a;
}
@media (max-width: 575px) {
    /* Tighter items on phones; the row stays a single swipeable line via overflow-x. */
    .bm-sortiment-item { flex-basis: 6rem; padding: 1.2rem .6rem 1rem; min-height: 120px; }
    .bm-sortiment-item__icon { height: 48px; }
}

/* ── 7. Sortiments-Reihe (Info-Card + Produkte) ──────── */
/* Layout via Bootstrap row + col-lg-4/col-lg-8 — kein Custom-Grid mehr */
.bm-info-card {
    background-color: #D7B482;
    padding: 3rem 2.5rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}
.bm-info-card__icon {
    height: 110px;
    width: auto;
    align-self: center;
    margin-bottom: 2.5rem;
}
.bm-info-card__title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    letter-spacing: .02em;
}
.bm-info-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}
.bm-info-card__list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .55rem;
}
.bm-info-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 16px;
    height: 11px;
    border: 3px solid #fff;
    border-radius: 50%;
    transform: rotate(-33deg);
}
/* Header rechts (Next-Button) und 2-Spalten-Grid laufen jetzt über Bootstrap-Utilities */

@media (max-width: 575px) {
    .bm-info-card { padding: 2rem 1.5rem; }
    .bm-info-card__icon { height: 80px; margin-bottom: 1.5rem; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
    .bm-hero {
        grid-template-columns: 1fr;
        grid-template-rows: 300px 190px 190px;
    }
    .bm-hero__panel--main { grid-row: 1; }
    .bm-blog__side { width: 70px; }
    .bm-blog__arrow--left  { left:  48px; }
    .bm-blog__arrow--right { right: 48px; }
}
@media (max-width: 575px) {
    .bm-blog { height: auto; }
    .bm-blog__inner { flex-direction: column; height: auto; }
    .bm-blog__side { display: none; }
    .bm-blog__center { grid-template-columns: 1fr; }
    .bm-blog__photo { height: 220px; }
    .bm-blog__arrow { display: none; }
    .bm-muehlenkarte-banner__text { font-size: .85rem; white-space: normal; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   Product-Section-Komponente (GrapesJS-Block "Produkt-Sektion")
   muss sowohl im Pagedesigner-Canvas als auch in der publizierten
   Seite verfügbar sein.
   ════════════════════════════════════════════════════════════════ */

.bm-section-title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    margin-bottom: 0;
}

.bm-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #D7B482;
    background: transparent;
    color: #D7B482;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.bm-nav-btn:hover { background: #D7B482; color: #fff; }

.bm-highlight-card { display: flex; flex-direction: column; height: 100%; }
.bm-highlight-card > a { display: block; text-decoration: none; color: inherit; }

.bm-highlight-card__img-wrap {
    position: relative;
    padding-top: 90%;
    overflow: hidden;
    background: #f2f0ec;
    margin-bottom: 1rem;
}
.bm-highlight-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}
.bm-highlight-card:hover .bm-highlight-card__img { transform: scale(1.04); }

.bm-highlight-card__tags {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: flex-end;
}
.bm-highlight-card__tag {
    background: #3d5a47;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .2rem .6rem;
    border-radius: 3px;
    text-transform: uppercase;
}

.bm-highlight-card__name {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
    color: #1a1a1a;
    margin-bottom: .5rem;
    text-decoration: none;
    display: block;
}
.bm-highlight-card__name:hover { color: #D7B482; text-decoration: none; }

.bm-highlight-card__price {
    font-weight: 700;
    font-size: 1rem;
    color: #3d3d3d;
}
.bm-highlight-card__price--sale { color: #c0392b; }
.bm-highlight-card__price-old {
    font-size: .8rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}
.bm-highlight-card__basket {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #D7B482;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .2s;
    flex-shrink: 0;
}
.bm-highlight-card__basket:hover { background-color: #c4a065; }

.bm-highlight-skeleton {
    background: #f0eeeb;
    padding-top: 80%;
    animation: bm-pulse 1.4s ease-in-out infinite;
}
@keyframes bm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.bm-info-card {
    background-color: #D7B482;
    padding: 3rem 2.5rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    color: #1a1a1a;
}
.bm-info-card__icon {
    height: 110px;
    width: auto;
    align-self: center;
    margin-bottom: 2.5rem;
}
.bm-info-card__title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    letter-spacing: .02em;
}
.bm-info-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}
.bm-info-card__list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .55rem;
}
.bm-info-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 16px;
    height: 11px;
    border: 3px solid #fff;
    border-radius: 50%;
    transform: rotate(-33deg);
}

@media (max-width: 575px) {
    .bm-info-card { padding: 2rem 1.5rem; }
    .bm-info-card__icon { height: 80px; margin-bottom: 1.5rem; }
}

/* ──── Product-Section Layout-Umschaltung via data-show-info-card ──── */
.product-section__body { display: block; }

.product-section__slider-wrapper {
    position: relative;
    min-width: 0;
}
.product-section__slider { min-width: 0; }

.product-section__splide,
.product-section__splide .splide__track {
    max-width: 100%;
    overflow: hidden;
}
.product-section__splide .splide__list {
    margin: 0;
    padding: 0;
}

.product-section__side-next {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    transition: background .2s, color .2s, box-shadow .2s;
    flex-shrink: 0;
}
.product-section__side-next:hover {
    background: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.product-section[data-show-info-card="true"] .product-section__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 991.98px) {
    .product-section[data-show-info-card="true"] .product-section__body {
        grid-template-columns: 1fr;
    }
}

.product-section[data-show-info-card="false"] .product-section__info-card { display: none; }
.product-section[data-show-info-card="false"] .product-section__slider-wrapper { width: 100%; }

/* ── Product detail: Breadcrumb + Tags ────────────────── */
.bm-product-breadcrumb .breadcrumb {
    font-size: 0.9rem;
    background: transparent;
    padding: 0;
    margin: 0;
}
.bm-product-breadcrumb .breadcrumb-item,
.bm-product-breadcrumb .breadcrumb-item a {
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.bm-product-breadcrumb .breadcrumb-item a:hover {
    color: #D7B585;
    text-decoration: underline;
}
.bm-product-breadcrumb .breadcrumb-item.active {
    color: #8B6A3F;
    font-weight: 700;
}
.bm-product-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #D7B585;
    content: "›";
    padding: 0 0.35rem;
}

.bm-product-tag {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background: #D7B585;
    color: #ffffff;
    font-family: 'Futura PT', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
}

.product-section__slider--carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-section__slider--carousel::-webkit-scrollbar { display: none; }
.product-section__slider--carousel > .bm-highlight-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    min-width: 0;
}
@media (max-width: 991.98px) {
    .product-section__slider--carousel > .bm-highlight-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}
@media (max-width: 575.98px) {
    .product-section__slider--carousel > .bm-highlight-card {
        flex: 0 0 82%;
    }
}

.product-section__side-prev {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    transition: background .2s, color .2s, box-shadow .2s;
    flex-shrink: 0;
}
.product-section__side-prev:hover {
    background: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ── Blog Carousel ─────────────────────────────────────────── */
.bm-blog { position: relative; overflow: hidden; height: 340px; }
.bm-blog__inner {
    display: flex;
    height: 100%;
    align-items: stretch;
}
.bm-blog__side {
    width: 155px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.bm-blog__side img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.65) grayscale(.25);
    transition: filter .3s;
}
.bm-blog__side:hover img { filter: brightness(.8) grayscale(.1); }

/* Splide-Wrapper nimmt die mittlere Spalte ein, alle Splide-Wrapper spannen volle Höhe */
.bm-blog__splide {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.bm-blog__splide,
.bm-blog__splide .splide__track,
.bm-blog__splide .splide__list,
.bm-blog__splide .splide__slide {
    height: 100%;
}

.bm-blog__center {
    height: 100%;
    display: grid;
    grid-template-columns: 55% 45%;
    min-width: 0;
}
.bm-blog__photo { overflow: hidden; }
.bm-blog__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-blog__text {
    background-color: #D7B482;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2rem;
    color: #fff;
}
.bm-blog__sub {
    font-size: .775rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    opacity: .9;
}
.bm-blog__title {
    font-family: 'Futura PT', sans-serif;
    font-weight: 900;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: .9rem;
}
.bm-blog__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #3d3d3d;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: background .2s;
}
.bm-blog__arrow:hover { background: #fff; }
.bm-blog__arrow--left  { left:  110px; }
.bm-blog__arrow--right { right: 110px; }

@media (max-width: 991.98px) {
    .bm-blog__side { width: 70px; }
    .bm-blog__arrow--left  { left:  48px; }
    .bm-blog__arrow--right { right: 48px; }
}

@media (max-width: 767.98px) {
    .bm-blog { height: auto; }
    .bm-blog__inner { flex-direction: column; height: auto; }
    .bm-blog__side { display: none; }
    .bm-blog__center { grid-template-columns: 1fr; }
    .bm-blog__photo { height: 220px; }
    .bm-blog__arrow { display: none; }
}

.bm-blog__link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.bm-blog__link:hover .bm-blog__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ── Map popup ──────────────────────────────────── */
.ol-popup {
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    color: #212529;
    min-width: 220px;
    position: relative;
}
.ol-popup:after  { border-top-color: rgba(255, 255, 255, 0.95); }
.ol-popup:before { border-top-color: rgba(0, 0, 0, 0.25); }
.ol-popup-closer {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    text-decoration: none;
    color: #212529;
    font-size: 1.5rem; font-weight: bold; line-height: 1;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    transition: background-color 0.2s;
    z-index: 10;
}
.ol-popup-closer:hover { background: rgba(0,0,0,0.1); color: #000; }
.ol-popup-closer::after { content: '×'; font-size: 1.8rem; }

/* ── Filter bar ──────────────────────────────────── */
.stores-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 0.75rem;
    margin-bottom: 0;
}
.stores-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    color: #212529;
    cursor: pointer;
    font-family: inherit;
}
.stores-filter-toggle:focus { outline: 2px solid var(--bs-primary, #D7B585); }
.stores-all-link {
    font-size: 1rem;
    color: var(--bs-primary, #D7B585);
    text-decoration: none;
    cursor: pointer;
}
.stores-all-link:hover { text-decoration: underline; color: var(--bs-primary, #D7B585); }

/* Filter modal layout uses Bootstrap 5 utilities (rounded-0, modal-lg, row/col,
    input-group). Only the checkboxes need an override: Figma shows square, slightly
    larger outlines, and BS5 has no utility for checkbox size/shape. */
.stores-filter-modal .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 1.5px solid #b0b0b0;
    border-radius: 0;
}

/* Blocking overlay shown while a store is being selected / switched,
    so the customer gets immediate feedback and can't click repeatedly. */
.store-switch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(255, 255, 255, 0.7);
    align-items: center;
    justify-content: center;
}
.store-switch-overlay.is-active { display: flex; }
.store-switch-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
    font-weight: 500;
}
.store-switch-overlay__box i { font-size: 2rem; color: var(--bs-primary, #D7B482); }

/* ── Store row ───────────────────────────────────── */
.store-row {
    padding: 1.25rem 0;
}
.store-row-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.store-row-info {
    flex: 1 1 0;
    min-width: 0;
}
.store-row-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: #1a1a1a;
}
.store-row-name--link { cursor: pointer; }
.store-row-name--link:hover { color: var(--bs-primary, #D7B585); }
.store-row-address {
    font-size: 0.875rem;
    color: #3d3d3d;
    margin-bottom: 0.2rem;
    line-height: 1.4;
}
.store-row-phone {
    font-size: 0.875rem;
    color: #3d3d3d;
    margin-bottom: 0.2rem;
}
.store-row-earliest {
    font-size: 0.8125rem;
    color: #555;
    margin-top: 0.2rem;
}
.store-row-earliest i { margin-right: 0.2rem; }

.store-row-status {
    flex: 0 0 auto;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}
.store-open   { color: #2d7a3a; font-weight: 500; }
.store-closed { color: #c0392b; font-weight: 500; }
.store-row-distance { color: #3d3d3d; }
.store-row-route {
    color: #1a1a1a;
    text-decoration: underline;
    font-size: 0.875rem;
}
.store-row-route:hover { color: var(--bs-primary, #D7B585); }

.store-row-image {
    flex: 0 0 150px;
    width: 150px;
    align-self: stretch;       /* fill the card height — reaches both dividers */
    min-height: 150px;
    position: relative;        /* absolute img → div has no intrinsic height,
                                    so the row height is driven by the text columns */
    overflow: hidden;
}
.store-row-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.store-row-image--link { cursor: pointer; }

/* ── Toggle link ─────────────────────────────────── */
.store-row-toggle {
    margin-top: 0.6rem;
}
.store-toggle-link {
    font-size: 0.8125rem;
    color: #1a1a1a;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.store-toggle-link:hover { color: var(--bs-primary, #D7B585); text-decoration: underline; }
.store-toggle-link .toggle-label-less { display: none; }
.store-toggle-link .toggle-label-more { display: inline-flex; align-items: center; gap: 0.3rem; }
.store-toggle-link[aria-expanded="true"] .toggle-label-more { display: none; }
.store-toggle-link[aria-expanded="true"] .toggle-label-less { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ── Expanded details ────────────────────────────── */
.store-details-body {
    padding-top: 0.875rem;
}

.store-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--bs-primary, #D7B585);
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8125rem;
    color: #3d3d3d;
    white-space: nowrap;
    background: #fff;
}

.store-opening-hours {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    margin-bottom: 0.75rem;
}
/* Each block is exactly half-width (minus half the gap), so ÖFFNUNGSZEITEN
    always sits on the left and FEIERTAGE on the right — even if only one is present */
.store-opening-block {
    flex: 0 0 calc(50% - 1rem);
    min-width: 0;
    overflow: hidden;
}
.store-opening-header {
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    color: #1a1a1a;
}
.store-opening-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    border-bottom: 1px solid #e8e8e8;
    padding: 0.1rem 0;
}
.store-opening-row:last-child { border-bottom: none; }
.store-opening-day {
    color: #3d3d3d;
    flex-shrink: 1;
}
.store-opening-time { color: #1a1a1a; flex-shrink: 0; }
.store-closed-text  { color: #c0392b; }

.store-row-divider  { margin: 0; border-color: #e0e0e0; }

/* Override Standard.css which sets .store-card to a fixed clamp width */
.store-cards-main .store-card { width: 100%; }

/* "Alle Standorte" modal: drop the default list indent/bullets so the store entries
   start flush at the column's left edge — flush with the (left-aligned) column headers. */
.all-stores-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* ── Layout: 60vh panels vertically centered ─────── */
:root { --nav-height: 100px; }

/* Panels are top-aligned (not centred in the full viewport height) so the
   "Liefern lassen?" hint placed below the row stays within view without scrolling. */
#storesRow {
    align-items: flex-start;
}

/* Stores column: flex column so filter bar stays pinned, cards scroll.
    position:relative is the positioning context for the absolute filter overlay. */
#storesListCol {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 65vh;
    overflow: hidden;
}
.store-cards-main {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Map column */
#storesMapCol {
    padding-left: 0;
}
/* Height set directly on map so OpenLayers can read it at init time.
    max-height override needed because Standard.css clamps .map to 50vh. */
#map {
    height: 65vh;
    max-height: 65vh;
    width: 100%;
}

/* Even top spacing so the store list/map don't stick to the top edge (UX review #3, #37). */
#storesRow { padding-top: 1rem; }

/* Keep the add-to-cart button a constant size when its icon swaps to a loading spinner
   (UX review #3) — min size + flex centering prevent the button from resizing. */
.addItemToCart {
    min-width: 2.6rem;
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Store photo on mobile: shown inside the expanded "Mehr anzeigen" section (UX review #3, #33),
   not as an always-visible full-width block. Hidden on desktop (image sits beside the info there). */
.store-row-image-mobile { width: 100%; margin-top: 1rem; }
.store-row-image-mobile img { width: 100%; height: auto; max-height: 200px; object-fit: cover; display: block; border-radius: 8px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 991px) {
    #storesRow        { min-height: 0; align-items: flex-start; }
    #storesListCol    { height: auto; overflow: visible; }
    .store-cards-main { overflow: visible; }
    /* Map view (mobile "Karte" toggle): restore the left gutter so the map has even side
       padding. The global padding-left:0 is only meant for the desktop side-by-side layout. */
    #storesMapCol     { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); }
    /* Single-column store card per Figma (#33): info, then status + full-width "Hier abholen",
       then "Mehr anzeigen" last. Photo only inside the expanded section, not in the main row. */
    .store-row-main   { flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .store-row-info   { width: 100%; min-width: 0; }
    .store-row-status { width: 100%; min-width: 0; margin-top: 0.75rem; }
    .store-row-image  { display: none; }   /* main-row photo hidden on mobile; shown inside the collapse instead (#33) */
    .store-row-order-btn { width: 100%; }
    .store-row-toggle { margin-top: 0.5rem; }
    .store-opening-hours { flex-direction: column; gap: 1rem; }
    .store-opening-block { flex-basis: auto; width: 100%; }
}