/* ==========================================================================
   BoDiAyk Modern One – Bloom-Spektrum (NOVA-Child Overlay)
   ==========================================================================
   Designidee: Das violett-magenta-orangefarbene Spektrum einer LED-Blütelampe
   ist das wiederkehrende Signatur-Element ("Bloom-Linie"). Alles andere bleibt
   ruhig: viel Weißraum, klare Karten, kräftiges Marken-Violett #51479C.

   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-footer-bg:     var(--bmo-violet-deep);
    --bmo-magenta:       #B44CC0;
    --bmo-amber:         #FF8A3D;
    --bmo-leaf:          #2F9E57;
    --bmo-ink:           #1B1730;
    --bmo-ink-soft:      #5A5570;
    --bmo-paper:         #FAFAF8;
    --bmo-card:          #FFFFFF;
    --bmo-line:          #E6E4EF;
    --bmo-radius:        10px;
    --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;
}

/* --- 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);
}

a { color: var(--bmo-violet); }
a: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) */
#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-bloom);
}
#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);
}

/* 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);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--bmo-violet-deep);
    border-color: var(--bmo-violet-deep);
    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);
}

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

/* 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); }

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

.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
   -------------------------------------------------------------------------- */
.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
   -------------------------------------------------------------------------- */
/* Bildvorschau-Kacheln (Galerie-Thumbnails) abrunden – Rahmen und Bild
   folgen dem Template-Radius */
#main-wrapper [class*="thumb"] {
    border-radius: calc(var(--bmo-radius) - 2px);
    overflow: hidden;
}
/* Auch alle Zwischen-Wrapper in der Thumbnail-Kachel runden – der
   sichtbare 1px-Rahmen liegt bei NOVA auf einem Link-/Div-Wrapper
   zwischen Kachel und Bild */
#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);
}

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

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

.nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--bmo-violet);
    color: var(--bmo-violet-deep);
    font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   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 eigene,
   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: linear-gradient(90deg, #51479C, #B44CC0, #FF8A3D) 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: Inhaltsbloecke als ruhige Karten --- */
/* --- Opt-in-Kachel fuer den OnPage Composer ---
   Im OPC einem Portlet/Bereich die CSS-Klasse "bmo-card" geben, um es
   bewusst im Modern-One-Kachel-Look darzustellen. Zusatzvarianten:
   "bmo-card bmo-card-accent"  -> mit Bloom-Linie an der Oberkante
   "bmo-card bmo-card-hover"   -> mit Hover-Lift wie bei Produktkarten */
.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);
}
/* Liegen mehrere bmo-cards direkt untereinander, etwas mehr Luft dazwischen */
.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);
    }
}

/* Bewusst KEINE generische .card-Regel: OPC-Portlets nutzen die Klasse
   teils selbst und wuerden ungewollt Rahmen erhalten. Kachel-Optik nur
   fuer eindeutige Shop-Elemente: */
.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 {
    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;
}
/* --- Abgerundete Eingaben: Mengenwahl, Variationsauswahl, Selects ---
   Folgt dem Templateeinstellungs-Radius (--bmo-radius). Innerhalb von
   Input-Gruppen bleiben die inneren Kanten gerade, nur die aeusseren
   Ecken der Gruppe werden gerundet. */
.btn {
    border-radius: var(--bmo-radius);
}
.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);
}

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

/* 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;            /* inline-iframes verlieren sonst die unterste
                                  Pixelreihe (Baseline-Luecke) */
    max-width: 100% !important;
}
/* Smart-Buttons sind responsiv: Container auf volle Breite -> PayPal
   zeichnet die Buttons selbst neu (korrekte Breite, saubere Rundungen,
   linker Button buendig links, rechter buendig rechts) */
#product-offer .paypal-buttons,
.product-offer .paypal-buttons {
    width: 100% !important;
    max-width: 100% !important;
}
#product-offer [id^="paypal"],
#product-offer [class*="paypal"],
#product-offer [class*="ppc-"] {
    max-width: 100% !important;
    overflow: visible !important;
    min-height: 0;
}
/* Ratenzahlungs-Banner: Rahmen komplett selbst zeichnen (Template-Optik)
   und PayPals intern gezeichneten, subpixel-anfaelligen Rahmen per
   Negativ-Margin wegschneiden. Damit ist die Rahmenlinie bei jeder
   Zoomstufe garantiert vollstaendig – unabhaengig vom iframe-Inhalt. */
/* 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;
}

/* Das Plugin legt um das Banner zusaetzliche Wrapper mit eigenem (blauem)
   Rahmen – diese Rahmen komplett deaktivieren; sichtbar bleibt nur der
   Template-Rahmen auf dem Banner-Element selbst */
#product-offer *:has(> [data-pp-message]),
#product-offer *:has(> * > [data-pp-message]),
#product-offer *:has(> *:has(> iframe[name*="paypal_message"])),
.product-offer *:has(> [data-pp-message]) {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Button-Container tragen nie einen Rahmen (gegen zu breit greifende
   Wrapper-Selektoren des Plugins) */
#product-offer .paypal-buttons,
#product-offer [id*="ppc"][id*="button"],
#product-offer [class*="ppc"][class*="button"] {
    border: 0 !important;
    background: transparent !important;
}
/* Angebots-Box selbst darf Widgets nicht beschneiden */
#product-offer, .product-offer {
    overflow: visible;
}

/* --- 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 --- */
/* 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 {
    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 --- */
.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;
    background: var(--bmo-bloom);
    transform: scaleX(0);
    transition: transform .2s ease;
}
.nav-tabs .nav-link.active { border: 0; color: var(--bmo-ink); background: transparent; }
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after { transform: scaleX(1); }

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