/* ==========================================================================
   BoDiAyk Modern One – Bloom-Spektrum Redesign (NOVA-Child Overlay)
   ==========================================================================
   Designidee: Ein violett-magenta-orangefarbenes Spektrum ist das
   wiederkehrende Signatur-Element ("Bloom-Linie"). Alles andere bleibt
   ruhig: viel Weißraum, klare Karten, kräftige Akzentfarbe.

   Dieses Stylesheet wird NACH dem NOVA-CSS geladen und überschreibt gezielt.
   Es verändert keine NOVA-Dateien -> update-sicher.
   ========================================================================== */

:root {
    --bmo-violet:        #51479C;
    --bmo-violet-deep:   #2E2860;
    --bmo-violet-soft:   #EEECF7;
    --bmo-magenta:       #B44CC0;
    --bmo-amber:         #FF8A3D;
    --bmo-stripe:        #51479C;
    --bmo-btn-text:      #FFFFFF;
    --bmo-leaf:          #2F9E57;
    --bmo-ink:           #1B1730;
    --bmo-ink-soft:      #5A5570;
    --bmo-paper:         #FAFAF8;
    --bmo-card:          #FFFFFF;
    --bmo-line:          #E6E4EF;
    --bmo-radius:        10px;
    --bmo-card-padding:  1rem;
    --bmo-bloom:         linear-gradient(90deg, #51479C 0%, #B44CC0 55%, #FF8A3D 100%);
    --bmo-shadow:        0 1px 2px rgba(27, 23, 48, .06), 0 8px 24px rgba(27, 23, 48, .07);
    --bmo-shadow-lift:   0 2px 4px rgba(27, 23, 48, .08), 0 14px 34px rgba(46, 40, 96, .16);
    --bmo-font-display:  "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bmo-font-body:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bmo-footer-bg:     var(--bmo-violet-deep);
}

/* --- Optionale, DSGVO-konforme (selbst gehostete) Display-Schrift.
       Dateien nach themes/modernone/fonts/ legen – fehlen sie, greift der
       System-Fallback und nichts geht kaputt. KEIN Google-Fonts-CDN! --- */
@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
body {
    background: var(--bmo-paper);
    color: var(--bmo-ink);
    font-family: var(--bmo-font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.productbox-title, .nav-link, .page-title {
    font-family: var(--bmo-font-display);
    letter-spacing: -0.01em;
    color: var(--bmo-ink);
}

/* Nur "echte" Textlinks bekommen die Akzentfarbe – Buttons/Links im
   Button-Look (<a class="btn ...">) behalten ihre eigene, kontrastsichere
   Textfarbe. Ohne :not(.btn) würde diese Regel (gleiche Spezifität, aber
   später geladen als NOVAs Bootstrap-CSS) die weiße Button-Schrift
   überschreiben -> Akzentfarbe auf Akzentfarbe, quasi unlesbar. */
a:not(.btn) { color: var(--bmo-violet); }
a:not(.btn):hover { color: var(--bmo-violet-deep); }

/* Signatur: Bloom-Linie unter Überschriften – Sichtbarkeit über
   Templateeinstellung "Signaturlinie unter Überschriften" gesteuert:
   --bmo-sigline-content: Linie unter H1 in Inhalten (Standard: aus)
   --bmo-sigline-title:   Linie unter Seiten-/Produkttitel (Standard: an)
   Farbe: einheitliche, konfigurierbare Akzentstreifen-Farbe (--bmo-stripe),
   nicht der mehrfarbige Bloom-Verlauf – dadurch immer eine klare,
   vorhersehbare Farbe statt eines auf schmaler Breite ggf. schief
   wirkenden Farbverlaufs. */
#main-wrapper h1::after,
.page-title::after,
.product-title::after,
h1.product-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: .5rem;
    border-radius: 2px;
    background: var(--bmo-stripe);
}
#main-wrapper h1::after {
    display: var(--bmo-sigline-content, none);
}
.page-title::after,
#main-wrapper .page-title::after,
.product-title::after,
#main-wrapper h1.product-title::after {
    display: var(--bmo-sigline-title, block);
}

/* Sichtbarer Tastatur-Fokus (A11y + Agent-Navigierbarkeit) */
:focus-visible {
    outline: 3px solid var(--bmo-magenta);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
#header {
    background: #fff;
    border-bottom: 1px solid var(--bmo-line);
}

/* Bloom-Linie als oberste Kante der Seite */
#header::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--bmo-bloom);
}

/* Top-Bar (Versandkostenfrei-Hinweis etc.) */
#header .top-bar,
#header .header-top-bar {
    background: var(--bmo-violet-deep);
    color: #fff;
}
#header .top-bar a,
#header .header-top-bar a { color: #fff; }

#mainNavigation .nav-link,
.navbar .nav-link {
    font-weight: 600;
    color: var(--bmo-ink);
}

#mainNavigation .nav-link:hover,
#mainNavigation .nav-item.active > .nav-link,
.navbar .nav-link:hover {
    color: var(--bmo-violet);
}

/* Aktiver Menüpunkt: NOVAs eigenen Indikator neutralisieren – auf dem
   Element SELBST und all seinen Kind-Elementen (falls der Indikator auf
   einem inneren <span>/<i> statt dem Link liegt), unabhaengig vom
   Mechanismus (Border, Box-Shadow, Hintergrundbild). Zusaetzlich malt ein
   eigenes, per z-index nach oben gehobenes Element die Linie – so ist sie
   auch dann sichtbar korrekt, wenn NOVAs Original-Indikator technisch gar
   nicht auf dem Link selbst, sondern versetzt/verschachtelt sitzt. */
#mainNavigation .nav-item.active > .nav-link,
#mainNavigation .nav-item.active > .nav-link *,
#mainNavigation .nav-link.active,
#mainNavigation .nav-link.active *,
#mainNavigation li.active > a,
#mainNavigation li.active > a *,
.navbar .nav-item.active > .nav-link,
.navbar .nav-item.active > .nav-link *,
.navbar .nav-link.active,
.navbar .nav-link.active *,
.navbar li.active > a,
.navbar li.active > a * {
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}
#mainNavigation .nav-item.active > .nav-link,
#mainNavigation .nav-link.active,
#mainNavigation li.active > a,
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active,
.navbar li.active > a {
    position: relative;
}
#mainNavigation .nav-item.active > .nav-link::after,
#mainNavigation .nav-link.active::after,
#mainNavigation li.active > a::after,
.navbar .nav-item.active > .nav-link::after,
.navbar .nav-link.active::after,
.navbar li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--bmo-stripe) !important;
    background-color: var(--bmo-stripe) !important;
    background-image: none !important;
    border: 0 !important;
    z-index: 5;
    pointer-events: none;
}
/* Gefundene NOVA-Originalregel: header .navbar-nav>.nav-item.active>
   .nav-link::before zeichnet die Linie ueber "border-color:#f8bf00" auf
   einem ::before, NICHT ::after – daher hier gezielt und zusaetzlich
   generisch neutralisiert. */
header .navbar-nav > .nav-item > .nav-link::before,
#mainNavigation .nav-item > .nav-link::before,
.navbar .nav-item > .nav-link::before {
    border-color: var(--bmo-stripe) !important;
    background: none !important;
    box-shadow: none !important;
}

/* Sticky-Header bekommt per JS die Klasse .bmo-stuck */
#header.bmo-stuck {
    box-shadow: var(--bmo-shadow);
}

/* Suche */
#search-header .form-control,
.search input.form-control {
    border: 2px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
}
#search-header .form-control:focus,
.search input.form-control:focus {
    border-color: var(--bmo-violet);
    box-shadow: 0 0 0 3px var(--bmo-violet-soft);
}

/* Warenkorb-Badge */
.badge, .badge-pill, .cart-count {
    background: var(--bmo-amber);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--bmo-violet);
    border-color: var(--bmo-violet);
    border-radius: var(--bmo-radius);
    color: var(--bmo-btn-text);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--bmo-violet-deep);
    border-color: var(--bmo-violet-deep);
    color: var(--bmo-btn-text);
    box-shadow: 0 6px 18px rgba(81, 71, 156, .35);
}

.btn-outline-primary {
    color: var(--bmo-violet);
    border-color: var(--bmo-violet);
    border-radius: var(--bmo-radius);
}
.btn-outline-primary:hover {
    background: var(--bmo-violet);
    border-color: var(--bmo-violet);
    color: var(--bmo-btn-text);
}

/* Kaufen-Button auf Artikeldetailseite: exakt gleiche Hoehe wie die
   Mengenwahl-Gruppe daneben (48px) */
#product-offer .input-group,
#product-offer .input-group .form-control,
#product-offer .input-group .btn {
    height: 48px;
}
#add-to-cart .btn-primary,
#product-offer button[type="submit"].btn-primary,
#product-offer .btn-primary[name="inWarenkorb"],
.choose_quantity + .btn-primary {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Produktkarten
   -------------------------------------------------------------------------- */
.productbox {
    background: var(--bmo-card);
    border: 1px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
}

.productbox:hover {
    transform: translateY(-3px);
    box-shadow: var(--bmo-shadow-lift);
    border-color: transparent;
}

/* Innerer Abstand der Artikelkacheln – Inhalt nicht an die Kante laufen lassen */
.productbox .productbox-inner {
    padding: var(--bmo-card-padding, 1rem);
}
.productbox .productbox-details,
.productbox .caption {
    padding: .25rem .25rem .5rem;
}

/* Signatur: Bloom-Linie erscheint beim Hover an der Unterkante der Karte */
.productbox::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--bmo-bloom);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.productbox:hover::after { transform: scaleX(1); }

/* Opt-in-Kachel fuer den OnPage Composer */
.bmo-card {
    background: var(--bmo-card);
    border: 1px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
    padding: var(--bmo-card-padding, 1rem);
    /* Nur vertikaler Aussenabstand – seitliche auto-Margins
       (Zentrierung!) bleiben unberuehrt */
    margin-top: 5px;
    margin-bottom: 5px;
    box-shadow: var(--bmo-shadow);
}
.bmo-card + .bmo-card { margin-top: 14px; }
.bmo-card-accent {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--bmo-violet), var(--bmo-magenta), var(--bmo-amber)) 1;
}
.bmo-card-hover {
    transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
    .bmo-card-hover:hover {
        transform: translateY(-3px);
        box-shadow: var(--bmo-shadow-lift);
    }
}

.productbox-title,
.productbox .productbox-title a {
    color: var(--bmo-ink);
    font-weight: 600;
}

.price, .price_wrapper .price {
    color: var(--bmo-violet-deep);
    font-family: var(--bmo-font-display);
    font-weight: 700;
}

.price .special-price,
.price-note del {
    color: var(--bmo-ink-soft);
}

/* Verfügbarkeit */
.status-ok, .availability-ok, .text-success {
    color: var(--bmo-leaf) !important;
}

/* --------------------------------------------------------------------------
   Breadcrumb, Filter, Listen
   -------------------------------------------------------------------------- */

/* Keine Trennlinien ober-/unterhalb der Breadcrumb-Leiste – die
   Chip-Optik des Pfads braucht keine zusaetzliche Rahmung */
#main-wrapper *:has(> .breadcrumb),
#main-wrapper *:has(> nav > .breadcrumb),
#main-wrapper *:has(> * > .breadcrumb),
.breadcrumb-container,
.breadcrumb-wrapper {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: .875rem;
}
.breadcrumb a { color: var(--bmo-ink-soft); }
.breadcrumb .active { color: var(--bmo-ink); }

.filter-box, .sidebar .box {
    background: var(--bmo-card);
    border: 1px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
}

/* --------------------------------------------------------------------------
   Artikeldetailseite
   -------------------------------------------------------------------------- */
#product-offer, .product-offer {
    background: var(--bmo-card);
    border: 1px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
    box-shadow: var(--bmo-shadow);
    padding: var(--bmo-card-padding, 1rem);
    overflow: visible;
}

/* Innere Preis-/Verfuegbarkeitsblöcke der Angebots-Box nicht an die
   Kante laufen lassen (NOVA setzt hier teils 0-Abstaende) */
#product-offer .price_wrapper,
#product-offer .product-price,
#product-offer .delivery-status,
#product-offer .availability,
#product-offer .base-price,
.product-offer .price_wrapper {
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Mengenwahl: NOVA legt den Rahmen auf das UMSCHLIESSENDE Element,
   nicht auf die Kind-Elemente – daher Radius (+ Clipping der eckigen
   Kinder) direkt auf den Wrapper. Mehrere Klassenvarianten abgedeckt. */
#product-offer .input-group,
.product-offer .input-group,
.form-counter,
.choose_quantity,
.quantity-wrapper,
[class*="quantity"] .input-group {
    border-radius: var(--bmo-radius);
    overflow: hidden;
}

/* Ratenzahlungs-Hinweis: neutraler, rahmenloser Auftritt.
   Empfohlene Plugin-Einstellung: Bannertyp "Text mit Logo" – damit
   existiert PayPals subpixel-anfaelliger interner Rahmen gar nicht erst
   (bekannter Plugin-Bug bei Browser-Zoom != 100%, siehe README). */
#product-offer [data-pp-message],
.product-offer [data-pp-message],
#product-offer *:has(> iframe[name*="paypal_message"]) {
    border: 0 !important;
    padding: .25rem 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
#product-offer [data-pp-message] > iframe,
.product-offer [data-pp-message] > iframe,
#product-offer *:has(> iframe[name*="paypal_message"]) > iframe {
    display: block;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Zahlarten-Widgets (PayPal & Co.): volle Containerbreite erzwingen,
   kein Clipping, keine Hoehenbegrenzung – die iframes messen ihre
   Breite beim Laden und muessen responsiv nachziehen koennen */
#product-offer iframe,
.product-offer iframe {
    display: block;
    max-width: 100% !important;
}
#product-offer .paypal-buttons,
.product-offer .paypal-buttons {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
}
#product-offer [id*="ppc"][id*="button"],
#product-offer [class*="ppc"][class*="button"] {
    border: 0 !important;
    background: transparent !important;
}
#product-offer [id^="paypal"],
#product-offer [class*="paypal"],
#product-offer [class*="ppc-"] {
    max-width: 100% !important;
    overflow: visible !important;
    min-height: 0;
}


/* Trust-Zeile (Versand, Widerruf) dezent hervorheben */
.product-info-value, .shipment-info {
    color: var(--bmo-ink-soft);
}

/* Bildvorschau-Kacheln (Galerie-Thumbnails) abrunden – Rahmen und Bild
   folgen dem Template-Radius. Alle Zwischen-Wrapper mitgerundet, da der
   sichtbare 1px-Rahmen bei NOVA auf einem Link-/Div-Wrapper zwischen
   Kachel und Bild liegt, nicht nur auf der Kachel selbst. */
#main-wrapper [class*="thumb"] {
    border-radius: calc(var(--bmo-radius) - 2px);
    overflow: hidden;
}
#main-wrapper [class*="thumb"] :is(a, div, span, figure),
#main-wrapper .square,
#main-wrapper .slick-slide > div,
#main-wrapper .swiper-slide > :is(a, div) {
    border-radius: calc(var(--bmo-radius) - 2px);
}
#main-wrapper [class*="thumb"] img,
#main-wrapper .swiper-slide img {
    border-radius: calc(var(--bmo-radius) - 3px);
}
/* Aktives Vorschaubild (Slick-Carousel markiert es per .slick-current) –
   Randfarbe an die konfigurierbare Akzentstreifen-Farbe binden statt an
   NOVAs kompilierte Primärfarbe. Mehrfache Selektor-Varianten + ID-Scope
   + Klassen-Wiederholung, da unklar ist, auf welchem der verschachtelten
   Elemente (Slide-Wrapper, .square, .inner, img) der Rahmen tatsaechlich
   sitzt. */
#gallery_preview .slick-current,
#gallery_preview .slick-current .square,
#gallery_preview .slick-current .inner,
#gallery_preview .slick-current img,
.product-thumbnails .slick-current,
.product-thumbnails .slick-current .square,
.product-thumbnails .slick-current .inner,
.product-thumbnails .slick-current img,
.carousel-thumbnails .slick-current,
.carousel-thumbnails .slick-current .square,
.carousel-thumbnails .slick-current .inner,
.carousel-thumbnails .slick-current img,
#gallery_preview .slick-current.slick-current.slick-current.slick-current {
    border-color: var(--bmo-stripe) !important;
    outline-color: var(--bmo-stripe) !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer#footer, #footer {
    background: var(--bmo-footer-bg, var(--bmo-violet-deep));
    color: #EDEBF7;
}

/* Hoher Kontrast für alle Footer-Texte und -Links (NOVA setzt hier teils
   sehr spezifische dunkle Farben – daher bewusst mit !important übersteuern) */
#footer,
#footer p,
#footer li,
#footer address,
#footer .text-muted,
#footer small {
    color: #EDEBF7 !important;
}
#footer a,
#footer .nav-link,
#footer .list-unstyled a,
#footer .footer-links a {
    color: #FFFFFF !important;
    text-decoration: none;
}
#footer a:hover,
#footer .nav-link:hover {
    color: var(--bmo-amber) !important;
    text-decoration: underline;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
#footer legend, #footer .footer-title, #footer .collapse-toggle,
#footer a[href^="#crd"],
#footer [data-toggle="collapse"], #footer [data-bs-toggle="collapse"],
#footer .dropdown-toggle,
#footer button,
#footer summary,
#footer [class*="collapse"],
#footer [class*="title"],
#footer [class*="headline"],
#footer [class*="caption"] {
    color: #FFFFFF !important;
    font-family: var(--bmo-font-display);
    font-weight: 600;
}

/* Bloom-Linie als Abschluss über dem Footer */
#footer { border-top: 4px solid transparent; }
#footer {
    border-image: var(--bmo-bloom) 1;
}

/* Copyright-Zeile */
#footer .footer-bottom, #footer .copyright {
    background: rgba(0, 0, 0, .22);
    color: #E4E1F2 !important;
}

/* --------------------------------------------------------------------------
   Formulare & Checkout
   -------------------------------------------------------------------------- */
.form-control {
    border-radius: var(--bmo-radius);
    border-color: var(--bmo-line);
}
.form-control:focus {
    border-color: var(--bmo-violet);
    box-shadow: 0 0 0 3px var(--bmo-violet-soft);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bmo-violet);
    border-color: var(--bmo-violet);
}

/* --------------------------------------------------------------------------
   Kleinigkeiten
   -------------------------------------------------------------------------- */
::selection { background: var(--bmo-violet); color: #fff; }

/* ==========================================================================
   Modern 2.0 – UX- und Design-Feinschliff
   ==========================================================================
   Umsetzung gaengiger Best Practices fuer moderne Shop-Optik:
   ruhige Flaechen + klare Kachel-Hierarchie, Glas-Header beim Scrollen,
   sanfte Micro-Interactions, grosse Touch-Ziele, lesefreundliche Typografie.
   Alle Regeln sind additiv und greifen nur, wo die Selektoren existieren.
   ========================================================================== */

/* --- Sanftes Scrollen (mit Ruecksicht auf reduzierte Bewegung) --- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- Dezente, moderne Scrollbar --- */
* { scrollbar-width: thin; scrollbar-color: var(--bmo-violet) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bmo-violet) 55%, #C9C6DC);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* --- Glas-Header: haftet beim Scrollen, leicht transparent mit Blur --- */
#header {
    position: sticky;
    top: 0;
    z-index: 1030;
}
#header.bmo-stuck {
    background: color-mix(in srgb, #FFFFFF 84%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
}

/* --- Typografie: Leserhythmus und Hierarchie --- */
body { line-height: 1.6; }
h1, .h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; }
h2, .h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; }

/* --- Kachel-Hierarchie: eindeutig zuordenbare Shop-Elemente, bewusst
   KEINE generische .card-Regel: OPC-Portlets nutzen die Klasse teils
   selbst und wuerden ungewollt Rahmen erhalten. --- */
.checkout-card,
#complete-order-button-wrapper {
    background: var(--bmo-card);
    border: 1px solid var(--bmo-line);
    border-radius: var(--bmo-radius);
}

/* --- Produktkarten: sanfter Bild-Zoom beim Hover --- */
.productbox .productbox-images,
.productbox .image-wrapper {
    overflow: hidden;
    border-radius: calc(var(--bmo-radius) - 4px);
}
.productbox img {
    transition: transform .35s ease;
}
@media (hover: hover) {
    .productbox:hover img { transform: scale(1.045); }
}

/* --- Buttons: Micro-Interaction (Lift), grosse Touch-Ziele --- */
.btn {
    border-radius: var(--bmo-radius);
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease, border-color .15s ease;
}
.btn-primary:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) {
    .btn-primary:hover { transform: translateY(-1px); }
}
.btn, .form-control, .custom-select, select.form-control {
    min-height: 44px; /* Touch-Ziel >= 44px (Apple HIG / WCAG 2.5.8) */
}
/* In Input-Gruppen (z. B. Mengenwahl mit -/+) bestimmt die Gruppe die
   Hoehe – sonst ueberdeckt ein zu hohes Feld die Rahmenlinien */
.input-group .form-control,
.input-group .btn,
.input-group .input-group-text,
.input-group .input-group-btn .btn {
    min-height: 0;
}

.custom-select,
select.form-control,
select {
    border-radius: var(--bmo-radius);
}
.input-group .btn,
.input-group .form-control,
.input-group .input-group-text {
    border-radius: 0;
}
.input-group > *:first-child,
.input-group > *:first-child .btn,
.input-group > *:first-child .form-control,
.input-group > *:first-child .input-group-text {
    border-top-left-radius: var(--bmo-radius);
    border-bottom-left-radius: var(--bmo-radius);
}
.input-group > *:last-child,
.input-group > *:last-child .btn,
.input-group > *:last-child .form-control,
.input-group > *:last-child .input-group-text {
    border-top-right-radius: var(--bmo-radius);
    border-bottom-right-radius: var(--bmo-radius);
}

/* --- Suche als moderne Pill --- */
#search-header .form-control,
.search input.form-control {
    border-radius: 999px;
    padding-left: 1.1rem;
}
#search-header .btn, .search .btn { border-radius: 999px; }

/* --- Badges als Pills --- */
.badge { border-radius: 999px; padding: .35em .7em; font-weight: 600; }

/* --- Breadcrumb als Chip-Leiste --- */
.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    background: color-mix(in srgb, var(--bmo-violet) 6%, #FFFFFF);
    border: 1px solid var(--bmo-line);
    border-radius: 999px;
    padding: .35rem .9rem;
}

/* --- Tabs: animierter Unterstrich in der Akzentstreifen-Farbe --- */
.nav-tabs { border-bottom: 1px solid var(--bmo-line); gap: .25rem; }
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--bmo-radius) var(--bmo-radius) 0 0;
    position: relative;
    font-weight: 600;
    color: var(--bmo-ink-soft);
}
.nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 20%; right: 20%; bottom: 0;
    height: 3px;
    border-radius: 2px;
    /* !important: verhindert, dass eine spezifischere native
       ".nav-link.active::after"-Regel des Basisthemes mit eigener
       Hintergrundfarbe gewinnt */
    background: var(--bmo-stripe) !important;
    background-color: var(--bmo-stripe) !important;
    background-image: none !important;
    transform: scaleX(0);
    transition: transform .2s ease;
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link:focus::after,
#product-tabs .nav-link.active::after,
#product-tabs .nav-link:hover::after {
    background: var(--bmo-stripe) !important;
    background-color: var(--bmo-stripe) !important;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active *,
#product-tabs .nav-item.show .nav-link,
#product-tabs .nav-link.active,
#product-tabs .nav-link.active *,
#product-tabs .nav-link.active::before {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
}
.nav-tabs .nav-link.active,
#product-tabs .nav-link.active { color: var(--bmo-ink); }
.nav-tabs .nav-link::before,
#product-tabs .nav-link::before {
    border-color: var(--bmo-stripe) !important;
    background: none !important;
    box-shadow: none !important;
}
.nav-tabs .nav-link::after,
#product-tabs .nav-link::after {
    z-index: 5;
    pointer-events: none;
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after,
#product-tabs .nav-link.active::after,
#product-tabs .nav-link:hover::after { transform: scaleX(1); }
/* Aeusserste Absicherung ueber CSS-Spezifitaet: Eine Klasse mehrfach im
   selben Selektor zu wiederholen zaehlt bei der Spezifitaetsberechnung
   JEDES Mal mit (".active.active.active" = 3x Klassen-Gewicht). Damit
   schlagen wir garantiert jede realistische native Regel des Basisthemes
   (z. B. "#product-tabs .nav-link.active" mit nur 2 Klassen), ohne eine
   Seiten-spezifische ID hart zu codieren -- gilt fuer jeden Tab. */
#product-tabs .nav-link.active.active.active.active.active,
#product-tabs a[id^="tab-link-"].active.active.active.active.active {
    border: 0 !important;
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
#product-tabs .nav-link.active.active.active.active.active::before,
#product-tabs a[id^="tab-link-"].active.active.active.active.active::before {
    border: 0 !important;
    border-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}
#product-tabs .nav-link.active.active.active.active.active::after,
#product-tabs a[id^="tab-link-"].active.active.active.active.active::after {
    background: var(--bmo-stripe) !important;
    background-color: var(--bmo-stripe) !important;
    background-image: none !important;
    border: 0 !important;
    transform: scaleX(1) !important;
}

/* --- Formulare: klare Beschriftung, ruhige Felder --- */
label, .form-label { font-weight: 600; font-size: .9rem; }
.form-control::placeholder { color: color-mix(in srgb, var(--bmo-ink) 40%, #FFFFFF); }

/* --- Tabellen (z. B. Merkmale, Warenkorb) --- */
.table thead th {
    border-bottom: 2px solid var(--bmo-line);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bmo-ink-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: color-mix(in srgb, var(--bmo-violet) 3%, #FFFFFF);
}

/* --- Vertikaler Rhythmus zwischen Inhaltsbloecken --- */
#main-wrapper > .container > *,
#main-wrapper > .container-fluid > * {
    scroll-margin-top: 90px; /* Anker landen nicht unter dem Sticky-Header */
}

/* --- Footer: Abschluss der "Karte", grosszuegiger Weissraum --- */
#footer { padding-top: 2.5rem; }
#footer .footer-bottom, #footer .copyright { border-radius: 0; }

/* --- Bilder nie hart abgeschnitten wirken lassen --- */
#main-wrapper img { border-radius: calc(var(--bmo-radius) - 6px); }
#main-wrapper .productbox img { border-radius: 0; }