/*
 * =========================================================================
 * bakumer.de – FC Bayern Fanclub Bakumer Germanen
 * Ablage: /templates/NOVAChild/themes/my-nova/custom.css
 *
 * Neu aufgebaut. Klassennamen sind aus dem DOM des Shops verifiziert,
 * nicht geraten.
 *
 * AUFBAU
 *   1  Tokens (Farben, Maße)
 *   2  Schriften
 *   3  Typografie
 *   4  Buttons
 *   5  NOVA-Akzentfarbe ersetzen
 *   6  Header
 *   7  Logo
 *   8  Warenkorb-Vorschau
 *   9  Produktkacheln und Slider
 *  10  Preise und Badges
 *  11  Eingabegruppen (Menge, Suche)
 *  12  Footer
 *  13  Zugänglichkeit
 *  14  Seite "Wir über uns"
 *  15  Mobiles Menü
 *  16  JTL-Hinweis im Footer ausblenden
 *  17  Artikelsticker (Ribbons)
 *  18  Variationsauswahl (Verfügbarkeitshinweis)
 *
 * PRINZIP
 *   Der Header wird über die ID #jtl-nav-wrapper angesprochen. Dadurch
 *   gewinnen die Regeln über Spezifität statt über !important, und
 *   Ausnahmen (Dropdowns, Modals) lassen sich normal formulieren.
 *   !important nur dort, wo NOVA Inline-Styles oder eigene !important
 *   setzt.
 *
 * SIGNATURE
 *   "Speed-Cut" – schräg angeschnittene Kante, abgeleitet von
 *   Trikot-Seitenpanels. Nur an zwei Stellen: Badges und
 *   Section-Überschriften. Bewusst sparsam.
 * =========================================================================
 */


/* =========================================================================
   1  TOKENS
   ========================================================================= */

:root {
    /* Markenfarben, aus dem Fanclub-Logo ausgelesen */
    --bk-accent:        #E32125;
    --bk-accent-dark:   #C31C1F;
    --bk-accent-soft:   rgba(227, 33, 37, 0.10);

    --bk-ink:           #111318;
    --bk-ink-70:        #444A57;
    --bk-ink-45:        #767D8C;

    --bk-paper:         #FFFFFF;
    --bk-surface:       #F4F5F7;
    --bk-line:          #DFE2E7;

    --bk-success:       #1B8A4B;
    --bk-warning:       #B8730A;

    /* Sportlich heißt kantig */
    --bk-radius:        3px;

    --bk-shadow:        0 2px 8px rgba(17, 19, 24, 0.08);
    --bk-shadow-lift:   0 8px 24px rgba(17, 19, 24, 0.14);

    /* Winkel des Speed-Cut, zentral gesteuert */
    --bk-cut:           14px;

    --bk-transition:    160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Höhe von Suchfeld und Lupe – beide identisch */
    --bk-search:        2.6rem;

    /* Logo-Höhen */
    --bk-logo:          84px;
    --bk-logo-tablet:   60px;
    --bk-logo-mobile:   38px;
    --bk-logo-checkout: 56px;

    --bk-font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
    --bk-font-body:     'Barlow', -apple-system, 'Segoe UI', sans-serif;
}


/* =========================================================================
   2  SCHRIFTEN

   Dateien ablegen unter /templates/NOVAChild/fonts/
   Bezug: fonts.google.com (Barlow, Barlow Condensed) -> transfonter.org
   Nicht per <link> vom Google-Server laden (Abmahngrund).
   Ohne die Dateien greift Arial Narrow als Fallback.
   ========================================================================= */

@font-face {
    font-family: 'Barlow';
    src: url('/templates/NOVAChild/fonts/barlow-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/templates/NOVAChild/fonts/barlow-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/templates/NOVAChild/fonts/barlow-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/templates/NOVAChild/fonts/barlow-condensed-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/templates/NOVAChild/fonts/barlow-condensed-extrabold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}


/* =========================================================================
   3  TYPOGRAFIE
   ========================================================================= */

body {
    font-family: var(--bk-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--bk-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--bk-font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.98;
    color: var(--bk-ink);
}
h1, .h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2, .h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3, .h3 { font-size: 1.4rem; }

h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--bk-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

a        { color: var(--bk-accent); text-decoration: none; }
a:hover  { color: var(--bk-accent-dark); text-decoration: underline; }

/* Section-Überschrift mit Speed-Cut.
   Klasse im OnPage Composer unter "Benutzerdefinierte Klassen" vergeben. */
.bk-section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    margin-bottom: 28px;
}
.bk-section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 72px; height: 6px;
    background: var(--bk-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--bk-cut)) 100%, 0 100%);
}


/* =========================================================================
   4  BUTTONS

   Achtung: kein großer seitlicher Innenabstand global – sonst brechen
   Eingabegruppen (Menge, Suche) um. Siehe Abschnitt 11.
   ========================================================================= */

.btn {
    font-family: var(--bk-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.02rem;
    border-radius: var(--bk-radius);
    border-width: 2px;
    transition: background-color var(--bk-transition),
                border-color var(--bk-transition),
                color var(--bk-transition);
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bk-accent);
    border-color: var(--bk-accent);
    color: var(--bk-paper);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bk-accent-dark);
    border-color: var(--bk-accent-dark);
    color: var(--bk-paper);
}

.btn-outline-primary,
.btn-secondary {
    background-color: transparent;
    border-color: var(--bk-ink);
    color: var(--bk-ink);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bk-ink);
    border-color: var(--bk-ink);
    color: var(--bk-paper);
}

/* Kaufen ist die lauteste Aktion der Seite */
.product-buy .btn,
.btn-add-to-cart {
    width: 100%;
    font-size: 1.08rem;
    padding: 0.75rem 1.5rem;
}


/* =========================================================================
   5  NOVA-AKZENTFARBE ERSETZEN

   Das clear-Theme nutzt #F8BF00 an 69 Stellen. Hier auf Markenrot.
   ========================================================================= */

.bg-primary     { background-color: var(--bk-accent) !important; }
.border-primary { border-color: var(--bk-accent) !important; }
.text-primary   { color: var(--bk-accent) !important; }

/* Icon-Buttons: Wunschzettel, Vergleich, Galerie */
.btn-icon-primary:hover {
    border-color: var(--bk-accent);
    color: var(--bk-accent);
}
.btn-icon-primary:not(:disabled):not(.disabled):active,
.btn-icon-primary:not(:disabled):not(.disabled).active,
.btn-icon-secondary:not(:disabled):not(.disabled):active,
.btn-icon-secondary:not(:disabled):not(.disabled).active {
    border-color: var(--bk-accent);
    background-color: var(--bk-accent);
    color: var(--bk-paper);
}
.btn-link:hover { color: var(--bk-accent-dark); }

/* Formular-Fokus */
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select.show button.dropdown-toggle {
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 0.2rem var(--bk-accent-soft);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--bk-accent);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bk-accent);
}
.form-icon-trigger-label:hover { color: var(--bk-accent); }

/* Preisfilter.
   ACHTUNG: Vendor-Pseudoelemente NIE mit normalen Selektoren in eine
   Liste packen. Kennt der Browser einen Selektor der Liste nicht,
   verwirft er die gesamte Regel. Deshalb hier getrennt. */
.noUi-horizontal .noUi-connect,
.noUi-connect {
    background: var(--bk-accent);
}
.noUi-horizontal .noUi-handle,
.noUi-handle {
    background: var(--bk-accent);
    border: 0;
}
.custom-range::-webkit-slider-thumb { background-color: var(--bk-accent); }
.custom-range::-moz-range-thumb     { background-color: var(--bk-accent); }
.custom-range::-ms-thumb            { background-color: var(--bk-accent); }

/* Tab-Unterstrich ("Beschreibung"), Schrittanzeige, Filterreiter */
.tab-navigation .nav-link::after,
.productlist-filter-categories > .nav-item > .nav-link::before {
    border-color: var(--bk-accent);
}
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after { background: var(--bk-accent); }
.checkout-steps .step-check { color: var(--bk-accent); }
aside .nav-panel > .nav > .active > .nav-link { border-bottom-color: var(--bk-accent); }

/* Variantenauswahl */
.swatches-image.active,
.swatches-text.active,
.carousel-thumbnails .slick-slide.slick-current,
.filter-item.active .filter-img,
.filter-search-wrapper.input-group-selected .input-group-text,
.filter-search-wrapper.input-group-selected .filter-search {
    border-color: var(--bk-accent);
}

/* Slider-Pfeile, Galerie, Modal-Schließer */
.slick-arrow:hover,
#image_wrapper #gallery .slick-arrow:hover,
.modal-header .close:hover,
.modal-header .close:focus {
    background-color: var(--bk-accent);
    color: var(--bk-paper);
}

.page-link:hover        { color: var(--bk-accent); }
.list-group-item.active { background-color: var(--bk-accent); border-color: var(--bk-accent); }

/* Restliche Stellen, an denen NOVA das Orange verwendet */
.progress-bar                                   { background-color: var(--bk-accent); }
.badge-check                                    { border-color: var(--bk-accent); }
.badge-circle:hover,
.badge-circle:focus,
.badge-circle-1.on-list                         { background-color: var(--bk-accent); border-color: var(--bk-accent); }
.consent-modal-close:hover,
.consent-modal-close:focus,
a.give-consent-preview:focus-visible            { color: var(--bk-accent); }
.jqcloud-word a:hover                           { color: var(--bk-accent) !important; }
.account-head-data .account-head-data-credit    { border-color: var(--bk-accent); }
#image_wrapper.fullscreen .product-detail-image-topbar #image_fullscreen_close:hover {
    background-color: var(--bk-accent);
}
.btn-animated .btn-primary:hover {
    background-color: var(--bk-accent-dark);
    border-color: var(--bk-accent-dark);
}
.btn-animated .btn-outline-primary:hover        { border-color: var(--bk-ink); }
.btn-animated .btn-outline-primary:hover::after { background: var(--bk-ink); }

/* Rahmen und Umrandungen an Produktkacheln beim Überfahren und bei
   Tastaturfokus – dort blitzte NOVAs Orange noch durch */
.product-wrapper:hover,
.product-wrapper:focus-within,
.productbox-image:hover,
.square-image:hover,
.product-wrapper a:focus,
.product-wrapper a:focus-visible {
    border-color: var(--bk-ink);
    outline-color: var(--bk-ink);
}
a:focus,
button:focus {
    outline-color: var(--bk-ink);
}


/* =========================================================================
   6  HEADER

   Struktur (aus dem DOM):
     header#jtl-nav-wrapper.fixed-navbar.sticky-top
       > .container-fluid.container-fluid-xl[role=banner]
           > .toggler-logo-wrapper > nav.navbar
           > .secure-checkout-topbar          (nur im Checkout)
       > .search-form-wrapper-fixed.d-lg-none (nur mobil)

   WICHTIG: Hier werden ausschließlich Farben gesetzt. Keine Eingriffe in
   width, display oder flex – das hat zuvor die Zentrierung zerstört.
   ========================================================================= */

#jtl-nav-wrapper,
#jtl-nav-wrapper > .container-fluid,
#jtl-nav-wrapper > .search-form-wrapper-fixed,
#jtl-nav-wrapper .toggler-logo-wrapper,
#jtl-nav-wrapper .navbar {
    background-color: var(--bk-accent);
}

/* Schriftfarbe erben lassen statt per * erzwingen */
#jtl-nav-wrapper {
    color: var(--bk-paper);
}
#jtl-nav-wrapper a:not(.btn),
#jtl-nav-wrapper .nav-link,
#jtl-nav-wrapper .navbar-toggler,
#jtl-nav-wrapper .cart-icon-dropdown-price,
#jtl-nav-wrapper .secure-checkout-topbar,
#jtl-nav-wrapper .secure-checkout-icon,
#jtl-nav-wrapper i,
#jtl-nav-wrapper .fa,
#jtl-nav-wrapper .fas,
#jtl-nav-wrapper .far {
    color: var(--bk-paper);
}
#jtl-nav-wrapper a:not(.btn):hover,
#jtl-nav-wrapper .nav-link:hover {
    color: var(--bk-paper);
    opacity: 0.85;
    text-decoration: none;
}

/* Aktiver Menüpunkt: weißer Strich. Rot bleibt den Kauf-Aktionen. */
#jtl-nav-wrapper .navbar-nav .nav-link {
    font-family: var(--bk-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 1.06rem;
    position: relative;
}
/* Aktiver Menüpunkt: weißer Strich. Rot bleibt den Kauf-Aktionen.
   NOVA legt auf DASSELBE ::after einen 6px gelben Rahmen – der muss
   hier ausdrücklich weg, sonst überlagern sich beide Striche. */
#jtl-nav-wrapper .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: 4px;
    height: 3px;
    width: auto;
    border: 0;
    background: var(--bk-paper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bk-transition);
}
/* Sicherheitsnetz: alle Menü-Unterstriche im Header ohne gelben Rahmen */
#jtl-nav-wrapper .nav-link::after,
#jtl-nav-wrapper .nav-link::before,
#jtl-nav-wrapper .tab-navigation .nav-link::after,
#jtl-nav-wrapper .productlist-filter-categories > .nav-item > .nav-link::before {
    border-color: var(--bk-paper);
}
#jtl-nav-wrapper .navbar-nav .nav-link:hover::after,
#jtl-nav-wrapper .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* Sichere-Bezahlung-Leiste liegt auf dem roten Grund */
#jtl-nav-wrapper .secure-checkout-topbar,
#jtl-nav-wrapper .secure-checkout-icon {
    background-color: transparent;
}

/* Warenkorb-Zähler dunkel, damit er auf Rot heraussticht */
#jtl-nav-wrapper .fa-sup,
#jtl-nav-wrapper .badge-circle {
    background-color: var(--bk-ink);
    border-color: var(--bk-ink);
    color: var(--bk-paper);
}


/* =========================================================================
   7  LOGO

   Seitenverhältnis rund 16:1, deshalb width auto und Höhe steuern.
   Im Checkout kleiner – erkannt an .secure-checkout-topbar, die es nur
   dort gibt.
   ========================================================================= */

#jtl-nav-wrapper .navbar-brand img {
    height: var(--bk-logo);
    max-height: var(--bk-logo);
    width: auto;
}
#jtl-nav-wrapper .navbar-brand {
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

#jtl-nav-wrapper:has(.secure-checkout-topbar) .navbar-brand img,
#jtl-nav-wrapper:has(.secure-checkout-icon) .navbar-brand img {
    height: var(--bk-logo-checkout);
    max-height: var(--bk-logo-checkout);
}

@media (max-width: 991.98px) {
    #jtl-nav-wrapper .navbar-brand img {
        height: var(--bk-logo-tablet);
        max-height: var(--bk-logo-tablet);
    }
}
@media (max-width: 575.98px) {
    #jtl-nav-wrapper .navbar-brand img {
        height: var(--bk-logo-mobile);
        max-height: var(--bk-logo-mobile);
    }
    #jtl-nav-wrapper .navbar-brand { margin-right: 0.5rem; }
}


/* =========================================================================
   8  WARENKORB-VORSCHAU UND AUFKLAPPMENÜS

   Weiße Flächen, die im roten Header hängen. Sie brauchen dunkle Schrift.
   Durch das ID-Präfix reicht normale Spezifität – kein !important nötig.

   Struktur:
     .cart-dropdown-container > .cart-dropdown.dropdown-menu
       > table.dropdown-cart-items
       > .row.cart-dropdown-buttons > div.col > a.btn
   ========================================================================= */

#jtl-nav-wrapper .dropdown-menu,
#jtl-nav-wrapper .cart-dropdown,
#jtl-nav-wrapper .search-suggestions,
#jtl-nav-wrapper .modal-content,
.cart-dropdown,
.dropdown-cart-items {
    background-color: var(--bk-paper);
    color: var(--bk-ink);
    border: 1px solid var(--bk-line);
    box-shadow: var(--bk-shadow-lift);
}

#jtl-nav-wrapper .dropdown-menu a:not(.btn),
#jtl-nav-wrapper .cart-dropdown a:not(.btn),
#jtl-nav-wrapper .dropdown-cart-items a:not(.btn),
#jtl-nav-wrapper .search-suggestions a:not(.btn),
#jtl-nav-wrapper .cart-dropdown .cart-items-name,
#jtl-nav-wrapper .cart-dropdown .cart-items-price,
#jtl-nav-wrapper .cart-dropdown .cart-dropdown-total-item,
#jtl-nav-wrapper .cart-dropdown .cart-dropdown-shipping-notice,
#jtl-nav-wrapper .cart-dropdown i,
#jtl-nav-wrapper .cart-dropdown .fa,
#jtl-nav-wrapper .cart-dropdown .fas {
    color: var(--bk-ink);
}
#jtl-nav-wrapper .dropdown-menu a:not(.btn):hover,
#jtl-nav-wrapper .cart-dropdown a:not(.btn):hover {
    color: var(--bk-accent);
    opacity: 1;
}

/* Beide Buttons gleich: weiße Fläche, dunkler Rahmen, nebeneinander */
.cart-dropdown-buttons > .col,
.cart-dropdown-buttons > [class*="col-"] {
    display: flex;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}
.cart-dropdown-buttons .btn,
#jtl-nav-wrapper .cart-dropdown-buttons .btn,
#jtl-nav-wrapper .cart-dropdown-buttons .btn-primary,
#jtl-nav-wrapper .cart-dropdown-buttons .btn-outline-primary {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--bk-paper);
    border: 2px solid var(--bk-ink);
    color: var(--bk-ink);
    box-shadow: none;
}
#jtl-nav-wrapper .cart-dropdown-buttons .btn:hover,
#jtl-nav-wrapper .cart-dropdown-buttons .btn:focus,
.cart-dropdown-buttons .btn:hover {
    background-color: var(--bk-ink);
    border-color: var(--bk-ink);
    color: var(--bk-paper);
}


/* =========================================================================
   9  PRODUKTKACHELN UND SLIDER

   Zwei Varianten im Einsatz:
     Kategorieseite: .productbox / .productbox-title / .productbox-price
     Startseiten-Slider (Product-Stream, slick):
       .product-wrapper.product-wrapper-product
         > a > .item-slider.productbox-image
              > span.item-slider-desc.text-clamp-2

   Ziel: gleiche Kachelhöhe, fluchtende Preise. .text-clamp-2 schneidet
   zwar zwei Zeilen ab, reserviert aber keine Höhe – daher min-height.
   ========================================================================= */

/* Slick-Spur auf gleiche Höhe */
.slick-track  { display: flex; align-items: stretch; }
.slick-slide  { height: auto; }
.slick-slide > div { height: 100%; }

/* Kachel als Spalte, damit der Preis nach unten kann.
   Gilt für BEIDE Varianten: Slider (.product-wrapper-product) und
   Kategorieliste (.product-wrapper mit .productbox-inner darin). */
.product-wrapper,
.productbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}
[class*="col-"] > .product-wrapper,
.col > .product-wrapper,
[class*="col-"] > .productbox,
.col > .productbox {
    height: 100%;
}
.product-wrapper > a,
.productbox-inner,
.productbox-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Bildbereich quadratisch, damit nichts springt */
.item-slider.productbox-image,
.productbox-image-wrapper {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.item-slider.productbox-image img,
.productbox-image-wrapper img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Titel: zwei Zeilen reservieren, dunkel statt rot, zentriert */
.item-slider-desc,
.productbox-title {
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    line-height: 1.3;
    font-size: 1rem;
    color: var(--bk-ink);
    text-align: center;
}

/* Preisblock ebenfalls zentriert */
.price_wrapper,
.productbox-price,
.product-wrapper .price,
.productbox .price {
    text-align: center;
}
.price_wrapper .price,
.productbox-price .price {
    display: block;
}
.product-wrapper a .item-slider-desc,
.product-wrapper a .item-slider-desc span,
.productbox-title a {
    color: var(--bk-ink);
}
.product-wrapper a:hover .item-slider-desc,
.product-wrapper a:hover .item-slider-desc span,
.productbox-title a:hover {
    color: var(--bk-accent);
}
.product-wrapper a:hover { text-decoration: none; }

/* Preis ans untere Ende – dadurch fluchten die Preise.
   Achtung: in der Kategorieliste heißt der Block .price_wrapper mit
   UNTERSTRICH und liegt in .productbox-inner > .row > .col-12. */
.product-wrapper .price,
.productbox-price {
    margin-top: auto;
}

.productbox-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.productbox-inner > .row:last-of-type {
    margin-top: auto;
}
.price_wrapper {
    margin-bottom: 0.9rem;
}

.productbox {
    background: var(--bk-paper);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    transition: border-color var(--bk-transition),
                box-shadow var(--bk-transition),
                transform var(--bk-transition);
}
.productbox:hover {
    border-color: var(--bk-ink);
    box-shadow: var(--bk-shadow-lift);
    transform: translateY(-2px);
}

/* Innenabstand: Titel und Preis dürfen nicht am Rahmen kleben */
.productbox-details,
.productbox > .productbox-title,
.productbox > .productbox-price {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}
.productbox-details {
    padding-bottom: 0.9rem;
}
.productbox-image-wrapper {
    padding: 0.6rem;
}

/* Hinweis: Ein Ansatz über .row:has(.productbox) funktioniert hier NICHT.
   :has() prüft alle Nachfahren, dadurch trifft die Regel auch die äußere
   Layout-Zeile, die Seitenleiste und Inhalt enthält – und zerlegt das
   Seitenraster. Die gleiche Höhe kommt stattdessen über height:100% an
   der Kachel selbst, siehe oben. */

@media (max-width: 575.98px) {
    .item-slider-desc,
    .productbox-title { font-size: 0.95rem; }
}


/* =========================================================================
   10  PREISE UND BADGES
   ========================================================================= */

.price,
.productbox-price,
.price_wrapper .price,
.item-list-price {
    font-family: var(--bk-font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--bk-ink);
    white-space: nowrap;
}
.price-note,
.vat-info,
.shipping-note {
    font-size: 0.8rem;
    color: var(--bk-ink-45);
    font-weight: 400;
    font-family: var(--bk-font-body);
}
.price-old,
.strike-price {
    color: var(--bk-ink-45);
    font-size: 1rem;
    text-decoration: line-through;
    font-weight: 500;
}

/* Badge mit Speed-Cut – das Signature-Element */
.badge,
.product-badge {
    font-family: var(--bk-font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    padding: 0.34rem 1.1rem 0.34rem 0.7rem;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--bk-cut)) 100%, 0 100%);
}
.badge-primary        { background-color: var(--bk-accent); color: var(--bk-paper); }
.badge-secondary      { background-color: var(--bk-ink);    color: var(--bk-paper); }
.badge-outline-primary{ border-color: var(--bk-accent);     color: var(--bk-accent); }

/* Der Zähler am Warenkorb ist rund, nicht angeschnitten */
.fa-sup,
.badge-circle {
    clip-path: none;
    border-radius: 50%;
}

/* Lieferstatus – im B2C Pflichtangabe, also gut lesbar */
.delivery-status,
.stock-available { color: var(--bk-success); font-weight: 500; }
.stock-low       { color: var(--bk-warning); font-weight: 500; }

@media (max-width: 1199.98px) {
    .price, .productbox-price { font-size: 1.35rem; }
}
@media (max-width: 575.98px) {
    :root { --bk-cut: 8px; }
    .price, .productbox-price { font-size: 1.2rem; }
}


/* =========================================================================
   11  EINGABEGRUPPEN

   Mengenfeld und Suche. Buttons hier brauchen kompakten Innenabstand,
   sonst bricht die Gruppe um und das Plus rutscht unter das Feld.
   ========================================================================= */

.input-group { flex-wrap: nowrap; }

.input-group > .btn,
.input-group-prepend .btn,
.input-group-append .btn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.input-group > input[type="number"],
.input-group > .form-control[type="number"] {
    text-align: center;
    min-width: 3.5rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* Suchfeld im Header: eine geschlossene weiße Fläche mit roter Lupe.
   Höhe zentral über --bk-search steuerbar.

   WICHTIG: Das Eingabefeld steckt in einem div.twitter-typeahead
   (Suchvorschläge). Deshalb NICHT mit > auf direkte Kinder gehen –
   sonst wird das Feld nie erfasst und behält seine 43px.

   !important ist hier nötig: Bootstrap setzt an .form-control und .btn
   eigene Höhen und Innenabstände. */
#jtl-nav-wrapper .input-group,
#jtl-nav-wrapper .input-group-append,
#jtl-nav-wrapper .input-group-prepend,
#jtl-nav-wrapper .twitter-typeahead {
    align-items: stretch !important;
    height: var(--bk-search) !important;
    margin: 0 !important;
}

#jtl-nav-wrapper .input-group .form-control,
#jtl-nav-wrapper .input-group input[type="text"],
#jtl-nav-wrapper .input-group input[type="search"],
#jtl-nav-wrapper .input-group-append .btn,
#jtl-nav-wrapper .input-group-append .input-group-text {
    height: var(--bk-search) !important;
    min-height: var(--bk-search) !important;
    max-height: var(--bk-search) !important;
    margin: 0 !important;
    background-color: var(--bk-paper);
    border: 1px solid var(--bk-paper);
    box-shadow: none !important;
    align-self: stretch;
}

#jtl-nav-wrapper .input-group .form-control,
#jtl-nav-wrapper .input-group input[type="text"],
#jtl-nav-wrapper .input-group input[type="search"] {
    line-height: 1.2;
    padding: 0 0.85rem !important;
    color: var(--bk-ink);
    border-right: 0;
    border-radius: var(--bk-radius) 0 0 var(--bk-radius);
    width: 100%;
}
#jtl-nav-wrapper .input-group .form-control::placeholder {
    color: var(--bk-ink-45);
}
#jtl-nav-wrapper .input-group .form-control:focus {
    border-color: var(--bk-paper);
    box-shadow: none !important;
}
#jtl-nav-wrapper .input-group-append .btn {
    padding: 0 0.9rem !important;
    border-left: 0;
    border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Die Vorschlagsliste hängt am typeahead-Wrapper und darf dessen
   Höhenbegrenzung nicht erben */
#jtl-nav-wrapper .tt-menu {
    height: auto !important;
    max-height: none !important;
    background-color: var(--bk-paper);
    color: var(--bk-ink);
    border: 1px solid var(--bk-line);
    box-shadow: var(--bk-shadow-lift);
}
#jtl-nav-wrapper .input-group-append .btn i,
#jtl-nav-wrapper .input-group-append .btn .fa,
#jtl-nav-wrapper .input-group-append .btn .fas {
    color: var(--bk-accent);
    font-size: 1.05rem;
}


/* =========================================================================
   12  FOOTER
   ========================================================================= */

#footer {
    background: var(--bk-ink);
    color: rgba(255, 255, 255, 0.75);
    padding-top: 2.5rem;
}
#footer .card,
#footer-boxes .card,
#footer .list-group-item,
#footer .table-striped tr {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}
#footer .card .card-title,
#footer h4,
#footer h5 {
    color: var(--bk-paper);
    font-family: var(--bk-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#footer a:not(.btn) {
    color: rgba(255, 255, 255, 0.75);
}
#footer a:not(.btn):hover {
    color: var(--bk-paper);
    text-decoration: underline;
}

/* Widerrufsbutton ist Pflicht, aber kein Kaufanreiz – deshalb neutral */
#footer .btn-primary,
#footer .btn-outline-primary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--bk-paper);
}
#footer .btn-primary:hover,
#footer .btn-outline-primary:hover {
    background-color: var(--bk-paper);
    border-color: var(--bk-paper);
    color: var(--bk-ink);
}


/* =========================================================================
   13  ZUGÄNGLICHKEIT

   NOVA nutzt für Fokus-Umrandungen eine ZWEITE gelbe Farbe: #ffda5f.
   Sie kommt zusätzlich zu #F8BF00 vor und muss separat ersetzt werden –
   sonst blitzt sie beim Anklicken von Kacheln, Buttons und Schaltern auf.
   ========================================================================= */

:focus-visible,
.btn:focus-visible,
.focus {
    outline: 2px solid var(--bk-ink);
    outline-offset: 2px;
}
#jtl-nav-wrapper :focus-visible {
    outline-color: var(--bk-paper);
}

/* Produktkachel: sehr spezifische Regel in NOVA, daher hier ausgeschrieben */
.productbox.productbox-hover:focus-visible .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before,
.product-wrapper:focus-within .productbox-inner::before {
    outline-color: var(--bk-ink);
}

/* Weitere Stellen mit #ffda5f */
.consent-switch .consent-input:focus + .consent-label::before,
.file-preview .fileinput-remove:focus-visible,
.file-preview .btn-file:focus-visible,
.file-drop-zone.clickable:focus,
.opc-Video .video-transcript.focus,
.swatches-image.focus,
.swatches-text.focus,
#cfg-container .custom-control:focus > label,
#cfg-container .custom-control:focus-within > label {
    outline-color: var(--bk-ink);
    border-color: var(--bk-ink);
}
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item {
    outline-color: var(--bk-accent);
}

/* Ribbons ("NEU"-Fähnchen) nutzen eigene Gelbtöne für die Faltkante */
.ribbon-1::before        { border-right-color: var(--bk-ink); }
.ribbon-custom.bg-primary::before { border-right-color: var(--bk-accent-dark); }

/* Sprunglink "Zum Inhalt springen" (Tastaturbedienung).
   Liegt oben im Inhaltsbereich und blitzte als dünner gelber Strich
   durch. Bleibt funktional, nur in den Markenfarben. */
.btn-skip-to,
a.btn-skip-to {
    background-color: var(--bk-ink);
    border-color: var(--bk-ink);
    color: var(--bk-paper);
}
.btn-skip-to:hover,
.btn-skip-to:focus,
a.btn-skip-to:hover,
a.btn-skip-to:focus {
    background-color: var(--bk-accent);
    border-color: var(--bk-accent);
    color: var(--bk-paper);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .productbox:hover { transform: none; }
}


/* =========================================================================
   14  SEITE "WIR ÜBER UNS"

   Das Bild wird per Inline-Style rechts umflossen (der Editor entfernt
   <style>-Blöcke). Hier nur die Anpassung für schmale Displays: dort
   rutscht es über den Text, weil neben einem 260px-Bild kein sinnvoller
   Textfluss mehr möglich ist.
   ========================================================================= */

@media (max-width: 767.98px) {
    .ueber-uns-figure {
        float: none !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 1.5rem auto !important;
    }
    .ueber-uns-figure figcaption {
        text-align: center;
    }
}


/* =========================================================================
   15  MOBILES MENÜ

   Ausschließlich unterhalb von 992px. Auf dem Desktop liegt die
   Navigation ebenfalls in .navbar-collapse – dort muss der rote Grund
   erhalten bleiben.

   Ausschließlich Farben. Keine Eingriffe in width, display oder flex.
   ========================================================================= */

@media (max-width: 991.98px) {

    /* Flächen des Menüs. Ohne ID-Präfix, damit die Regeln auch greifen,
       wenn das Menü außerhalb des Headers gerendert wird. */
    .navbar-collapse,
    .nav-panel,
    .nav-scrollbar,
    .nav-scrollbar-item,
    .submenu,
    .offcanvas,
    .offcanvas-body,
    #jtl-nav-wrapper .navbar-collapse,
    #jtl-nav-wrapper .nav-panel,
    #jtl-nav-wrapper .collapse.show,
    #jtl-nav-wrapper .collapsing {
        background-color: var(--bk-paper);
    }

    /* Schrift darin dunkel */
    .navbar-collapse,
    .navbar-collapse a,
    .navbar-collapse .nav-link,
    .nav-panel,
    .nav-panel a,
    .nav-panel .nav-link,
    .nav-scrollbar-item,
    .nav-scrollbar-item a,
    .nav-mobile-heading,
    .submenu,
    .submenu a,
    .offcanvas,
    .offcanvas a,
    #jtl-nav-wrapper .navbar-collapse,
    #jtl-nav-wrapper .navbar-collapse a,
    #jtl-nav-wrapper .navbar-collapse .nav-link,
    #jtl-nav-wrapper .nav-panel a,
    #jtl-nav-wrapper .nav-mobile-heading,
    #jtl-nav-wrapper .collapse.show a,
    #jtl-nav-wrapper .collapsing a {
        color: var(--bk-ink);
    }
    #jtl-nav-wrapper .navbar-collapse a:hover,
    #jtl-nav-wrapper .nav-panel a:hover,
    .submenu a:hover,
    .offcanvas a:hover {
        color: var(--bk-accent);
        opacity: 1;
    }

    /* Trennlinien im Menü */
    #jtl-nav-wrapper .navbar-collapse .nav-link,
    .nav-panel .nav-link {
        border-bottom: 1px solid var(--bk-line);
    }

    /* Der weiße Unterstrich gehört nur in die Desktop-Navigation */
    #jtl-nav-wrapper .navbar-collapse .nav-link::after,
    .nav-panel .nav-link::after,
    .offcanvas .nav-link::after {
        display: none;
    }

    /* Artikelzähler im Menü: schlichte graue Zahl statt Speed-Cut.
       Der Speed-Cut ist der Produktkachel vorbehalten. */
    #jtl-nav-wrapper .badge,
    .nav-panel .badge,
    .navbar-collapse .badge,
    .submenu .badge,
    .offcanvas .badge {
        clip-path: none;
        border-radius: 2px;
        background-color: var(--bk-surface);
        color: var(--bk-ink-45);
        font-family: var(--bk-font-body);
        font-weight: 400;
        font-size: 0.75rem;
        letter-spacing: 0;
        padding: 0.15rem 0.45rem;
    }

    /* Ausnahme: Der Warenkorb-Zähler bleibt dunkel gefüllt */
    #jtl-nav-wrapper .fa-sup,
    #jtl-nav-wrapper .badge-circle {
        clip-path: none;
        border-radius: 50%;
        background-color: var(--bk-ink);
        color: var(--bk-paper);
        font-family: var(--bk-font-body);
        font-weight: 700;
    }

}


/* =========================================================================
   16  JTL-HINWEIS IM FOOTER AUSBLENDEN

   Die JTL-Shop-Lizenz verlangt einen Hinweis auf das verwendete
   Shopsystem entweder in der Fußzeile ODER auf der Impressum-Seite.
   Der Hinweis steht im Impressum, daher ist das Ausblenden hier
   zulässig. Ohne Eintrag im Impressum wäre es ein Lizenzverstoß.
   ========================================================================= */

#system-credits {
    display: none;
}

/* =========================================================================
   17  ARTIKELSTICKER (RIBBONS)

   NOVA zeichnet die Sticker auf den Produktbildern als durchnummerierte
   Ribbons aus. Die Zuordnung ist fest und in der JTL-Doku dokumentiert:

     ribbon-1  Bestseller       ribbon-6  Top bewertet
     ribbon-2  Sale %           ribbon-7  Ausverkauft
     ribbon-3  Neu              ribbon-8  Auf Lager
     ribbon-4  Top              ribbon-9  Vorbestellen
     ribbon-5  Bald verfügbar

   Zwei Anpassungen:
   a) "Auf Lager" (ribbon-8) wird ausgeblendet. Der Lieferstatus steht
      ohnehin unter dem Preis, der Sticker ist doppelt gemoppelt und
      verstellt das Bild.
   b) Der Sale-Sticker (ribbon-2) läuft in Markenrot mit weißer Schrift
      statt im NOVA-Grün.

   Die Faltkante der Ribbons entsteht über ::before/::after mit
   border-color. Je nach Ausrichtung greift mal die rechte, mal die
   linke Kante – deshalb sind hier beide gesetzt.
   ========================================================================= */

/* a) "Auf Lager" ausblenden – Liste, Slider, Detailseite */
.ribbon-8,
.ribbon.ribbon-8,
.productbox-ribbon.ribbon-8 {
    display: none !important;
}

/* b) Sale-Sticker in Markenrot */
.ribbon-2,
.ribbon.ribbon-2,
.productbox-ribbon.ribbon-2 {
    background-color: var(--bk-accent) !important;
    color: var(--bk-paper) !important;
}
.ribbon-2 a,
.ribbon-2 span {
    color: var(--bk-paper) !important;
}

/* Faltkante des Sale-Ribbons nachziehen */
.ribbon-2::before,
.ribbon-2::after {
    border-right-color: var(--bk-accent-dark) !important;
    border-left-color:  var(--bk-accent-dark) !important;
    border-top-color:   var(--bk-accent-dark) !important;
}


/* =========================================================================
   18  VARIATIONSAUSWAHL

   Der Hinweis "Momentan nicht verfügbar" wird von NOVA als .badge
   ausgegeben. Damit erbt er den Speed-Cut aus Abschnitt 10 – auf einem
   ganzen Satz Text wird das viel zu wuchtig und die Zeilen laufen
   ineinander.

   Hier wird der Hinweis auf reine Typografie zurückgebaut: kein Kasten,
   keine Versalien, kein Anschnitt. Nur roter Text, in derselben Zeile
   wie das Größenkürzel.

   Damit die Hinweise sauber untereinander stehen und nicht mit der
   Länge des Kürzels mitwandern (S, XL, 3XL sind unterschiedlich breit),
   sitzt der Hinweis absolut positioniert in einer festen Spalte bei
   5rem. Das Größenkürzel bleibt im Textfluss.
   ========================================================================= */

.variations .dropdown-item,
.variation .dropdown-item,
#variations .dropdown-item,
.variation-selectbox .dropdown-item {
    position: relative;
    display: block;
    white-space: normal;
    line-height: 1.3;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.variations .badge,
.variations .badge-danger,
.variation .badge,
.js-variation .badge,
#variations .badge,
.product-variations .badge,
.variation-selectbox .badge,
.dropdown-menu .badge-danger {
    position: absolute;
    left: 5rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: none !important;
    background-color: transparent !important;
    color: var(--bk-accent) !important;
    font-family: var(--bk-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
    white-space: nowrap;
}

/* Nicht wählbare Variationen etwas zurücknehmen */
.variations .dropdown-item.disabled,
.variations .dropdown-item:disabled,
#variations .dropdown-item.disabled {
    opacity: 1;
    color: var(--bk-ink-70);
}