/* =========================================
   CUSTOM OVERRIDES (JTL NOVA CHILD)
   ========================================= */

/* --- Font Awesome: swap statt block → weniger CLS --- */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: swap;
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: swap;
}


/* =========================================
   EQUAL-HEIGHT PRODUCT CARDS
   ========================================= */

.product-list.layout-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2rem !important;          /* Abstand zwischen Zeilen — ersetzt margin-bottom */
}

/* WICHTIG: margin-bottom auf ALLEN Wrappern neutralisieren!
   my-nova.css setzt #product-list .product-wrapper:not(:last-child) { margin-bottom: 4rem }
   → letzte Card hat 0 Margin, andere 4rem → unterschiedliche Content-Höhen im Flex-Row.
   Wir nutzen stattdessen row-gap auf dem Container. */
#product-list .product-wrapper,
.product-list .product-wrapper {
    display: flex !important;
    margin-bottom: 0 !important;
    height: auto !important;           /* JTL-JS setzt inline height → muss überschrieben werden */
}

.product-list .productbox {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.product-list .productbox > form {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-list .productbox .productbox-inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Row als Flex-Column statt Row+Wrap — damit flex-grow auf letzter Spalte greift */
.product-list .productbox .productbox-inner > .row {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

/* Bootstrap col-12 Reset: im Column-Kontext nur Content-Höhe, volle Breite */
.product-list .productbox .productbox-inner > .row > [class*="col"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Letzte Spalte füllt restliche Höhe → margin-top:auto auf quickbuy greift */
.product-list .productbox .productbox-inner > .row > [class*="col"]:last-child {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Quick-Buy immer ganz unten in der Card */
.productbox-quickbuy {
    margin-top: auto !important;
    padding: 0.5rem 0 0.25rem !important;
}


/* =========================================
   QUICK-BUY: Produktübersicht
   Mobile First — alle Basis-Styles = Mobile
   ========================================= */

/* --- Varianten-Pills Container --- */
.productbox-quickbuy .quickbuy-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin-bottom: 0.4rem !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
}

/* --- Einzelne Pill --- */
.productbox-quickbuy .quickbuy-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.15rem 0.45rem !important;
    border: 1.5px solid #dee2e6 !important;
    border-radius: 20px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
    color: #333 !important;
    text-decoration: none !important;
    min-width: 1.8rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    user-select: none !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

.productbox-quickbuy .quickbuy-pill:hover {
    border-color: var(--primary, #F8BF00) !important;
    text-decoration: none !important;
    color: #333 !important;
}

.productbox-quickbuy .quickbuy-pill.active {
    border-color: var(--primary, #F8BF00) !important;
    background: var(--primary, #F8BF00) !important;
    color: var(--dark, #333) !important;
}

.productbox-quickbuy .quickbuy-more {
    border-style: dashed !important;
    opacity: 0.6 !important;
    font-size: 0.62rem !important;
}

.productbox-quickbuy .quickbuy-more:hover {
    opacity: 1 !important;
}

/* --- Menge + Warenkorb-Zeile --- */
.productbox-quickbuy .quickbuy-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
}

/* --- Mengen-Stepper --- */
.productbox-quickbuy .quickbuy-qty {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #dee2e6 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    background: #fff !important;
}

.productbox-quickbuy .quickbuy-qty-btn {
    background: none !important;
    border: none !important;
    padding: 0 0.4rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    color: #555 !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.productbox-quickbuy .quickbuy-qty-btn:hover {
    background: var(--light, #f5f7fa) !important;
    color: var(--primary, #F8BF00) !important;
}

.productbox-quickbuy .quickbuy-qty-input {
    width: 1.6rem !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    height: 100% !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    min-width: 0 !important;
    max-width: 2rem !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

.productbox-quickbuy .quickbuy-qty-input::-webkit-inner-spin-button,
.productbox-quickbuy .quickbuy-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.productbox-quickbuy .quickbuy-qty-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Warenkorb-Button — volle Breite ausfüllen --- */
.productbox-quickbuy .quickbuy-cart {
    background: var(--primary, #F8BF00) !important;
    color: var(--dark, #333) !important;
    border: none !important;
    border-radius: 6px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 0.5rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.productbox-quickbuy .quickbuy-cart:hover {
    opacity: 0.85 !important;
    transform: scale(1.05) !important;
}

.productbox-quickbuy .quickbuy-cart:active {
    transform: scale(0.95) !important;
}

/* --- "Zum Artikel" Link-Button (Alternative) --- */
.productbox-quickbuy .quickbuy-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background: var(--primary, #F8BF00) !important;
    color: var(--dark, #333) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    line-height: 1.4 !important;
}

.productbox-quickbuy .quickbuy-link:hover {
    opacity: 0.85 !important;
    color: var(--dark, #333) !important;
    text-decoration: none !important;
}

/* --- Spinner --- */
.productbox-quickbuy .quickbuy-cart .fa-spinner {
    animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ===== Tablet (>=576px) ===== */
@media (min-width: 576px) {
    .productbox-quickbuy .quickbuy-pill {
        padding: 0.2rem 0.55rem !important;
        font-size: 0.72rem !important;
    }

    .productbox-quickbuy .quickbuy-qty {
        height: 32px !important;
    }

    .productbox-quickbuy .quickbuy-qty-input {
        width: 1.8rem !important;
        font-size: 0.78rem !important;
    }

    .productbox-quickbuy .quickbuy-cart {
        width: 34px !important;
        height: 32px !important;
    }

    .productbox-quickbuy .quickbuy-link {
        font-size: 0.75rem !important;
        padding: 0.4rem 1rem !important;
    }
}

/* ===== Desktop (>=992px) ===== */
@media (min-width: 992px) {
    .productbox-quickbuy .quickbuy-pill {
        padding: 0.2rem 0.65rem !important;
        font-size: 0.75rem !important;
    }

    .productbox-quickbuy .quickbuy-variants {
        gap: 0.3rem !important;
    }

    .productbox-quickbuy .quickbuy-qty {
        height: 34px !important;
    }

    .productbox-quickbuy .quickbuy-qty-btn {
        padding: 0 0.5rem !important;
    }

    .productbox-quickbuy .quickbuy-qty-input {
        width: 2rem !important;
        font-size: 0.8rem !important;
    }

    .productbox-quickbuy .quickbuy-cart {
        width: 36px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    .productbox-quickbuy .quickbuy-link {
        font-size: 0.78rem !important;
        padding: 0.45rem 1.2rem !important;
    }
}


/* =========================================
   PRODUCT DETAIL PAGE — Mobile First
   Alle Farben über CSS-Variablen (--primary, --secondary, --dark, --light)
   Nur NOVAChild — NOVA Original bleibt unberührt
   ========================================= */

/* --- 1. Produkttitel --- */
.product-info-inner .product-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    color: var(--dark, #333);
}

/* Artikelnummer ausblenden */
.product-info-inner .info-essential .product-sku {
    display: none;
}

/* --- 2. Meta-Info (Kategorie, Hersteller) als Inline-Pills --- */
.product-info-inner .info-essential {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin-bottom: 0.8rem;
}

.product-info-inner .info-essential li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--light, #f5f7fa);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    color: var(--gray, #707070);
    line-height: 1.5;
}

.product-info-inner .info-essential li strong {
    font-weight: 500;
    color: var(--gray-dark, #9b9b9b);
}

.product-info-inner .info-essential li a {
    color: var(--dark, #525252);
    text-decoration: none;
}

.product-info-inner .info-essential li a:hover {
    color: var(--primary, #F8BF00);
}

/* --- 3. Kurzbeschreibung --- */
.product-info-inner .shortdesc {
    background: var(--light, #f5f7fa);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-darker, #525252);
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary, #F8BF00);
}

/* --- 4. Varianten-Selector — Moderne Pills --- */
.product-info-inner .variations .variation-wrapper {
    margin-bottom: 0.5rem;
}

/* Label "Stück" */
.product-info-inner .variations dt,
.product-info-inner .variations .js-btn-slider-wrapper {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray, #707070);
    margin-bottom: 0.4rem;
}

/* Varianten-Container (swatches) */
.product-info-inner .variations dd.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Fix: Slider-Wrapper Layout (form-row negative margins überschreiben) */
.product-info-inner .variations .js-slider-items,
.product-info-inner .variations .form-row.swatches {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.product-info-inner .variations .js-slider-item,
.product-info-inner .variations .form-row.swatches > .col-auto {
    flex: 0 0 auto;
    width: auto !important;
    padding: 0;
}

/* Variation-Label als Pill-Button (swatches-text Layout) */
.product-info-inner .variations .variation.swatches,
.product-info-inner .variations label.variation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 1.2rem;
    border: 2px solid #dee2e6;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--dark, #333);
    text-align: center;
    min-width: 3.5rem;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Aufpreis-Badge + sr-only ausblenden */
.product-info-inner .variations .variation.swatches .variation-badge,
.product-info-inner .variations label.variation .variation-badge {
    display: none !important;
}

.product-info-inner .variations .variation.swatches .sr-only,
.product-info-inner .variations label.variation .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Hover */
.product-info-inner .variations .variation.swatches:hover,
.product-info-inner .variations label.variation:hover {
    border-color: var(--primary, #F8BF00);
    background: rgba(248, 191, 0, 0.05);
}

/* Active/Selected */
.product-info-inner .variations .variation.swatches.active,
.product-info-inner .variations label.variation.active {
    border-color: var(--primary, #F8BF00);
    background: var(--primary, #F8BF00);
    color: var(--dark, #333);
    box-shadow: 0 2px 8px rgba(248, 191, 0, 0.3);
}

/* (Badge ist ausgeblendet, Active-Styles nicht nötig) */

/* Nicht verfügbare Varianten */
.product-info-inner .variations .variation.swatches.not-available,
.product-info-inner .variations label.variation.not-available {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Fallback: custom-radio Varianten (dropdown/radio Layout) */
.product-info-inner .variations .custom-radio {
    padding-left: 0;
    margin-bottom: 0;
}

.product-info-inner .variations .custom-radio .custom-control-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 24px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--dark, #333);
}

.product-info-inner .variations .custom-radio .custom-control-label::before,
.product-info-inner .variations .custom-radio .custom-control-label::after {
    display: none !important;
}

.product-info-inner .variations .custom-radio .custom-control-label:hover {
    border-color: var(--primary, #F8BF00);
}

.product-info-inner .variations .custom-radio .custom-control-input:checked ~ .custom-control-label {
    border-color: var(--primary, #F8BF00);
    background: var(--primary, #F8BF00);
    color: var(--dark, #333);
    box-shadow: 0 2px 8px rgba(248, 191, 0, 0.3);
}

/* --- 5. Preis — Prominent --- */
.product-info-inner .price_wrapper {
    padding: 0.8rem 0;
    margin-bottom: 0.3rem;
    border-top: 1px solid #eee;
}

.product-info-inner .price_wrapper .price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark, #333);
    line-height: 1.2;
}

.product-info-inner .price_wrapper .price .text-muted,
.product-info-inner .price_wrapper .price .from-price {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--gray, #707070);
}

.product-info-inner .price-note,
.product-info-inner .price_wrapper .price-note {
    font-size: 0.73rem;
    color: var(--gray-dark, #9b9b9b);
    margin-top: 0.15rem;
}

.product-info-inner .price-note a {
    color: var(--gray-dark, #9b9b9b);
    text-decoration: underline;
}

/* Streichpreis */
.product-info-inner .price_wrapper .old-price {
    font-size: 1rem;
    color: var(--gray-dark, #9b9b9b);
    text-decoration: line-through;
}

/* --- 6. Verfügbarkeit — Badge-Style --- */
.product-info-inner .delivery-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Grüner Status (verfügbar) */
.product-info-inner .delivery-status .status-1,
.product-info-inner .delivery-status .status-2 {
    color: #2e7d32;
}

.product-info-inner .delivery-status:has(.status-1),
.product-info-inner .delivery-status:has(.status-2) {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Gelber Status (knapper Bestand) */
.product-info-inner .delivery-status .status-0 {
    color: #e65100;
}

.product-info-inner .delivery-status:has(.status-0) {
    background: #fff3e0;
    color: #e65100;
}

/* Lieferzeit-Text */
.product-info-inner .estimated-delivery {
    font-size: 0.73rem;
    color: var(--gray, #707070);
    margin-top: 0.15rem;
}

/* --- 7. Menge + Warenkorb --- */
.product-info-inner .form-counter {
    border: 2px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.product-info-inner .form-counter .btn {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark, #525252);
    padding: 0.4rem 0.7rem;
    transition: background 0.15s;
    line-height: 1;
}

.product-info-inner .form-counter .btn:hover {
    background: var(--light, #f5f7fa);
    color: var(--primary, #F8BF00);
}

.product-info-inner .form-counter .form-control {
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    width: 3rem;
    padding: 0.4rem 0;
    box-shadow: none;
}

/* Warenkorb-Button (überschreibt auch .btn-primary.btn-block) */
.product-info-inner button[name="inWarenkorb"],
#buy_form .product-buy button[name="inWarenkorb"],
#buy_form .basket-form-inline .btn-primary.btn-block {
    background: var(--primary, #F8BF00) !important;
    color: var(--dark, #333) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
    transition: opacity 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
}

.product-info-inner button[name="inWarenkorb"]:hover,
#buy_form .product-buy button[name="inWarenkorb"]:hover,
#buy_form .basket-form-inline .btn-primary.btn-block:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(248, 191, 0, 0.35);
}

.product-info-inner button[name="inWarenkorb"]:active,
#buy_form .product-buy button[name="inWarenkorb"]:active {
    transform: translateY(0);
}

/* --- 8. "Frage zum Artikel" — dezenter --- */
.product-info-inner .question-btn,
.product-info-inner [data-toggle="modal"][data-target*="question"] {
    font-size: 0.78rem;
    color: var(--gray, #707070);
    background: transparent;
    border: none;
    padding: 0.3rem 0;
    text-decoration: underline;
    transition: color 0.2s;
}

.product-info-inner .question-btn:hover,
.product-info-inner [data-toggle="modal"][data-target*="question"]:hover {
    color: var(--primary, #F8BF00);
}

/* --- 9. Beschreibungs-Tabs --- */
.tab-navigation {
    margin-top: 2rem;
}

#product-tabs {
    border-bottom: 2px solid var(--light, #f5f7fa);
    gap: 0;
}

#product-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray, #707070);
    padding: 0.75rem 1.2rem;
    transition: color 0.2s, border-color 0.2s;
    background: transparent;
}

#product-tabs .nav-link:hover {
    color: var(--dark, #333);
    border-bottom-color: var(--gray-medium, #ebebeb);
}

#product-tabs .nav-link.active {
    color: var(--dark, #333);
    border-bottom-color: var(--primary, #F8BF00);
    background: transparent;
}

/* Tab-Content */
#tab-content-product-tabs {
    padding: 1.5rem 0;
}

#tab-content-product-tabs .desc {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--gray-darker, #525252);
}

#tab-content-product-tabs .desc p {
    margin-bottom: 0.8rem;
}

#tab-content-product-tabs .desc ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

#tab-content-product-tabs .desc ul li {
    margin-bottom: 0.3rem;
    line-height: 1.6;
}

#tab-content-product-tabs .desc b,
#tab-content-product-tabs .desc strong {
    color: var(--dark, #333);
    font-weight: 700;
}

/* Scroll-Offset für Tabs (damit Header nicht verdeckt) */
.tab-navigation {
    scroll-margin-top: 80px;
}

/* --- 10. Bildgalerie --- */
#image_wrapper #gallery .product-image .inner img,
#image_wrapper .square-image .inner img {
    border-radius: 12px;
}

#image_wrapper .product-thumbnails .square-image .inner img {
    border-radius: 6px;
    transition: opacity 0.2s;
}

#image_wrapper .product-thumbnails .slick-current .square-image .inner img {
    outline: 2px solid var(--primary, #F8BF00);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Wishlist/Compare Icons im Bild — prominent und immer sichtbar */
.product-gallery .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
}

.product-gallery .product-actions .btn {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transition: all 0.2s;
    opacity: 1 !important;
    font-size: 1rem;
}

.product-gallery .product-actions .btn:hover {
    background: var(--primary, #F8BF00);
    transform: scale(1.1);
}

.product-gallery .product-actions .btn.wishlist {
    color: #e74c3c;
}

.product-gallery .product-actions .btn.wishlist:hover {
    background: #e74c3c;
    color: #fff;
}

/* --- Fix: JTL hidden validation button --- */
#buy_form .btn-hidden,
#buy_form .btn-hidden-default {
    display: none !important;
}

/* --- 11. Alert-Box (Variationshinweis) --- */
.product-info-inner .alert {
    border-radius: 10px;
    font-size: 0.82rem;
    padding: 0.6rem 1rem;
    border: none;
    background: var(--light, #f5f7fa);
    color: var(--gray-darker, #525252);
}

/* --- 12. Allgemeine Spacing & Separatoren --- */
.product-info-inner .product-offer > .row {
    margin-bottom: 0.3rem;
}

/* Breadcrumb dezenter */
.breadcrumb-container {
    font-size: 0.78rem;
}

.breadcrumb-container .breadcrumb-item a {
    color: var(--gray, #707070);
}

.breadcrumb-container .breadcrumb-item.active {
    color: var(--dark, #333);
}


/* ===== Tablet (>=576px) ===== */
@media (min-width: 576px) {
    .product-info-inner .product-title {
        font-size: 1.55rem;
    }

    .product-info-inner .price_wrapper .price {
        font-size: 2.2rem;
    }

    #buy_form button[name="inWarenkorb"] {
        width: auto;
        min-width: 200px;
    }
}


/* ===== Desktop (>=992px) ===== */
@media (min-width: 992px) {
    .product-info-inner .product-title {
        font-size: 1.8rem;
    }

    .product-info-inner .price_wrapper .price {
        font-size: 2.4rem;
    }

    .product-info-inner .variations .custom-radio .custom-control-label {
        padding: 0.45rem 1.2rem;
        font-size: 0.85rem;
    }

    #tab-content-product-tabs {
        padding: 2rem 0;
    }

    #tab-content-product-tabs .desc {
        font-size: 0.95rem;
        max-width: 800px;
    }
}


/* ===== Mobile Sticky Add-to-Cart Bar (< 992px) ===== */
@media (max-width: 991.98px) {
    .product-buy .basket-form-inline,
    #add-to-cart .basket-form-inline {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
        padding: 0.6rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0;
    }

    .product-buy .basket-form-inline .form-counter,
    #add-to-cart .basket-form-inline .form-counter {
        flex-shrink: 0;
    }

    .product-buy .basket-form-inline .btn-primary,
    #add-to-cart .basket-form-inline .btn-primary {
        flex: 1;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
        border-radius: 10px;
        width: auto;
    }

    /* Padding unten am Body damit Content nicht vom Sticky Bar verdeckt wird */
    body:has(#buy_form) {
        padding-bottom: 70px;
    }
}


/* =========================================
   FRONTPAGE — Ritual Herbs Design
   Angelehnt an ritual-herbs.shop
   Mobile First
   ========================================= */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&display=swap');

/* --- Color Variables ---
   Eigene Farbpalette (minimal abweichend von Referenz fuer Eigenstaendigkeit)
   WP-Referenz → JTL-Eigen:
   #974E54 → #8E4C52  (Weinrot: etwas kuehler/dunkler)
   #31472D → #2F4431  (Dunkelgruen: minimal waermer)
   #E2EBE0 → #E4EDE2  (Salbei: Tick heller/waermer)
   #4C4948 → #4A4746  (Text: Nuance dunkler)
   ------------------------------------------- */
:root {
    --rh-wine: #8E4C52;
    --rh-wine-dark: #743E43;
    --rh-green-dark: #2F4431;
    --rh-green-medium: #7D8B7A;
    --rh-sage-light: #E4EDE2;
    --rh-sage: #C9D9C6;
    --rh-cream: #FDFCF3;
    --rh-text: #4A4746;
    --rh-text-light: #696766;
    --rh-card-bg: #EEF3EC;
    --rh-font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rh-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* --- Shared Section Header --- */
.rh-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

.rh-section-header__subtitle {
    display: block;
    font-family: var(--rh-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rh-wine);
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.rh-section-header__title {
    font-family: var(--rh-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--rh-green-dark);
    line-height: 1.25;
    margin: 0 0 1rem;
}

.rh-section-header__title a {
    color: inherit;
    text-decoration: none;
}

.rh-section-header__text {
    font-family: var(--rh-font-body);
    font-size: 0.95rem;
    color: var(--rh-text-light);
    line-height: 1.7;
    margin: 0;
}

/* --- Buttons --- */
.rh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    border-radius: 12px;
    font-family: var(--rh-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
}

.rh-btn--primary {
    background: var(--rh-wine);
    color: #fff;
    border-color: var(--rh-wine);
}

.rh-btn--primary:hover {
    background: var(--rh-wine-dark);
    border-color: var(--rh-wine-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(151, 78, 84, 0.3);
}

.rh-btn--outline {
    background: transparent;
    color: var(--rh-green-dark);
    border-color: var(--rh-green-dark);
}

.rh-btn--outline:hover {
    background: var(--rh-green-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ===== HERO SECTION ===== */
/* ===== HERO — Split Layout (Mobile-first: stacked) ===== */
.rh-hero {
    position: relative;
    background: var(--rh-cream);
    padding: 2.5rem 0 0;
    overflow: hidden;
}

.rh-hero__deco {
    position: absolute;
    left: -5%;
    top: 0;
    bottom: 0;
    width: 40%;
    background: url('/bilder/intern/shoplogo/rh-leaf-deco.webp') no-repeat center center;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
}

.rh-hero__split {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.rh-hero__content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.rh-hero__subtitle {
    display: block;
    font-family: var(--rh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rh-wine);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.rh-hero__title {
    font-family: var(--rh-font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--rh-green-dark);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.rh-hero__text {
    font-family: var(--rh-font-body);
    font-size: 0.95rem;
    color: var(--rh-text-light);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.rh-hero__buttons {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero-Bild: abgerundete Ecken, volle Breite auf Mobile */
.rh-hero__visual {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    margin: 0 -0.75rem;
}

.rh-hero__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 50vh;
    aspect-ratio: 4 / 3;
}

/* ===== PRODUKTE SECTION ===== */
.rh-products {
    background: var(--rh-sage-light);
    padding: 3rem 0;
}

.rh-products .product-slider-wrapper {
    margin-top: 0;
}

/* Produkt-Slider Titel-Bereich verstecken (wir haben eigenen Header) */
.rh-products .product-slider-wrapper .hr-sect {
    display: none;
}

/* --- Eigener Produktslider: 3-Karten-Grid --- */
.rh-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.rh-product-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 16px rgba(49, 71, 45, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.rh-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(49, 71, 45, 0.14);
    text-decoration: none;
    color: inherit;
}

/* Badge */
.rh-product-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--rh-wine);
    color: #fff;
    font-family: var(--rh-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    z-index: 2;
}

.rh-product-card__badge--mint {
    background: #3A7D5C;
}

.rh-product-card__badge--herb {
    background: #2C4A6E;
}

/* Produktbild — Packung zentriert auf hellem Gradient */
.rh-product-card__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(180deg, #f8f5f0 0%, #eee9e2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.rh-product-card__image img {
    max-width: 65%;
    max-height: 85%;
    object-fit: contain;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.rh-product-card:hover .rh-product-card__image img {
    transform: scale(1.08);
}

/* Card Body */
.rh-product-card__body {
    padding: 1.3rem 1.5rem 1.5rem;
}

.rh-product-card__title {
    font-family: var(--rh-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--rh-green-dark);
    margin: 0 0 0.5rem;
}

.rh-product-card__desc {
    font-family: var(--rh-font-body);
    font-size: 0.9rem;
    color: #5a6b58;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.rh-product-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rh-product-card__price {
    font-family: var(--rh-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rh-green-dark);
}

.rh-product-card__cta {
    font-family: var(--rh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rh-wine);
    transition: color 0.2s ease;
}

.rh-product-card:hover .rh-product-card__cta {
    color: #6E3A3F;
}

/* Alle-Produkte-Link */
.rh-products__all-link {
    text-align: center;
    margin-top: 2.5rem;
}

/* ===== INFO SECTION ===== */
.rh-info {
    position: relative;
    background: var(--rh-cream);
    padding: 3rem 0;
    overflow: hidden;
}

.rh-info__deco {
    position: absolute;
    left: -3%;
    top: 0;
    bottom: 0;
    width: 30%;
    background: url('/bilder/intern/shoplogo/rh-leaf-deco.webp') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
}

.rh-info__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.rh-info__subtitle {
    display: block;
    font-family: var(--rh-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rh-wine);
    margin-bottom: 0.5rem;
}

.rh-info__title {
    font-family: var(--rh-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--rh-green-dark);
    line-height: 1.2;
    margin: 0 0 1rem;
}

.rh-info__desc {
    font-family: var(--rh-font-body);
    font-size: 0.92rem;
    color: var(--rh-text-light);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.rh-info__buttons {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.rh-info__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rh-info__checklist li {
    font-family: var(--rh-font-body);
    font-size: 0.9rem;
    color: var(--rh-green-dark);
    padding: 0.35rem 0;
    padding-left: 1.6rem;
    position: relative;
}

.rh-info__checklist li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: var(--rh-wine);
    font-size: 0.85rem;
}

.rh-info__image-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-info__image {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 16px;
}

.rh-info__features-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Feature Boxes — gestrichelte Rahmen wie WordPress */
.rh-feature-box {
    background: transparent;
    border: 2px dashed rgba(49, 71, 45, 0.2);
    border-radius: 12px;
    padding: 1.5rem 1.5rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.rh-feature-box:hover {
    border-color: var(--rh-wine);
    background: rgba(255, 255, 255, 0.5);
}

.rh-feature-box__title {
    font-family: var(--rh-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rh-green-dark);
    margin: 0 0 0.4rem;
}

.rh-feature-box__text {
    font-family: var(--rh-font-body);
    font-size: 0.85rem;
    color: var(--rh-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Product Card Subtitle */
.rh-product-card__subtitle {
    font-family: var(--rh-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rh-wine);
    margin: 0 0 0.4rem;
    letter-spacing: 0.02em;
}

/* ===== INHALTSSTOFFE CTA — 2 Spalten: Text links, Bilder-Grid rechts ===== */
.rh-ingredients-cta {
    background: var(--rh-sage-light);
    padding: 3rem 0;
}

.rh-ingredients-cta__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.rh-ingredients-cta__text-col {
    text-align: left;
}

.rh-ingredients-cta__text-col .rh-section-header__subtitle,
.rh-ingredients-cta__text-col .rh-section-header__title,
.rh-ingredients-cta__text-col .rh-section-header__text {
    text-align: left;
    max-width: none;
    margin-left: 0;
}

.rh-ingredients-cta__buttons {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Bilder-Grid (3x2 oder 3x3) */
.rh-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.rh-ingredients-grid__item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
}

.rh-ingredients-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rh-ingredients-grid__item:hover img {
    transform: scale(1.08);
}

/* ===== NEWS SECTION ===== */
.rh-news {
    background: var(--rh-cream);
    padding: 3rem 0;
}

/* ===== HEADER / NAV OVERRIDES — WordPress-Match ===== */

/* --- Z-INDEX FIX: Menü & Warenkorb über dem Header --- */

/* Warenkorb-Dropdown / Cart-Panel */
#cart-collapsible,
.cart-dropdown,
.cart-dropdown-content,
#sidepanel-cart,
.offcanvas,
.offcanvas-end {
    z-index: 1060 !important;
}

/* Modal über allem */
.modal {
    z-index: 1070 !important;
}

/* --- TOP-BAR → Weinrot Announcement Bar wie WP --- */
#header-top-bar,
.topbar-wrapper {
    background: #8E4C52 !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0.35rem 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#header-top-bar > .container-fluid {
    justify-content: center !important;
    flex-direction: row !important;
}

#header-top-bar .topbar-main {
    justify-content: center !important;
    margin: 0 auto !important;
}

#header-top-bar a,
#header-top-bar .nav-link,
.topbar-wrapper a,
.topbar-wrapper .nav-link {
    color: #fff !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

#header-top-bar a:hover,
.topbar-wrapper a:hover {
    color: #fff !important;
    opacity: 1;
}

/* Divider zwischen Topbar-Items: weiss */
#header-top-bar .nav-dividers > .nav-item + .nav-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* --- MAIN HEADER — Salbeigruen Hintergrund wie WP --- */
header#jtl-nav-wrapper,
header.sticky-top {
    background: #E4EDE2 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(49, 71, 45, 0.08);
}

/* Header Container: Logo floated left, Nav daneben */
header#jtl-nav-wrapper > .container-fluid {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 140px !important;
}

/* Nav gleiche Höhe wie Logo-Wrapper → align-items: center zentriert Menüpunkte */
header#jtl-nav-wrapper nav.navbar {
    align-items: center !important;
    min-height: 130px !important;
}

/* NOVA setzt align-items-lg-end — wir überschreiben auf center */
header#jtl-nav-wrapper nav.navbar.align-items-lg-end {
    align-items: center !important;
}

/* Navbar-collapse (Menüpunkte-Container) auch zentrieren */
header#jtl-nav-wrapper #mainNavigation {
    align-items: center !important;
}

/* Shop-Nav Icons (User, Warenkorb) vertikal zentrieren */
header#jtl-nav-wrapper .shop-nav {
    align-items: center !important;
}

/* --- LOGO — 150px (2026-08-15 auf Kevins Wunsch vergroessert) --- */
.navbar-brand img,
#shop-logo,
.logo-wrapper img,
#logo img {
    /* Seit dem Wechsel auf das SVG hat das Logo keine eingebauten Raender
       mehr und nutzt seine Hoehe voll aus. Die Polsterung darunter ist
       deshalb kleiner, damit oben und unten weniger Luft steht. */
    width: auto !important;
    height: 168px !important;
    max-height: 168px !important;
    object-fit: contain;
}

.navbar-brand,
.logo-wrapper a {
    padding: 0.15rem 0.5rem !important;
}

/* --- NAV-LINKS — Fraunces Serif, 25px wie WP --- */
header .nav-link,
header .navbar-nav .nav-link,
#mainNavigation .nav-link {
    font-family: var(--rh-font-heading) !important;
    font-weight: 600 !important;
    color: #2F4431 !important;
    font-size: 1.55rem !important;
    letter-spacing: 0.01em;
    /* Etwas enger als zuvor (1.2rem): schafft rund 60px Platz im Menue,
       ohne die Schriftgroesse anzutasten. Der Gewinn geht an die
       Logo-Spalte, die dadurch breiter werden kann. */
    padding: 0.5rem 0.85rem !important;
    transition: color 0.25s ease;
}

header .nav-link:hover,
header .navbar-nav .nav-link:hover,
#mainNavigation .nav-link:hover {
    color: var(--rh-wine) !important;
}

/* Aktiver Nav-Link */
header .nav-link.active,
header .navbar-nav .nav-item.active > .nav-link {
    color: var(--rh-wine) !important;
}

/* Nav alignment — zentriert neben Logo */
#mainNavigation .navbar-nav {
    align-items: center;
    gap: 0.3rem;
}

/* --- SUCHE — Nur Lupe-Icon, Eingabefeld versteckt --- */

/* Input-Feld und input-group verstecken, nur Lupe-Button zeigen */
#search .search-wrapper .ac_input,
#search .search-wrapper .form-clear {
    display: none !important;
}

/* Input-Group Rahmen entfernen */
#search .search-wrapper .input-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Lupe-Button als eigenständiges Icon stylen */
#search .search-wrapper button[type="submit"] {
    background: transparent !important;
    border: none !important;
    color: #2F4431 !important;
    font-size: 1.7rem !important;
    padding: 0.4rem 0.6rem !important;
    cursor: pointer;
    transition: color 0.25s ease;
    box-shadow: none !important;
}

#search .search-wrapper button[type="submit"]:hover {
    color: var(--rh-wine) !important;
    background: transparent !important;
}

#search .search-wrapper button[type="submit"] .fas {
    font-size: 1.7rem !important;
    color: inherit !important;
}

/* form-icon wrapper: kein Extra-Spacing */
#search .search-wrapper .form-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#search .search-wrapper form {
    background: transparent !important;
}

/* Suche nur auf Mobile zeigen */
@media (max-width: 991px) {
    header .search-form-wrapper-fixed {
        display: block !important;
    }
}

/* --- SHOP-NAV ICONS — Gross + Dunkelgruen wie WP (~40px) --- */
#shop-nav {
    align-items: center !important;
    gap: 0.6rem;
}

#shop-nav > .nav-item > a,
#shop-nav > .nav-item > button,
header .shop-nav > .nav-item > a {
    color: #2F4431 !important;
    font-size: 1.8rem !important;
    padding: 0.4rem 0.6rem !important;
    transition: color 0.25s ease;
}

#shop-nav > .nav-item > a:hover,
#shop-nav > .nav-item > button:hover {
    color: var(--rh-wine) !important;
}

#shop-nav .fas,
#shop-nav .far,
#shop-nav .fa {
    color: #2F4431 !important;
    font-size: 1.7rem !important;
}

#shop-nav > .nav-item > a:hover .fas,
#shop-nav > .nav-item > a:hover .far,
#shop-nav > .nav-item > a:hover .fa {
    color: var(--rh-wine) !important;
}

/* Support-Button: verstecken */
#shop-nav .nav-support-btn {
    display: none !important;
}

/* Warenkorb-Preis: verstecken (nur Icon zeigen) */
.cart-icon-dropdown .cart-icon-dropdown-price,
#shop-nav .cart-icon-dropdown > a > span:not([class*="fa"]):not(.badge):not(.fa-sup),
#shop-nav .cart-icon-dropdown > button > span:not([class*="fa"]):not(.badge):not(.fa-sup) {
    display: none !important;
}

/* --- Cart Badge — Weinrot statt Theme-Farbe --- */
.rh-cart-badge,
#shop-nav .fa-sup,
.fa-sup {
    background: var(--rh-wine) !important;
    color: #fff !important;
    font-size: 0.65em !important;
    min-width: 1.4em;
    text-align: center;
    padding: 0.3em 0.5em !important;
}

/* --- Language Dropdown — immer sichtbar im Header --- */
#shop-nav .language-dropdown {
    display: flex !important;
}

#shop-nav .language-dropdown > a,
#shop-nav .language-dropdown > .nav-link {
    font-family: var(--rh-font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--rh-green-dark) !important;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.5rem !important;
}

#shop-nav .language-dropdown > a:hover {
    color: var(--rh-wine) !important;
}

/* --- Wunschzettel / Vergleichsliste TEXT in Kategorie-Nav verstecken --- */
.wl-nav-scrollbar-item,
.comparelist-nav-scrollbar-item {
    display: none !important;
}

/* --- STICKY HEADER — etwas kompakter beim Scrollen --- */
header.is-fixed,
header.scroll-up {
    background: rgba(228, 237, 226, 0.97) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

header.is-fixed .navbar-brand img,
header.is-fixed #shop-logo,
header.scroll-up .navbar-brand img,
header.scroll-up #shop-logo,
header.is-fixed .logo-wrapper img,
header.scroll-up .logo-wrapper img,
header.is-fixed #logo img,
header.scroll-up #logo img {
    height: 100px !important;
    max-height: 100px !important;
    transition: height 0.3s ease;
}

header.is-fixed .nav-link,
header.scroll-up .nav-link {
    font-size: 1.3rem !important;
    padding: 0.4rem 0.8rem !important;
}

header.is-fixed > .container-fluid,
header.scroll-up > .container-fluid {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* --- MOBILE HEADER (<992px) --- */
@media (max-width: 991px) {
    /* Top-Bar: einzeilig, nur erstes Item, Rest ausblenden */
    #header-top-bar,
    .topbar-wrapper {
        padding: 0.25rem 0 !important;
    }
    #header-top-bar .topbar-main .nav-item:not(:first-child),
    #header-top-bar .nav-dividers > .nav-item:not(:first-child),
    .topbar-wrapper .nav-item:not(:first-child) {
        display: none !important;
    }
    #header-top-bar a,
    #header-top-bar .nav-link,
    .topbar-wrapper a,
    .topbar-wrapper .nav-link {
        font-size: 0.72rem !important;
    }

    /* Logo kleiner auf Mobile */
    .navbar-brand img,
    #shop-logo,
    .logo-wrapper img,
    #logo img {
        height: 45px !important;
        max-height: 45px !important;
    }

    /* min-height reset — kein riesiger Header auf Mobile */
    header#jtl-nav-wrapper > .container-fluid {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        min-height: auto !important;
    }

    header#jtl-nav-wrapper nav.navbar {
        min-height: auto !important;
    }

    /* Mobile-Menu Styling */
    #mainNavigation .navbar-nav .nav-link {
        font-size: 1.1rem !important;
        padding: 0.6rem 1rem !important;
        border-bottom: 1px solid rgba(49, 71, 45, 0.08);
    }

    /* Burger-Menu Farbe */
    .navbar-toggler,
    #burger-menu {
        color: #2F4431 !important;
        border-color: rgba(49, 71, 45, 0.2) !important;
    }

    .navbar-toggler .navbar-toggler-icon,
    .navbar-toggler .fas {
        color: #2F4431 !important;
    }
}


/* =========================================
   FRONTPAGE RESPONSIVE — Small Mobile (<=480px)
   ========================================= */
@media (max-width: 480px) {
    .rh-hero {
        padding: 1.5rem 0 0;
    }

    .rh-hero__split {
        gap: 1.5rem;
    }

    .rh-hero__title {
        font-size: 1.8rem;
    }

    .rh-hero__subtitle {
        font-size: 0.75rem;
    }

    .rh-hero__text {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .rh-hero__image {
        max-height: 40vh;
    }

    .rh-btn {
        padding: 0.65rem 1.2rem;
        font-size: 0.82rem;
        border-radius: 10px;
    }

    .rh-hero__buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    .rh-hero__buttons .rh-btn {
        width: 100%;
        max-width: 260px;
    }

    .rh-section-header {
        margin-bottom: 1.5rem;
    }

    .rh-section-header__title {
        font-size: 1.4rem;
    }

    .rh-section-header__text {
        font-size: 0.85rem;
    }

    .rh-product-card {
        display: flex;
        flex-direction: row;
        border-radius: 12px;
    }

    .rh-product-card__image {
        aspect-ratio: auto;
        width: 40%;
        min-height: 160px;
        flex-shrink: 0;
        padding: 0.8rem;
        border-radius: 12px 0 0 12px;
    }

    .rh-product-card__image img {
        max-width: 85%;
        max-height: 90%;
    }

    .rh-product-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }

    .rh-product-card__badge {
        top: 0.6rem;
        left: 0.6rem;
        font-size: 0.65rem;
        padding: 0.2rem 0.6rem;
    }

    .rh-product-card__body {
        padding: 1rem 1.2rem 1.2rem;
    }

    .rh-product-card__title {
        font-size: 1.1rem;
    }

    .rh-product-card__desc {
        font-size: 0.82rem;
    }

    .rh-product-card__price {
        font-size: 1.2rem;
    }

    .rh-info__title {
        font-size: 1.4rem;
    }

    .rh-info__desc {
        font-size: 0.85rem;
    }

    .rh-info__buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .rh-info__buttons .rh-btn {
        width: 100%;
        text-align: center;
    }

    .rh-info__image {
        max-width: 220px;
    }

    .rh-feature-box {
        padding: 1.2rem;
    }

    .rh-ingredients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .rh-ingredients-cta__buttons {
        flex-direction: column;
    }

    .rh-ingredients-cta__buttons .rh-btn {
        width: 100%;
        text-align: center;
    }

    .rh-products,
    .rh-info,
    .rh-ingredients-cta {
        padding: 2rem 0;
    }

}


/* =========================================
   FRONTPAGE RESPONSIVE — Tablet (>=768px)
   ========================================= */
@media (min-width: 768px) {
    /* Produktkarten: 3 Spalten ab Tablet */
    .rh-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .rh-hero {
        padding: 3rem 0 0;
    }

    .rh-hero__split {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }

    .rh-hero__content {
        flex: 1;
        text-align: left;
        max-width: none;
        margin: 0;
    }

    .rh-hero__buttons {
        justify-content: flex-start;
    }

    .rh-hero__visual {
        flex: 1;
        border-radius: 16px 16px 0 16px;
        margin: 0;
    }

    .rh-hero__image {
        max-height: 55vh;
        min-height: 320px;
        aspect-ratio: 4 / 3;
    }

    .rh-hero__title {
        font-size: 2.6rem;
    }

    .rh-hero__text {
        font-size: 1rem;
    }

    .rh-section-header__title {
        font-size: 2.2rem;
    }

    .rh-info__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .rh-info__features-col {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .rh-feature-box {
        flex: 1;
    }

    .rh-products,
    .rh-info,
    .rh-ingredients-cta,
    .rh-news {
        padding: 4rem 0;
    }
}


/* =========================================
   FRONTPAGE RESPONSIVE — Desktop (>=992px)
   ========================================= */
@media (min-width: 992px) {
    .rh-hero {
        padding: 4rem 0 0;
    }

    .rh-hero__split {
        gap: 3.5rem;
    }

    .rh-hero__content {
        flex: 1 1 45%;
    }

    .rh-hero__visual {
        flex: 1 1 55%;
    }

    .rh-hero__title {
        font-size: 3.2rem;
    }

    .rh-hero__image {
        max-height: 60vh;
        min-height: 400px;
        aspect-ratio: 4 / 3;
    }

    .rh-section-header__title {
        font-size: 2.5rem;
    }

    .rh-info__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.5rem;
    }

    .rh-info__features-col {
        grid-column: auto;
        flex-direction: column;
    }

    .rh-info__title {
        font-size: 2.2rem;
    }

    /* Inhaltsstoffe: 2 Spalten auf Desktop */
    .rh-ingredients-cta__layout {
        grid-template-columns: 1fr 1.2fr;
        gap: 3.5rem;
    }

    .rh-products,
    .rh-info,
    .rh-ingredients-cta,
    .rh-news {
        padding: 5rem 0;
    }

}


/* =========================================
   FRONTPAGE RESPONSIVE — Large Desktop (>=1200px)
   ========================================= */
@media (min-width: 1200px) {
    .rh-hero__title {
        font-size: 3.8rem;
    }

    .rh-hero__image {
        min-height: 450px;
    }

    .rh-info__title {
        font-size: 2.5rem;
    }
}


/* =========================================
   CUSTOM FOOTER — Premium Dark
   Inspired by Aesop / Rituals aesthetic
   ========================================= */

/* --- Override JTL template-settings (MUST come first, high specificity) --- */
footer#footer.rh-footer,
footer#footer,
#footer.rh-footer,
#footer {
    background: #1E2D1B !important;
    padding: 0 !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

#copyright,
.rh-footer__copyright #copyright {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* --- Main Footer Content Area --- */
.rh-footer__main {
    position: relative;
    z-index: 1;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
}

/* --- 4-Column Grid --- */
.rh-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* Unter dem Raster standen 48px, darunter weitere 40px aus dem
       Hauptbereich — zusammen 88px Leerraum. Auf Wunsch um 60 Prozent
       gekuerzt, zusammen jetzt rund 35px. */
    padding-bottom: 1.2rem;
}

/* --- Brand / Logo Column --- */
.rh-footer__logo {
    height: 50px;
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
    opacity: 0.95;
}

.rh-footer__logo-link {
    display: inline-block;
}

.rh-footer__tagline {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    margin: 0;
    max-width: 300px;
    letter-spacing: 0.01em;
}

/* --- ALL Footer Headings — Catch EVERY JTL class --- */
#footer .productlist-filter-headline,
#footer.rh-footer .productlist-filter-headline,
#footer .footer-headline,
#footer.rh-footer .footer-headline,
#footer h6,
#footer.rh-footer h6,
#footer .h6,
#footer.rh-footer .h6,
#footer .card-title,
#footer.rh-footer .card-title,
#footer .link-group-item > a:first-child,
#footer .box-normal-link,
#footer .box-categories > .h6 {
    color: #fff !important;
    font-family: var(--rh-font-heading) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 1.4rem !important;
    padding-bottom: 0 !important;
    opacity: 0.85;
}

/* --- Kill accordion / collapse — always open, no toggle --- */
#footer .box-normal-link.dropdown-toggle {
    display: none !important;
}

#footer .collapse,
#footer .collapsing {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#footer .productlist-filter-headline {
    display: flex !important;
}

/* --- Footer Links --- */
#footer a,
#footer.rh-footer a,
#footer .nav-link,
#footer.rh-footer .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.88rem !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
    padding: 0.35rem 0 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

#footer a:hover,
#footer.rh-footer a:hover,
#footer .nav-link:hover,
#footer.rh-footer .nav-link:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* --- Footer Text / Paragraphs --- */
#footer p,
#footer.rh-footer p,
#footer .footer-text,
#footer li {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
}

/* --- JTL Box overrides --- */
#footer .card,
#footer.rh-footer .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#footer .card-body,
#footer.rh-footer .card-body {
    padding: 0 !important;
}

#footer .list-group-item,
#footer.rh-footer .list-group-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* JTL collapse boxes — keep visible on desktop */
#footer .box-linkgroup .collapse,
#footer .box-categories .collapse {
    background: transparent !important;
}

/* Remove JTL border-bottom on link groups */
#footer .link-group-item.dropdown {
    border-bottom: none !important;
}

/* --- Social Media Icons (Aesop-style minimal circles) --- */
.rh-footer__social {
    text-align: center;
    margin-top: 0;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rh-footer__social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.rh-footer__social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    background: transparent !important;
}

.rh-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* --- Divider --- */
.rh-footer__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2.5rem 0;
}

/* --- Newsletter Section (Rituals-style) --- */
.rh-footer__newsletter {
    position: relative;
    z-index: 1;
}

.rh-footer__newsletter-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

.rh-footer__newsletter-title {
    display: block;
    color: #fff !important;
    font-family: var(--rh-font-heading) !important;
    font-weight: 400;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.3rem;
}

.rh-footer__newsletter-info {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    margin: 0;
}

.rh-footer__newsletter-info a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: underline !important;
}

.rh-footer__newsletter-input-wrap {
    display: flex;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.rh-footer__newsletter-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0.85rem 0.25rem !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.9rem !important;
    outline: none !important;
    letter-spacing: 0.01em;
}

.rh-footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.rh-footer__newsletter-btn {
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.85rem 1rem !important;
    font-family: var(--rh-font-body) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rh-footer__newsletter-btn:hover {
    color: #fff !important;
}

/* --- VAT / Shipping Footnote --- */
.rh-footer__footnote {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.rh-footer__footnote span {
    color: rgba(255, 255, 255, 0.35) !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.01em;
}

.rh-footer__footnote a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: underline !important;
}

/* --- Copyright Bar --- */
.rh-footer__copyright {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 1.2rem 0;
    position: relative;
    z-index: 1;
}

.rh-footer__copyright-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.rh-footer__copyright-left {
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: var(--rh-font-body) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em;
}

.rh-footer__copyright-left span {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.78rem !important;
}

/* Hide "Powered by JTL-Shop" completely */
.rh-footer__copyright-right {
    display: none !important;
}


/* =========================================
   FOOTER RESPONSIVE
   ========================================= */

/* Tablet: 2 Columns */
@media (min-width: 768px) {
    .rh-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 4rem;
    }

    .rh-footer__newsletter-inner {
        flex-direction: row;
        text-align: left;
        align-items: flex-end;
    }

    .rh-footer__newsletter-text {
        flex: 1;
    }

    .rh-footer__newsletter-form {
        flex: 1;
    }

    .rh-footer__copyright-inner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }
}

/* Desktop: Logo + 3 Columns */
@media (min-width: 992px) {
    .rh-footer__main {
        padding-top: 5rem;
        padding-bottom: 1rem;
    }

    .rh-footer__grid {
        /* Vier Spalten: Marke, Informationen, Gesetzliches, Zahlung.
           Die Zahlungsspalte steht rechts und richtet ihren Inhalt
           am rechten Rand aus. */
        grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
        gap: 2rem 3rem;
    }

    .rh-footer__brand {
        padding-right: 2rem;
    }

    .rh-footer__social {
        text-align: left;
    }

    .rh-footer__social-list {
        justify-content: flex-start;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .rh-footer__grid {
        gap: 2rem 5rem;
    }
}

/* Mobile small */
@media (max-width: 479px) {
    .rh-footer__main {
        padding-top: 3rem;
    }

    .rh-footer__grid {
        gap: 2.5rem;
        text-align: center;
    }

    .rh-footer__tagline {
        margin-left: auto;
        margin-right: auto;
    }

    .rh-footer__logo {
        margin-left: auto;
        margin-right: auto;
    }

    .rh-footer__newsletter-input-wrap {
        flex-direction: column;
        border-bottom: none;
    }

    .rh-footer__newsletter-input {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .rh-footer__newsletter-btn {
        padding: 0.85rem 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}


/* =========================================
   BREADCRUMB SITEWEIT AUSBLENDEN
   Kevin: "der weisse Abschnitt unter dem Header ... muss weg" (auf allen
   Seiten). Der weisse Streifen ist der Breadcrumb-Bereich aus
   templates/NOVA/layout/header.tpl -> layout/breadcrumb.tpl:
   <div id="content-wrapper"><div class="container breadcrumb-container">
     <div class="row breadcrumb-wrapper"><nav aria-label="breadcrumb">
       <ol class="breadcrumb">...</ol></nav></div></div>
   Bootstraps .breadcrumb bringt padding 0.75rem 1rem + margin-bottom 1rem
   und einen grauen Hintergrund mit, .breadcrumb-wrapper zusaetzlich oben/unten
   eine Trennlinie ab 992px (my-nova.css Zeile ~20514-20523) -- das ergibt den
   sichtbaren weissen/hellen Balken.
   Nur visuell ausblenden, NICHT aus dem Markup entfernen: das <ol> traegt
   schema.org/BreadcrumbList fuer Google.
   .container.breadcrumb-container selbst bleibt im DOM, faellt ohne Inhalt
   aber auf 0px Hoehe zusammen (Bootstrap-Container hat nur horizontales
   Padding, kein vertikales) -- daher reicht es, Wrapper/Nav/Liste zu treffen.
   Bisher war das nur lokal in productlist/zigaretten_*.tpl geloest (deshalb
   fehlte der Streifen nur auf /Kraeuterzigaretten). Jetzt zentral fuer den
   ganzen Shop, damit es nicht mehr pro Kategorie-Template dupliziert werden
   muss.
   Unkritisch fuer Warenkorb/Kundenkonto/Bestellvorgang: layout/breadcrumb.tpl
   rendert auf Start-, Bestellvorgang- und Bestellstatus-Seiten ohnehin nichts
   (eigene Bedingung dort), und die Klasse .breadcrumb wird im ganzen Theme
   ausschliesslich hier verwendet -- der Checkout-Fortschrittsbalken in
   checkout/inc_steps.tpl nutzt eigene Klassen, keine Ueberschneidung.
   ========================================= */
#content-wrapper .breadcrumb-wrapper,
#content-wrapper nav[aria-label="breadcrumb"],
#content-wrapper .breadcrumb {
    /* ueberschreibt Bootstraps .breadcrumb (padding/margin/background)
       und NOVAs .breadcrumb-wrapper (border-top/bottom ab 992px) */
    display: none !important;
}

/* =========================================
   WEISSER STREIFEN UNTER DEM HEADER
   NOVA reserviert mit #content-wrapper { padding-top: 64px } Platz fuer die
   Breadcrumb. Seit die Breadcrumb ausgeblendet ist, bleibt davon nur eine
   leere weisse Flaeche zwischen Header und erstem Abschnitt uebrig.
   Kevin: "Startseite weisser Balken unter Header ist noch da."
   Der Abstand kommt jetzt aus dem jeweils ersten Abschnitt selbst
   (.rh-hero und die uebrigen Sektionen bringen eigenes padding mit).
   ========================================= */
#content-wrapper {
    padding-top: 0 !important;
}

/* =========================================
   HEADER IN DREI GLEICH BREITE TEILE
   Kevin: "header in je 3 gleich grosse Teile und die Schriften jeweils
   mittig in ihrem Grid."
   NOVA baut den Header als Flex-Zeile: links .toggler-logo-wrapper mit dem
   Logo, rechts daneben nav.navbar, in der wiederum das Menue
   (.navbar-collapse) und die Icons (ul.nav-icons, per order-lg-last nach
   rechts geschoben) sitzen. Dadurch bekommt das Logo nur so viel Platz wie
   es braucht und das Menue klebt links daneben.
   Loesung ohne Umbau des Markups: der aeussere Container wird zum Raster
   1fr / 2fr, die nav darin noch einmal 1fr / 1fr. Ergebnis sind drei
   gleich breite Drittel: Logo, Menue, Icons. Jeder Inhalt mittig.
   Nur ab 992px, darunter bleibt NOVAs mobiles Verhalten unangetastet.
   ========================================= */
@media (min-width: 992px) {
    /* Im Bestellvorgang rendert NOVA einen anderen Header: statt des Menues
       steht dort die Schrittanzeige. Das Drei-Spalten-Raster zerreisst diese
       Ansicht, deshalb greift es dort nicht. Anker ist body.is-checkout. */
    body:not(.is-checkout) header > .container-fluid,
    body:not(.is-checkout) header > .container {
        display: grid !important;
        /* Logo links und Icons rechts bekommen gleich viel, aber deutlich
           weniger Platz als vorher. Alles dazwischen gehoert dem Menue.
           Weil beide Aussenspalten gleich breit sind, sitzt das Menue
           als Block exakt in der Seitenmitte. Seit dem groesseren Logo
           sind es 320px statt 250px — dadurch rueckt das Logo weiter von
           der Fensterkante weg, ohne die Mittigkeit des Menues zu opfern. */
        grid-template-columns: var(--rh-logo-spalte) 1fr;
        align-items: center;
        column-gap: 0;
    }
    body:not(.is-checkout) header .toggler-logo-wrapper {
        display: flex !important;
        justify-content: center;
    }
    body:not(.is-checkout) header nav.navbar {
        display: grid !important;
        grid-template-columns: 1fr var(--rh-logo-spalte);
        align-items: center;
        width: 100%;
    }
    /* Menue in seinem Drittel mittig */
    body:not(.is-checkout) header nav.navbar .navbar-collapse {
        justify-content: center !important;
    }
    body:not(.is-checkout) header nav.navbar .nav-scrollbar-inner {
        margin-right: 0 !important;
        justify-content: center !important;
        width: 100%;
    }
    /* Icons in ihrem Drittel mittig */
    body:not(.is-checkout) header nav.navbar ul.nav-icons {
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Die Scrollpfeile des Menuebands stoeren die Zentrierung */
    body:not(.is-checkout) header nav.navbar .nav-scrollbar-arrow {
        display: none !important;
    }

    /* Die vier Menuepunkte brauchen bei 25px Fraunces zusammen 667px, ein
       Drittel des Headers waren dafuer zu wenig. Seit die Aussenspalten auf
       250px stehen, hat die Mitte rund 925px und die Schrift kann wieder
       nah an die urspruenglichen 25px heran. Sie skaliert mit der
       Fensterbreite, damit auf schmalen Bildschirmen nichts abbricht. */
    header .nav-link,
    header .navbar-nav .nav-link,
    #mainNavigation .nav-link {
        font-size: clamp(1.05rem, 1.62vw, 1.55rem) !important;
        /* Enger als zuvor (.75rem): spart im Menue rund 60px, ohne die
           Schrift anzutasten. Der Gewinn geht an die Logo-Spalte. */
        padding-left: .55rem !important;
        padding-right: .55rem !important;
        white-space: nowrap;
    }
    header nav.navbar .navbar-collapse,
    header nav.navbar .nav-mobile-body { overflow: visible !important; }
    header nav.navbar .nav-scrollbar-inner { flex-wrap: nowrap; }
}

/* =========================================
   EINHEITLICHE INHALTSBREITE
   Kevin: "nimm ueberall die Breite des ersten Abschnitts, diese Breite
   sollte auch auf allen anderen Seiten als Maximalbreite gelten."
   Der Hero der Startseite laeuft in einem Bootstrap-.container mit
   1250px. Dieser Wert ist ab jetzt die gemeinsame Obergrenze fuer alle
   eigenen Seitenbausteine (.rh-cat__inner, .rh-ing__inner, .rh-pd__inner,
   .rh-home-usp__list ...).
   --rh-read-max ist die schmalere Lesebreite fuer Fliesstext. Sie bleibt
   bewusst darunter: 1250px breite Textzeilen waeren rund 150 Zeichen lang
   und damit schwer zu lesen.
   ========================================= */
:root {
    /* Platzbedarf der Hauptnavigation. Aus ihm ergibt sich die Breite der
       Logo-Spalte, damit das Logo mittig zwischen Fensterrand und erstem
       Menuebuchstaben steht. Aendert sich die Zahl der Menuepunkte oder die
       Schriftgroesse, ist dies der einzige Wert, der nachgezogen werden muss.
       Bewusst 100vw statt 100%: Die Variable wird auch innerhalb der schmaleren
       Navigationsleiste ausgewertet, wo 100% nur deren Breite meint — die
       Spalte kam dadurch nur halb so breit heraus.
       Der Wert waechst mit dem Fenster, weil die Schrift der Menuepunkte
       ueber clamp(1.05rem, 1.62vw, 1.55rem) mitskaliert: bei 1280px misst
       das Menue rund 606px, ab etwa 1530px konstant 711px.
       Die Breite der Scrollleiste muss abgezogen werden: 100vw zaehlt sie mit,
       der Inhaltsbereich hat sie aber nicht. Ohne den Abzug wurde die Spalte
       rund 15px zu breit und die Navigationsleiste lief aus dem Fenster —
       auf der englischen Fassung sichtbar, weil deren Menuepunkte laenger sind. */
    --rh-menue-breite: clamp(530px, 46.5vw, 715px);
    --rh-scrollbalken: 17px;
    --rh-logo-spalte: max(240px, calc((100vw - var(--rh-scrollbalken) - var(--rh-menue-breite)) / 2 - 32px));
    --rh-content-max: 1250px;
    /* Kevin ausdruecklich: "das nervt wenn der Text und Inhalt immer
       unterschiedlich breit ist." Lesebreite = Inhaltsbreite. Die Zeilen
       werden dadurch lang; wenn das stoert, ist dieser eine Wert die
       Stellschraube fuer den ganzen Shop. */
    --rh-read-max: 1250px;
}

/* =========================================
   ALLE INHALTSBLOECKE AUF EINE BREITE
   Auf der Startseite lagen zuletzt sieben verschiedene Breiten neben-
   einander: 1250, 1218, 820, 780, 680, 620 und 1385 Pixel. Die inneren
   Bloecke bekommen deshalb keine eigene Begrenzung mehr, sondern fuellen
   den umgebenden .container aus. Abschnitte ohne .container werden auf
   dieselbe Breite gezogen.
   ========================================= */
.rh-home .rh-section-header,
.rh-home .rh-home-text,
.rh-home .rh-home-faq__list,
.rh-home .rh-info__head,
.rh-home .rh-home-stats {
    max-width: none !important;
    width: 100%;
}

/* Kategorie-, Inhaltsstoff- und Detailseiten haben keinen Bootstrap-
   .container, sondern eigene Wrapper. Damit ihre Kanten exakt auf denen
   der Startseite liegen, bekommen sie dieselbe Maximalbreite und
   denselben Innenabstand von 1rem. */
.rh-cat .rh-cat__inner,
.rh-ing .rh-ing__inner,
.rh-pd .rh-pd__inner {
    max-width: var(--rh-content-max, 1250px);
    padding-left: 1rem;
    padding-right: 1rem;
}
.rh-cat .rh-cat__text,
.rh-cat .rh-cat-hero h1,
.rh-cat .rh-cat-hero__lead,
.rh-cat .rh-cat-hero__meta,
.rh-cat .rh-cat-trust__row,
.rh-cat .rh-cat-cta > *,
.rh-pd .rh-pd__text {
    max-width: var(--rh-content-max, 1250px) !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Steht ein Textblock schon in einem Wrapper, waere das doppelt. */
.rh-cat .rh-cat__inner .rh-cat__text,
.rh-ing .rh-ing__inner .rh-ing__text,
.rh-pd .rh-pd__inner .rh-pd__text {
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}
.rh-home .rh-products .rh-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none !important;
}
@media (max-width: 767px) {
    .rh-home .rh-products .rh-product-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* Abschluss-CTA hat keinen .container und lief ueber die volle Fensterbreite */
.rh-home .rh-home-cta > *,
.rh-cat .rh-cat-cta > * {
    max-width: var(--rh-content-max, 1250px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* =========================================
   LOGO WEITER ZUR MITTE
   Die linke Spalte ist 250px breit, das Logo sass mittig darin und
   klebte dadurch am Seitenrand. Jetzt rechtsbuendig in seiner Spalte,
   also naeher an der Navigation.
   ========================================= */
@media (min-width: 992px) {
    body:not(.is-checkout) header .toggler-logo-wrapper {
        /* Logo an das rechte Ende seiner Spalte, mit etwas Abstand zum Menue.
           Damit sitzt es optisch mittig zwischen Fensterkante und dem ersten
           Menuepunkt, statt zu weit links zu kleben. */
        justify-content: center !important;
        padding-right: 0;
    }
    /* NOVA setzt auf .navbar-brand ab 992px margin-right: 3rem. Das schob
       das Logo innerhalb seiner Spalte wieder nach links zurueck. */
    body:not(.is-checkout) header .navbar-brand {
        margin-right: 0 !important;
    }
    body:not(.is-checkout) header .logo-wrapper {
        display: flex !important;
        justify-content: flex-end !important;
    }
}

/* =========================================
   BESTELLVORGANG
   1) Der Checkout-Header ist nur 68px hoch. Das auf 150px vergroesserte Logo
      ragte dort 98px darunter und lag ueber der Schrittanzeige.
   2) NOVA rendert den Inhalt in einer .col-lg-9, die Sidebar-Spalte daneben
      bleibt in Schritt 2 leer und wird gar nicht erzeugt. Steht die Spalte
      allein in ihrer Zeile, darf sie die volle Breite nutzen.
   ========================================= */
/* NOVA gibt dem Bestellvorgang bewusst einen schmalen Header
   (.is-checkout header { height: 2.8rem }). Unsere Vertrauens-Zeile aus dem
   NOVAChild-Header passt dort nicht hinein und lief unten heraus — sie lag
   hinter der Schrittanzeige. Im Bestellvorgang blenden wir sie aus und lassen
   den Header seine natuerliche Hoehe finden. */
body.is-checkout header .rh-topbar-usps {
    display: none !important;
}
body.is-checkout header#jtl-nav-wrapper,
body.is-checkout header#jtl-nav-wrapper nav.navbar,
body.is-checkout header#jtl-nav-wrapper > .container-fluid {
    /* Die ID muss mit in den Selektor, sonst gewinnt weiter oben
       header#jtl-nav-wrapper nav.navbar mit seinen 130px. */
    height: auto !important;
    min-height: 0 !important;
}
body.is-checkout header#jtl-nav-wrapper nav.navbar {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
@media (min-width: 992px) {
    /* Logo im Bestellvorgang gross und mittig ueber den Inhalt.
       Der Logo-Block ist bei NOVA nach links gefloatet, die Navigationsleiste
       sitzt daneben — beides muss untereinander, damit die Mitte wirklich die
       Mitte ist und nicht die Mitte des Restplatzes. */
    body.is-checkout header#jtl-nav-wrapper .toggler-logo-wrapper,
    body.is-checkout header#jtl-nav-wrapper .logo-wrapper {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        text-align: center !important;
        padding-right: 0 !important;
    }
    body.is-checkout header#jtl-nav-wrapper .navbar-brand {
        float: none !important;
        margin: 0 auto !important;
    }
    body.is-checkout header#jtl-nav-wrapper nav.navbar {
        justify-content: center !important;
    }
    body.is-checkout header#jtl-nav-wrapper .secure-checkout-icon,
    body.is-checkout header#jtl-nav-wrapper .secure-checkout-topbar {
        /* Beide Kinder der Leiste duerfen nur ihre Eigenbreite belegen. Sonst
           zieht das leere Topbar-Element den ganzen Platz und schiebt
           "Sichere Bezahlung" trotz zentrierter Leiste an den linken Rand. */
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.is-checkout .navbar-brand img,
    body.is-checkout #shop-logo,
    body.is-checkout .logo-wrapper img,
    body.is-checkout #logo img {
        height: 84px !important;
        max-height: 84px !important;
    }
}

/* Auf dem Handy bleibt das Logo klein und in der linken Ecke — der schmale
   Checkout-Header hat dort keinen Platz fuer eine zweite Zeile. */
@media (max-width: 991px) {
    body.is-checkout .navbar-brand img,
    body.is-checkout #shop-logo,
    body.is-checkout .logo-wrapper img,
    body.is-checkout #logo img {
        height: 40px !important;
        max-height: 40px !important;
    }
}
body.is-checkout #content-wrapper .row > .col-lg-9:only-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* =========================================
   MOBIL-KORREKTUREN (bis 600px)
   1) Auf der Kategorieseite standen Groesse, Preis und Kaufbutton in einer
      Zeile ohne Umbruch. Bei 375px ragte der Button 48px aus seinem Kasten,
      die Beschriftung war abgeschnitten.
   2) Drei Innenabstaende stapelten sich (Sektion + innerer Wrapper + Textspalte)
      und liessen vom Bildschirm nur 271px Textbreite uebrig.
   3) Der zentrierte Hero-Text laeuft mobil ueber viele Zeilen und liest sich
      linksbuendig deutlich ruhiger. Die Ueberschrift bleibt mittig.
   ========================================= */
@media (max-width: 600px) {
    .rh-cat-size {
        flex-wrap: wrap !important;
    }
    .rh-cat-size > form,
    .rh-cat-size > .form {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: .6rem !important;
    }
    .rh-cat-size > form button,
    .rh-cat-size > .form button,
    .rh-cat-size > form .btn,
    .rh-cat-size > .form .btn {
        width: 100% !important;
        white-space: normal !important;
    }

    .rh-cat-body,
    .rh-cat-faq,
    .rh-cat-cta,
    .rh-zig-body,
    .rh-zig-faq,
    .rh-zig-cta {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .rh-cat__text {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .rh-cat-hero__text,
    .rh-cat-hero p {
        text-align: left !important;
    }
}

/* =========================================
   MOBILER KOPF — AUSRICHTUNG
   Der Logo-Block war mit seiner Polsterung 61px hoch, der Kopf selbst nur 52px.
   Das Logo hing dadurch unten heraus, und da keine der Ebenen vertikal
   zentriert war, sassen Menue-Schalter (Mitte 87), Logo (105) und die Symbole
   rechts (103) jeweils auf einer eigenen Hoehe. Jetzt liegt alles auf der
   Mittelachse des Kopfes. Gilt auch im Bestellvorgang — dort war die
   Ausrichtung zuvor ausgenommen, weshalb das Logo aus dem 44px hohen
   Kopf herausragte.
   ========================================= */
@media (max-width: 991px) {
    body header#jtl-nav-wrapper .toggler-logo-wrapper {
        display: flex !important;
        align-items: center !important;
    }
    body header#jtl-nav-wrapper .logo-wrapper {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
    }
    body header#jtl-nav-wrapper .navbar-brand {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body header#jtl-nav-wrapper .navbar-brand img,
    body header#jtl-nav-wrapper .logo-wrapper img {
        /* inline-Bilder sitzen auf der Schriftlinie und haengen dadurch tiefer */
        display: block !important;
        height: 44px !important;
        max-height: 44px !important;
    }
    /* Der Bestellvorgang hat einen niedrigeren Kopf, dort etwas kleiner. */
    body.is-checkout header#jtl-nav-wrapper .navbar-brand img,
    body.is-checkout header#jtl-nav-wrapper .logo-wrapper img {
        height: 34px !important;
        max-height: 34px !important;
    }
    body header#jtl-nav-wrapper nav.navbar {
        align-items: center !important;
    }
    /* Die Symbolzeile rechts sass 5px tiefer als Logo und Menue-Schalter. Die
       Listenpunkte sind hoeher als die Zeile, weil das Warenkorb-Ausklappmenue
       darin haengt; sie brauchen deshalb eine eigene Zentrierung. */
    body header#jtl-nav-wrapper .nav-right {
        align-items: center !important;
    }
    body header#jtl-nav-wrapper .nav-right > li {
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
    }
    body header#jtl-nav-wrapper .nav-right > li > .nav-link {
        display: flex !important;
        align-items: center !important;
        padding-top: .35rem !important;
        padding-bottom: .35rem !important;
    }
}

/* =========================================
   MOBIL-DURCHGANG UEBER ALLE SEITEN
   ========================================= */
@media (max-width: 600px) {
    /* Die Versandtabelle war mit 377px breiter als der Bildschirm und hat als
       einzige Seite einen waagerechten Scrollbalken erzeugt. Schmalere Polster
       und feste Spaltenaufteilung bringen sie ohne Scrollen unter. */
    .rh-ship-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: .88rem !important;
    }
    .rh-ship-table th,
    .rh-ship-table td {
        padding-left: .4rem !important;
        padding-right: .4rem !important;
        word-break: break-word;
    }

    /* Der Hero-Text lag 52px vom Rand, der Fliesstext darunter bei 16px.
       Jetzt beginnen beide auf derselben Kante. */
    .rh-cat-hero,
    .rh-zig-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .rh-cat-hero > *,
    .rh-zig-hero > *,
    .rh-zig-hero__inner > * {
        /* Nur einmal einruecken. Die vorige Fassung traf auch die Enkel und
           zaehlte den Abstand doppelt (Zigarettenseite lag dadurch bei 32px,
           die Tabakersatzseite bei 16px). */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* "Geschaeftsbedingungen" passte als Wort nicht in eine 375px-Zeile und
       lief aus der Ueberschrift heraus — die AGB-Seite scrollte dadurch
       waagerecht. Ueberschriften duerfen jetzt trennen. */
    h1, h2, h3 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* In den Rechtstexten stehen ungetrennte URLs (etwa policies.google.com/...),
   die aus dem Textblock herausliefen und die AGB-Seite waagerecht scrollen
   liessen. Gilt bewusst fuer alle Breiten. */
#tos, #revocation-instruction, #data-privacy, #revocation-form,
.link-content, .rh-cat-body, .rh-zig-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* =========================================
   ZAHLARTEN-GRAFIK IM BESTELLVORGANG
   Das Viva-Plugin liefert ein Sammelbild mit sieben Logos, darunter PayPal.
   Statt die Plugin-Datei zu aendern (die beim naechsten Update ueberschrieben
   wuerde) zeigen wir eine eigene Fassung ohne PayPal; die uebrigen Logos
   ruecken darin nach.
   ========================================= */
img[src*="viva-com-wallet.svg"] {
    content: url("/bilder/intern/shoplogo/zahlarten-viva-v2.svg");
}

/* Zahlungsarten als vierte Fuss-Spalte */
.rh-footer__payments-img {
    height: 40px;
    width: auto;
    display: block;
    margin-top: .9rem;
}
@media (min-width: 992px) {
    .rh-footer__payments-col {
        text-align: right;
    }
    .rh-footer__payments-col .rh-footer__payments-img {
        margin-left: auto;
    }
}

/* Sicherheitsnetz: Sollte die Navigation bei einer Sprache oder Schriftgroesse
   doch einmal breiter geraten als berechnet, darf sie das Fenster nicht
   aufziehen. */
header#jtl-nav-wrapper { overflow-x: hidden; }