/*
 * OnvisTheme: Gestaltung der Startseite 2026
 * ===========================================
 *
 * Diese Datei gestaltet ausschließlich redaktionell vergebene Onvis-Klassen.
 * Sie verändert weder Funktionen des Shops noch interne Komponenten, Dialoge
 * oder Zustände. Dadurch bleibt die Gestaltung auch bei Aktualisierungen des
 * Eltern-Themes nachvollziehbar und sicher begrenzt.
 *
 * Wichtig für die Pflege:
 * - Die Klassen werden im jeweiligen Standardportlet zusätzlich eingetragen.
 * - Inhalte, Bilder, Überschriften und Links werden weiterhin dort gepflegt.
 * - Neue Regeln müssen immer mit einer der vier Onvis-Klassen beginnen.
 */

/* --------------------------------------------------------------------------
 * Design-Tokens
 * --------------------------------------------------------------------------
 * Diese verbindlichen Werte bilden das gemeinsame Erscheinungsbild des Shops.
 * Logo-Grün dient als Akzent; Graphit trägt Navigation und starke Kontraste.
 */
:root {
    --onvis-color-brand: #60c838;
    --onvis-color-brand-strong: #2f7d32;
    --onvis-color-graphite: #202722;
    --onvis-color-ink: #26302a;
    --onvis-color-muted: #66716a;
    --onvis-color-white: #fff;
    --onvis-color-surface: #f5f7f5;
    --onvis-color-border: #dce3de;
    --onvis-shadow-soft: 0 8px 24px rgba(32, 39, 34, 0.08);
    --onvis-radius: 6px;
    --onvis-transition: 180ms ease;
}

/* --------------------------------------------------------------------------
 * Topbar
 * --------------------------------------------------------------------------
 * Die schmale Serviceleiste hebt sich ruhig vom weißen Kopfbereich ab. Die
 * grüne Trennlinie stellt den Bezug zur Marke her, ohne den Inhalt zu belasten.
 */
#header-top-bar,
#jtl-nav-wrapper,
#jtl-nav-wrapper .hide-navbar {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
}

#header-top-bar {
    border-bottom: 1px solid var(--onvis-color-border);
}

#header-top-bar a:not(.dropdown-item):not(.btn) {
    color: var(--onvis-color-ink);
    text-decoration-color: transparent;
    text-underline-offset: 0.18em;
    transition:
        color var(--onvis-transition),
        text-decoration-color var(--onvis-transition);
}

#header-top-bar a:not(.dropdown-item):not(.btn):hover,
#header-top-bar a:not(.dropdown-item):not(.btn):focus-visible {
    color: var(--onvis-color-brand);
    text-decoration-color: currentColor;
}

#header-top-bar a:not(.dropdown-item):not(.btn):focus-visible {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Header und Suche
 * --------------------------------------------------------------------------
 * Der eigentliche Kopfbereich bleibt bewusst weiß. Eine feine Kontur und ein
 * flacher Schatten trennen ihn vom Seiteninhalt, ohne das Logo zu verändern.
 */
header {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border-bottom: 1px solid var(--onvis-color-border);
    box-shadow: 0 4px 14px rgba(23, 35, 27, 0.07);
}

header .search-wrapper {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
}

header .form-control {
    min-height: 46px;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius) 0 0 var(--onvis-radius);
    box-shadow: none;
    transition:
        border-color var(--onvis-transition),
        box-shadow var(--onvis-transition);
}

header .form-control::placeholder {
    color: var(--onvis-color-muted);
    opacity: 1;
}

header .form-control:focus {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.22);
    outline: 0;
}

header .input-group-append .btn-secondary {
    min-width: 52px;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border-color: var(--onvis-color-brand-strong);
}

/* Die spezifischen Zustände bleiben trotz der NOVA-Buttonregeln gut erkennbar. */
header .input-group-append .btn-secondary:hover {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
    border-color: var(--onvis-color-graphite);
}

header .input-group-append .btn-secondary:focus,
header .input-group-append .btn-secondary:focus-visible {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.22);
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Hauptnavigation und Dropdown-Menüs
 * --------------------------------------------------------------------------
 * Der Kopfbereich bleibt weiß. Auf großen Bildschirmen trägt nur die eigentliche
 * Kategorienavigation Graphit; Logo-Grün kennzeichnet aktive Zustände. Das
 * mobile Offcanvas-Menü bleibt weiß und verwendet bewusst dunkle Schrift.
 */
#jtl-nav-wrapper { background-color: var(--onvis-color-white);
    border-bottom: 1px solid var(--onvis-color-border);
}

#jtl-nav-wrapper .nav-link:not(.btn-primary) {
    color: var(--onvis-color-ink);
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition:
        color var(--onvis-transition),
        background-color var(--onvis-transition),
        text-decoration-color var(--onvis-transition);
}

#jtl-nav-wrapper .nav-link:not(.btn-primary):hover,
#jtl-nav-wrapper .nav-link:not(.btn-primary):focus-visible,
#jtl-nav-wrapper .active > .nav-link:not(.btn-primary),
#jtl-nav-wrapper .nav-link:not(.btn-primary).active {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
    text-decoration-color: var(--onvis-color-brand);
}

#jtl-nav-wrapper .nav-link:not(.btn-primary):focus-visible {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: -3px;
}

#jtl-nav-wrapper .dropdown-menu {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: 8px;
    box-shadow: var(--onvis-shadow-soft);
}

#jtl-nav-wrapper .dropdown-menu .dropdown-item:not(.btn-primary),
#jtl-nav-wrapper .dropdown-menu .nav-link:not(.btn-primary) {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
}

#jtl-nav-wrapper .dropdown-menu .dropdown-item:not(.btn-primary):hover,
#jtl-nav-wrapper .dropdown-menu .dropdown-item:not(.btn-primary):focus-visible,
#jtl-nav-wrapper .dropdown-menu .active > .dropdown-item:not(.btn-primary),
#jtl-nav-wrapper .dropdown-menu .dropdown-item:not(.btn-primary).active,
#jtl-nav-wrapper .dropdown-menu .nav-link:not(.btn-primary):hover,
#jtl-nav-wrapper .dropdown-menu .nav-link:not(.btn-primary):focus-visible,
#jtl-nav-wrapper .dropdown-menu .active > .nav-link:not(.btn-primary),
#jtl-nav-wrapper .dropdown-menu .nav-link:not(.btn-primary).active {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
}

#jtl-nav-wrapper .dropdown-menu .dropdown-item:not(.btn-primary):focus-visible,
#jtl-nav-wrapper .dropdown-menu .nav-link:not(.btn-primary):focus-visible {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
 * Shop-Navigation mit Konto, Merkzettel und Warenkorb
 * --------------------------------------------------------------------------
 * Links und Bedienelemente erhalten ausschließlich Farb- und Fokuszustände.
 * Abmessungen oder die technische Navigation werden dabei nicht verändert.
 */
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:not(.btn-primary),
#jtl-nav-wrapper #shop-nav > .nav-item > button:not(.btn-primary):not(:disabled):not(.disabled) {
    color: var(--onvis-color-ink);
    transition:
        color var(--onvis-transition),
        background-color var(--onvis-transition);
}

#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:not(.btn-primary):hover,
#jtl-nav-wrapper #shop-nav > .nav-item > button:not(.btn-primary):not(:disabled):not(.disabled):hover {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
}

#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:not(.btn-primary):focus-visible,
#jtl-nav-wrapper #shop-nav > .nav-item > button:not(.btn-primary):not(:disabled):not(.disabled):focus-visible {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: -3px;
}

/*
 * Die einzeilige NOVA-Kopfzeile besteht aus zwei getrennten Containern. Nur der
 * zweite Container enthält die Kategorien und erhält den Graphit-Hintergrund.
 * `max-width: none` zieht den Farbbalken bis an beide Fensterränder, ohne die
 * Smarty-Struktur oder die Funktion des Menüs zu verändern.
 */
@media (min-width: 992px) {
    #jtl-nav-wrapper #mainNavigation,
    #jtl-nav-wrapper .hide-navbar + .container,
    #jtl-nav-wrapper .hide-navbar + .container-fluid {
        color: var(--onvis-color-white);
        max-width: none;
        background-color: var(--onvis-color-graphite);
    }

    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link {
        color: var(--onvis-color-white);
        background-color: transparent;
        font-weight: 600;
    }

    /* NOVA reserviert diesen absolut positionierten Indikator bereits im Link. */
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link::before {
        border-color: var(--onvis-color-brand);
    }

    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item:hover > .nav-link,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link:focus-visible,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .active > .nav-link,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .show > .nav-link {
        color: var(--onvis-color-white);
        background-color: rgba(255, 255, 255, 0.08);
    }

    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link:focus-visible {
        outline-color: var(--onvis-color-white);
    }

    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .nav-item > .nav-link:focus-visible::before,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .navbar-nav > .show > .nav-link::before {
        width: 100%;
    }

    /*
     * Das NOVA-Mega-Menü verteilt wenige Unterkategorien standardmäßig in
     * starren Bootstrap-Spalten. Das führte zu übergroßen Weißflächen, sehr
     * großen Platzhalterbildern und einem zusätzlich schwebenden dritten
     * Menülevel. Das folgende Raster nutzt nur die vorhandene Menüstruktur:
     * Oberkategorien werden kompakte Module, weitere Ebenen stehen lesbar
     * darunter und überdecken weder Shopinhalt noch benachbarte Kategorien.
     */
    #jtl-nav-wrapper #mainNavigation .dropdown-full > .dropdown-menu > .dropdown-body {
        padding-block: 1.5rem;
    }

    #jtl-nav-wrapper #mainNavigation .subcategory-wrapper > .row.nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: start;
        gap: 1rem;
        margin: 0;
    }

    #jtl-nav-wrapper #mainNavigation .subcategory-wrapper > .row.nav > .nav-item {
        display: block;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 1rem;
        background-color: var(--onvis-color-white);
        border: 1px solid var(--onvis-color-border);
        border-radius: var(--onvis-radius);
    }

    #jtl-nav-wrapper #mainNavigation .submenu-headline {
        display: grid;
        grid-template-rows: 96px auto;
        gap: 0.75rem;
        padding: 0;
        color: var(--onvis-color-ink);
        font-weight: 700;
        text-decoration: none;
    }

    #jtl-nav-wrapper #mainNavigation .submenu-headline-image {
        display: block;
        width: 100%;
        max-width: 140px;
        height: 96px;
        margin-inline: auto;
        object-fit: contain;
        background-color: var(--onvis-color-surface);
        border-radius: 5px;
    }

    #jtl-nav-wrapper #mainNavigation .submenu-headline > .text-truncate {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown.dropdown-menu {
        position: static !important;
        display: block !important;
        float: none;
        min-width: 0;
        width: 100%;
        margin: 0.75rem 0 0;
        padding: 0.75rem 0 0;
        color: var(--onvis-color-ink);
        background: transparent;
        border: 0;
        border-top: 1px solid var(--onvis-color-border);
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
    }

    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown > .nav {
        display: grid;
        gap: 0.15rem;
    }

    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown .nav-link {
        min-height: 36px;
        padding: 0.4rem 0.5rem;
        color: var(--onvis-color-muted);
        background-color: transparent;
        border-radius: 4px;
        white-space: normal;
    }

    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown .nav-link:hover,
    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown .nav-link:focus-visible {
        color: var(--onvis-color-brand-strong);
        background-color: var(--onvis-color-surface);
    }
}

/*
 * NOVA zeigt die Kategorien unterhalb des Desktop-Breakpoints als seitliches
 * Menü. Alle Texte, Zurück-Links und Menüknöpfe erhalten hier ausdrücklich
 * dunkle Farben, damit keine weiße Schrift auf weißem Grund entstehen kann.
 */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper #mainNavigation { background-color: var(--onvis-color-white); }

    #jtl-nav-wrapper,
    #jtl-nav-wrapper #mainNavigation,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-header,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu {
        color: var(--onvis-color-ink);
        background-color: var(--onvis-color-white);
    }

    #jtl-nav-wrapper #mainNavigation .nav-link:not(.btn-primary),
    #jtl-nav-wrapper #mainNavigation .dropdown-item:not(.btn-primary),
    #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title,
    #jtl-nav-wrapper #mainNavigation .navbar-toggler {
        min-height: 44px;
        color: var(--onvis-color-ink);
    }

    #jtl-nav-wrapper #mainNavigation .nav-link:not(.btn-primary):hover,
    #jtl-nav-wrapper #mainNavigation .nav-link:not(.btn-primary):focus-visible,
    #jtl-nav-wrapper #mainNavigation .dropdown-item:not(.btn-primary):hover,
    #jtl-nav-wrapper #mainNavigation .dropdown-item:not(.btn-primary):focus-visible,
    #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title:hover,
    #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title:focus-visible,
    #jtl-nav-wrapper #mainNavigation .active > .nav-link:not(.btn-primary),
    #jtl-nav-wrapper #mainNavigation .active > .dropdown-item:not(.btn-primary) {
        color: var(--onvis-color-brand-strong);
        background-color: var(--onvis-color-surface);
    }

    #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title:focus-visible {
        outline: 2px solid var(--onvis-color-brand-strong);
        outline-offset: 2px;
    }

    /* Der Menüschalter erhält unabhängig von den NOVA-Zuständen einen klaren Fokus. */
    #jtl-nav-wrapper #mainNavigation .navbar-toggler:focus-visible {
        outline: 2px solid var(--onvis-color-brand-strong);
        outline-offset: 2px;
    }

    #jtl-nav-wrapper #mainNavigation .nav-mobile-header-hr {
        border-color: var(--onvis-color-border);
    }
}

/* --------------------------------------------------------------------------
 * Footer und Copyright
 * --------------------------------------------------------------------------
 * Der Footer nutzt die helle Surface-Farbe und großzügige Innenabstände. Der
 * abschließende Copyright-Bereich bildet einen kontrastreichen Abschluss.
 */
#footer {
    padding-block: 2rem;
    padding-bottom: 0;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-surface);
    border-top: 1px solid var(--onvis-color-border);
}

#footer a:not(.btn) {
    color: var(--onvis-color-brand-strong);
    text-decoration-color: transparent;
    text-underline-offset: 0.18em;
    transition:
        color var(--onvis-transition),
        text-decoration-color var(--onvis-transition);
}

#footer a:not(.btn):hover,
#footer a:not(.btn):focus-visible {
    color: var(--onvis-color-brand-strong);
    text-decoration-color: var(--onvis-color-brand);
}

#footer a:not(.btn):focus-visible {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: 2px;
}

#copyright {
    padding-block: 1rem;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
}

#copyright a:not(.btn) {
    color: var(--onvis-color-white);
    text-decoration-color: var(--onvis-color-brand);
    text-underline-offset: 0.18em;
}

#copyright a:not(.btn):hover,
#copyright a:not(.btn):focus-visible {
    color: var(--onvis-color-white);
    text-decoration-color: currentColor;
}

#copyright a:not(.btn):focus-visible {
    outline: 2px solid var(--onvis-color-white);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Einheitliche Onvis-Aktionsbuttons
 * --------------------------------------------------------------------------
 * Normale Kauf-, Weiter-, Speichern- und Auswahlaktionen verwenden dieselbe
 * grüne Onvis-Fläche wie die Kategorie-CTAs. Kritische, warnende, reine Link-
 * und deaktivierte Buttons bleiben semantisch bei NOVA und werden nicht grün.
 */
:is(
    .btn-primary,
    .btn-success,
    .btn-secondary,
    .btn-info,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success
):not(:disabled):not(.disabled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    min-height: 42px;
    padding: 0.65rem 1rem;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border: 1px solid var(--onvis-color-brand-strong);
    border-radius: var(--onvis-radius);
    box-shadow: none;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition:
        color var(--onvis-transition),
        background-color var(--onvis-transition),
        border-color var(--onvis-transition),
        box-shadow var(--onvis-transition);
}

:is(
    .btn-primary,
    .btn-success,
    .btn-secondary,
    .btn-info,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success
):not(:disabled):not(.disabled):hover {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
    border-color: var(--onvis-color-graphite);
    text-decoration: none;
}

:is(
    .btn-primary,
    .btn-success,
    .btn-secondary,
    .btn-info,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success
):not(:disabled):not(.disabled):focus-visible {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.22);
    outline: 2px solid var(--onvis-color-white);
    outline-offset: -4px;
}

/*
 * Der Suchbutton schließt rechts an das Eingabefeld an. Diese gezielte Regel
 * folgt auf die allgemeinen Buttonregeln, damit die gemeinsame Innenkante
 * glatt und ausschließlich die beiden äußeren rechten Ecken gerundet bleiben.
 */
.search-wrapper .input-group-append > .btn-secondary {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--onvis-radius) !important;
    border-bottom-right-radius: var(--onvis-radius) !important;
}

/*
 * Der Schnellkauf im Footer verwendet dieselbe gekoppelte Eingabegruppe wie
 * die Suche. Auch hier bleibt die Innenkante glatt und nur der rechte äußere
 * Abschluss des Warenkorbbuttons wird gerundet.
 */
#footer .box-direct-purchase .input-group-append .btn-secondary:not(:disabled):not(.disabled) {
    border-radius: 0 var(--onvis-radius) var(--onvis-radius) 0;
}

/*
 * Diese gemeinsame Rückfallebene erfasst Aktionsflächen, für die NOVA je nach
 * Inhalt Links, echte Buttons oder Elemente mit Button-Rolle ausgeben kann.
 * Spezifische Fokusfarben auf Graphit- und Primärflächen bleiben davon unberührt.
 */
#header-top-bar .dropdown-item:focus-visible,
#header-top-bar .btn:not(.btn-primary):focus-visible,
#header-top-bar button:not(.btn-primary):focus-visible,
#footer .btn:focus-visible,
#footer button:focus-visible,
.onvis-home-offers a:focus-visible,
.onvis-home-offers button:focus-visible,
.onvis-home-offers [role="button"]:focus-visible,
.onvis-home-news a:focus-visible,
.onvis-home-news button:focus-visible,
.onvis-home-news [role="button"]:focus-visible,
.content-cats-small .sub-categories a:focus-visible,
.content-cats-small .sub-categories button:focus-visible,
.content-cats-small .sub-categories [role="button"]:focus-visible,
.productbox a:focus-visible,
.productbox button:focus-visible,
.productbox [role="button"]:focus-visible,
#product-offer a:focus-visible,
#product-offer button:focus-visible,
#product-offer [role="button"]:focus-visible {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: 2px;
}

/* Im Graphitabschluss ist Weiß deutlich kontrastreicher als der helle Fallback. */
#copyright .btn:focus-visible,
#copyright button:focus-visible {
    outline: 2px solid var(--onvis-color-white);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Startseiten-Grid und Kategorie-Kacheln
 * --------------------------------------------------------------------------
 * Das Onvis-Raster ergänzt das Standard-Grid-Portlet und ersetzt ausschließlich
 * dessen direkte Bootstrap-Spalten. Dadurch können auch Spalten wie `col-9`
 * keine schmale Kachel oder eine ungenutzte Fläche am rechten Rand erzwingen.
 */
.onvis-home-grid.row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    margin-block: 2rem 3rem;
    margin-inline: 0;
    padding: 1rem;
    background-color: var(--onvis-color-surface);
}

.onvis-home-grid.row > [class*="col-"] {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0;
}

/*
 * Die Klasse sitzt auf einem Standard-Container-Portlet. Im Editor wird nur
 * dessen bekannte Inhaltsfläche gewählt. Im Frontend greift die zweite Regel
 * ausschließlich, wenn diese Editorfläche fehlt. Toolbars und Bedienfelder
 * bleiben dadurch auch als zusätzliche direkte Kinder vollständig unberührt.
 */
.onvis-category-tile {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
}

.onvis-category-tile > [class~="opc-area"],
.onvis-category-tile:not(:has(> [class~="opc-area"])) > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 1rem;
}

.onvis-category-tile::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17, 24, 19, 0.08) 20%,
        rgba(17, 24, 19, 0.82) 100%
    );
    pointer-events: none;
}

.onvis-category-tile h1,
.onvis-category-tile h2,
.onvis-category-tile h3,
.onvis-category-tile h4,
.onvis-category-tile h5,
.onvis-category-tile h6,
.onvis-category-tile p {
    position: relative;
    z-index: 2;
}

.onvis-category-tile a {
    position: relative;
    z-index: 2;
    color: var(--onvis-color-white);
    font-weight: 700;
    text-decoration-color: var(--onvis-color-brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.onvis-category-tile a:hover {
    color: var(--onvis-color-white);
    text-decoration-color: currentColor;
}

.onvis-category-tile a:focus-visible,
.onvis-category-tile button:focus-visible,
.onvis-category-tile [role="button"]:focus-visible {
    color: var(--onvis-color-white);
    outline: 2px solid var(--onvis-color-white);
    outline-offset: -3px;
}

@media (max-width: 991.98px) {
    .onvis-home-grid.row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .onvis-home-grid.row {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
 * Redaktionelle OPC-Bereiche der Startseite
 * --------------------------------------------------------------------------
 * Alle Inhalte bleiben normale OPC-Portlets. Diese Klassen regeln nur den
 * visuellen Rhythmus und berühren weder Kategorie-Kacheln noch Produktstreams
 * oder News-Ausgabe.
 */
.onvis-home-editorial {
    margin-block: clamp(3rem, 7vw, 6rem);
    padding-block: clamp(1.5rem, 4vw, 3rem);
    color: var(--onvis-color-ink);
    border-top: 1px solid var(--onvis-color-border);
}

.onvis-home-editorial > [class~="opc-area"] {
    width: min(100%, 1320px);
    margin-inline: auto;
}

.onvis-home-editorial__grid.row {
    align-items: center;
    row-gap: 2rem;
    margin-inline: -1rem;
}

.onvis-home-editorial__grid.row > [class*="col-"] {
    min-width: 0;
    padding-inline: 1rem;
}

.onvis-home-editorial--reverse .onvis-home-editorial__grid.row {
    flex-direction: row-reverse;
}

.onvis-home-editorial__heading {
    max-width: 650px;
    margin: 0 0 1rem;
    color: var(--onvis-color-ink);
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    line-height: 1.2;
}

.onvis-home-editorial__text {
    max-width: 650px;
    color: var(--onvis-color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.onvis-home-editorial__text p {
    margin-bottom: 1rem;
}

.onvis-home-editorial__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--onvis-color-surface);
    border-radius: var(--onvis-radius);
}

.onvis-home-editorial__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.onvis-home-editorial__image:hover img,
.onvis-home-editorial__image:focus-within img {
    transform: scale(1.025);
}

.onvis-home-editorial__image:focus-within {
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: 3px;
}

.onvis-home-editorial__button {
    margin-top: 1.25rem;
}

.onvis-home-editorial__button .btn-success {
    min-height: 44px;
    padding: 0.75rem 1.15rem;
    font-weight: 700;
}

.onvis-home-editorial--text-only {
    padding-inline: clamp(1rem, 5vw, 4rem);
    text-align: center;
}

.onvis-home-editorial--text-only :is(.onvis-home-editorial__heading, .onvis-home-editorial__text) {
    margin-inline: auto;
}

.onvis-home-editorial--text-only .onvis-home-editorial__button {
    display: flex;
    justify-content: center;
}

.onvis-home-editorial-final {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
    border-top: 3px solid var(--onvis-color-brand);
}

.onvis-home-editorial-final :is(.onvis-home-editorial__heading, .onvis-home-editorial__text) {
    color: var(--onvis-color-white);
}

@media (max-width: 767.98px) {
    .onvis-home-editorial {
        margin-block: 2.5rem;
        padding-block: 1.5rem;
    }

    .onvis-home-editorial__grid.row {
        flex-direction: column;
    }

    .onvis-home-editorial--reverse .onvis-home-editorial__grid.row {
        flex-direction: column;
    }

    .onvis-home-editorial__heading {
        font-size: 1.55rem;
    }

    .onvis-home-editorial__text {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onvis-home-editorial__image img {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
 * Angebote und News
 * --------------------------------------------------------------------------
 * Beide Inhaltsbereiche werden durch eine ruhige Trennlinie gegliedert. Die
 * Abstände schaffen einen klaren Rhythmus, ohne weitere Karten zu verschachteln.
 */
.onvis-home-offers,
.onvis-home-news {
    margin-block: 3rem;
    padding-block: 2rem;
    border-top: 1px solid var(--onvis-color-border);
}

.onvis-home-offers > * + *,
.onvis-home-news > * + * {
    margin-top: 1.5rem;
}

/*
 * Bestehender OPC-Entwurf
 * -----------------------
 * Die Überschriften der vier vorhandenen Standardportlets besitzen bereits
 * die redaktionelle Klasse `kat-title`. Diese Rückfallebene macht das neue
 * Raster deshalb sofort sichtbar, ohne Texte, Bilder oder Links fest in das
 * Theme einzubauen. Sobald die neuen Onvis-Klassen im OPC gesetzt sind,
 * liefern die weiter oben stehenden Regeln dasselbe Ergebnis.
 */
.row:has(> [class*="col-"] .kat-title) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    margin-inline: 0;
    padding: 1rem;
    background-color: var(--onvis-color-surface);
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] {
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0;
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]) {
    position: relative;
    isolation: isolate;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--onvis-radius);
    background-position: center;
    background-size: cover;
    box-shadow: var(--onvis-shadow-soft);
    transition: box-shadow var(--onvis-transition);
}

/*
 * Die Bilddatei liegt im OPC als Inline-Hintergrund auf `.opc-Container`.
 * Eine eigene Pseudoebene übernimmt diesen Hintergrund, damit ausschließlich
 * das Bild zoomen kann. Überschrift und Schaltfläche bleiben dadurch scharf.
 */
.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: inherit;
    background-position: inherit;
    background-size: cover;
    transform: scale(1);
    transition: transform 320ms ease;
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"])::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17, 24, 19, 0.02) 30%,
        rgba(17, 24, 19, 0.88) 100%
    );
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]):hover,
.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]):focus-within {
    box-shadow: 0 14px 30px rgba(32, 39, 34, 0.16);
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]:hover::before,
.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]:focus-within::before {
    transform: scale(1.05);
}

.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]) > [class~="opc-area"],
.row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]):not(:has(> [class~="opc-area"])) > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    min-height: 100%;
    padding: 1.25rem;
}

.row:has(> [class*="col-"] .kat-title) .kat-title {
    margin: 0 0 0.75rem;
    color: var(--onvis-color-white);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left !important;
    text-shadow: 0 2px 12px rgba(17, 24, 19, 0.72);
}

.row:has(> [class*="col-"] .kat-title) .btn-success {
    min-height: 42px;
    margin-bottom: 0 !important;
    padding: 0.65rem 1rem;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border-color: var(--onvis-color-brand-strong);
    border-radius: var(--onvis-radius);
    font-weight: 700;
}

/*
 * Die vorhandene Zieladresse des OPC-Buttons wird über die komplette
 * Kategoriefläche erweitert. Dadurch bleiben Linkziel und Inhalt weiterhin
 * im OPC pflegbar; es wird weder JavaScript noch ein zweiter Link benötigt.
 */
.row:has(> [class*="col-"] .kat-title) .kat-title ~ div > a.btn-success::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
}

/* NOVAs News-Ausgabe erhält eine klare redaktionelle Gliederung. */
.news-wrapper {
    margin-block: 3rem;
    padding-block: 2rem;
    border-top: 1px solid var(--onvis-color-border);
}

.news-wrapper .newsbox {
    padding: 1rem;
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
}

.product-wrapper.product-wrapper-news {
    display: flex;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    padding: 0.5rem;
}

.product-wrapper.product-wrapper-news .newsbox {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
}

.product-wrapper.product-wrapper-news .newsbox-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 15.5rem;
    padding: 1.25rem;
    gap: 0.9rem;
}

.product-wrapper.product-wrapper-news .newsbox-header {
    min-width: 0;
    overflow: hidden;
}

.product-wrapper.product-wrapper-news .newsbox-header .preview-image,
.product-wrapper.product-wrapper-news .newsbox-image {
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background-color: var(--onvis-color-surface);
}

.product-wrapper.product-wrapper-news .newsbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-wrapper.product-wrapper-news .newsbox-headline {
    display: -webkit-box;
    min-width: 0;
    margin-block: 0;
    overflow: hidden;
    color: var(--onvis-color-ink);
    font-weight: 800;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-wrapper.product-wrapper-news .newsbox-body p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--onvis-color-muted);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-wrapper.product-wrapper-news .newsbox-footer {
    margin-top: auto;
    padding: 0 1.25rem 1.25rem;
}

.product-wrapper.product-wrapper-news .newsbox-body .btn,
.product-wrapper.product-wrapper-news .newsbox-footer > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    align-self: flex-start;
    min-height: 42px;
    margin-top: auto;
    padding: 0.65rem 1rem;
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border: 1px solid var(--onvis-color-brand-strong);
    border-radius: var(--onvis-radius);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        color var(--onvis-transition),
        background-color var(--onvis-transition),
        border-color var(--onvis-transition),
        box-shadow var(--onvis-transition);
}

.product-wrapper.product-wrapper-news .newsbox-body .btn:hover,
.product-wrapper.product-wrapper-news .newsbox-footer > a:hover {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-graphite);
    border-color: var(--onvis-color-graphite);
    text-decoration: none;
}

.product-wrapper.product-wrapper-news .newsbox-body .btn:focus-visible,
.product-wrapper.product-wrapper-news .newsbox-footer > a:focus-visible {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.22);
    outline: 2px solid var(--onvis-color-white);
    outline-offset: -4px;
}

/*
 * Kategorie-SEO im OPC
 * --------------------
 * Bereits veröffentlichte Textportlets enthalten noch eine alte Begrenzung
 * auf 78 Zeichen. Der Selektor bleibt bewusst unabhängig von einem äußeren
 * JTL-Container, weil dieser OPC-Bereich vor der eigentlichen Seitennavigation
 * gerendert wird und damit nicht zuverlässig unter `#content` liegt.
 */
.onvis-category-seo.onvis-category-seo-top > .onvis-category-seo__content {
    width: 100%;
    max-width: none;
}

/* --------------------------------------------------------------------------
 * Kategorie-Unterkacheln
 * --------------------------------------------------------------------------
 * Die von NOVA ausgegebenen Unterkategorien erhalten eine ruhige, einheitliche
 * Oberfläche. Nur der dafür vorgesehene Bildbereich begrenzt den sanften Zoom;
 * Inhalte und Bedienelemente der Kachel bleiben vollständig erreichbar.
 */
.content-cats-small .sub-categories {
    height: 100%;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
}

.content-cats-small .sub-categories .subcategories-image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    background-color: var(--onvis-color-surface);
    border-radius: 7px 7px 0 0;
}

.content-cats-small .sub-categories .caption {
    height: 100%;
    padding: 0;
}

.content-cats-small .sub-categories > div {
    height: 100%;
}

.content-cats-small .sub-categories .caption a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    height: 100%;
    padding: 0.7rem 1rem;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: color var(--onvis-transition), border-color var(--onvis-transition), background-color var(--onvis-transition);
}

.content-cats-small .sub-categories .caption a:hover,
.content-cats-small .sub-categories .caption a:focus-visible {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
    border-color: var(--onvis-color-brand-strong);
}

.content-cats-small .sub-categories .subcategories-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--onvis-transition);
}

.content-cats-small .sub-categories:hover .subcategories-image img,
.content-cats-small .sub-categories:focus-within .subcategories-image img {
    transform: scale(1.025);
}

.content-cats-small .sub-categories a {
    color: var(--onvis-color-ink);
    font-weight: 700;
    line-height: 1.45;
    text-decoration-color: transparent;
    text-underline-offset: 0.18em;
    transition:
        color var(--onvis-transition),
        text-decoration-color var(--onvis-transition);
}

.content-cats-small .sub-categories a:hover,
.content-cats-small .sub-categories a:focus-visible {
    color: var(--onvis-color-brand-strong);
    text-decoration-color: var(--onvis-color-brand);
}

/*
 * Kategorien ohne eigenes Bild
 * ----------------------------
 * NOVA setzt für fehlende Kategoriebilder `keinBild.gif` ein. Dadurch wurden
 * auf „Info- & Werbeaufsteller“ große, leere Quadrate erzeugt. Nur in diesem
 * eindeutig erkennbaren Fall wird der Bildplatz entfernt und die vorhandene
 * Unterkategorie-Liste als kompakte, bedienbare Navigation dargestellt.
 */
.content-cats-small:has(.subcategories-image img[src*="keinBild"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    width: 100%;
    margin-inline: 0;
}

.content-cats-small:has(.subcategories-image img[src*="keinBild"]) > [class*="col-"] {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0;
}

.content-cats-small .sub-categories .subcategories-image:has(img[src*="keinBild"]) {
    display: none !important;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) {
    height: auto;
    min-height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) > div,
.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) .caption {
    height: auto;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) .caption a {
    justify-content: space-between;
    min-height: 52px;
    height: auto;
    box-shadow: var(--onvis-shadow-soft);
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) .caption a::after,
.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul a::after {
    content: "›";
    flex: 0 0 auto;
    margin-left: 0.75rem;
    color: var(--onvis-color-brand-strong);
    font-size: 1.25rem;
    line-height: 1;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) hr {
    display: none !important;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    list-style: none;
    background-color: var(--onvis-color-surface);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul li {
    min-width: 0;
    margin: 0;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.6rem 0.75rem;
    overflow-wrap: anywhere;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: 0 2px 8px rgba(32, 39, 34, 0.05);
    text-decoration: none;
}

.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul a:hover,
.content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul a:focus-visible {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-white);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 4px 12px rgba(32, 39, 34, 0.1);
}

@media (max-width: 991.98px) {
    .content-cats-small:has(.subcategories-image img[src*="keinBild"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .content-cats-small:has(.subcategories-image img[src*="keinBild"]),
    .content-cats-small .sub-categories:has(.subcategories-image img[src*="keinBild"]) ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Kategorien mit einer zweiten Unterkategorie-Ebene
 * -------------------------------------------------
 * NOVA setzt bei verzögert geladenen Platzhalterbildern nicht zuverlässig
 * `keinBild.gif` in das sichtbare `src`-Attribut. Eine vorhandene zweite
 * Navigationsebene ist dagegen eine stabile Strukturkennung. Die direkten
 * Unterkategorien erscheinen deshalb als kompakte Schaltflächen; ihre Kinder
 * werden in einer eigenen, über die Produktspalte laufenden Zeile dargestellt.
 */
.content-cats-small:has(.sub-categories ul) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    width: 100%;
    margin-inline: 0;
}

.content-cats-small:has(.sub-categories ul) > [class*="col-"] {
    display: contents;
}

.content-cats-small:has(.sub-categories ul) .sub-categories,
.content-cats-small:has(.sub-categories ul) .sub-categories > div {
    display: contents;
}

.content-cats-small:has(.sub-categories ul) .subcategories-image,
.content-cats-small:has(.sub-categories ul) .sub-categories > a:has(.subcategories-image),
.content-cats-small:has(.sub-categories ul) .sub-categories hr {
    display: none !important;
}

.content-cats-small:has(.sub-categories ul) .caption {
    height: auto;
    margin: 0;
}

.content-cats-small:has(.sub-categories ul) .caption a {
    justify-content: space-between;
    min-height: 52px;
    height: auto;
    box-shadow: var(--onvis-shadow-soft);
}

.content-cats-small:has(.sub-categories ul) .caption a::after,
.content-cats-small:has(.sub-categories ul) ul a::after {
    content: "›";
    flex: 0 0 auto;
    margin-left: 0.75rem;
    color: var(--onvis-color-brand-strong);
    font-size: 1.25rem;
    line-height: 1;
}

.content-cats-small:has(.sub-categories ul) ul {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-cats-small:has(.sub-categories ul) ul li {
    min-width: 0;
    margin: 0;
}

.content-cats-small:has(.sub-categories ul) ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    height: auto;
    padding: 0.7rem 1rem;
    overflow-wrap: anywhere;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
    font-weight: 700;
    text-decoration: none;
}

.content-cats-small:has(.sub-categories ul) ul a:hover,
.content-cats-small:has(.sub-categories ul) ul a:focus-visible {
    color: var(--onvis-color-brand-strong);
    background-color: var(--onvis-color-surface);
    border-color: var(--onvis-color-brand-strong);
}

@media (max-width: 991.98px) {
    .content-cats-small:has(.sub-categories ul),
    .content-cats-small:has(.sub-categories ul) ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .content-cats-small:has(.sub-categories ul),
    .content-cats-small:has(.sub-categories ul) ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
 * Oberfläche der linken Seitenleiste
 * --------------------------------------------------------------------------
 * Die vorhandene NOVA-Struktur bleibt unverändert. Kontur, Abstände und klare
 * Überschriften fassen die Inhalte lediglich optisch besser zusammen.
 */
#content-wrapper .sidepanel-left .box-normal {
    margin-bottom: 1.5rem;
    padding: 1rem;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
}

#content-wrapper .sidepanel-left .box-normal-link,
#content-wrapper .sidepanel-left .productlist-filter-headline {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--onvis-color-brand-strong);
    border-bottom: 1px solid var(--onvis-color-border);
    font-weight: 700;
}

/*
 * NOVA gibt der aktiven Kategorie und normalen Linkzuständen teilweise seine
 * gelbe Standard-Primärfarbe. Die engeren Selektoren halten alle Zustände in
 * der linken Shop-Navigation konsistent im Onvis-Grün.
 */
#content-wrapper .sidepanel-left .nav-panel > .nav > .active > .nav-link {
    color: var(--onvis-color-brand-strong);
    border-bottom-color: var(--onvis-color-brand);
}

#content-wrapper .sidepanel-left .nav-panel .nav-link:hover,
#content-wrapper .sidepanel-left .nav-panel .nav-link:focus-visible {
    color: var(--onvis-color-brand-strong);
}

#content-wrapper .sidepanel-left .nav-panel .nav-link:focus-visible {
    outline: 2px solid var(--onvis-color-brand);
    outline-offset: 2px;
}

/* Der Preisregler übernimmt dieselbe Markenfarbe wie Filter und Schaltflächen. */
#content-wrapper .sidepanel-left .box-filter-price .noUi-connect {
    background-color: var(--onvis-color-brand);
}

#content-wrapper .sidepanel-left .box-filter-price .noUi-handle {
    background-color: var(--onvis-color-brand);
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(96, 200, 56, 0.18);
}

#content-wrapper .sidepanel-left .box-filter-price .noUi-handle:hover,
#content-wrapper .sidepanel-left .box-filter-price .noUi-handle:focus,
#content-wrapper .sidepanel-left .box-filter-price .noUi-handle.noUi-active {
    background-color: var(--onvis-color-brand-strong);
}

#content-wrapper .sidepanel-left .form-control {
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border-color: var(--onvis-color-border);
    border-radius: 6px;
    transition:
        border-color var(--onvis-transition),
        box-shadow var(--onvis-transition);
}

#content-wrapper .sidepanel-left .form-control:focus {
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.22);
    outline: 0;
}

/* --------------------------------------------------------------------------
 * Slider-Navigation
 * --------------------------------------------------------------------------
 * NOVA verwendet im Hoverzustand standardmäßig Gelb. Normale Inhalts- und
 * Produktslider greifen stattdessen das Onvis-Grün auf. Thumbnail-Galerien
 * behalten ihre transparente, für die Bildauswahl optimierte Navigation.
 */
.carousel:not(.carousel-thumbnails) .slick-arrow:hover,
.carousel:not(.carousel-thumbnails) .slick-arrow:focus-visible,
.carousel:not(.carousel-thumbnails) .slick-arrow:active {
    color: var(--onvis-color-white);
    background-color: var(--onvis-color-brand-strong);
}

/* --------------------------------------------------------------------------
 * Produktkarten in Listen und Kategorien
 * --------------------------------------------------------------------------
 * Die Karte bleibt nach außen offen, damit NOVA-Schnellaktionen, Varianten und
 * Kennzeichnungen nicht abgeschnitten werden. Ausschließlich der Bildrahmen
 * begrenzt die dezente Vergrößerung des Produktbildes.
 */
.product-wrapper .productbox {
    height: 100%;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: none;
    transition:
        border-color var(--onvis-transition),
        box-shadow var(--onvis-transition),
        transform var(--onvis-transition);
}

.product-wrapper .productbox:hover,
.product-wrapper .productbox:focus-within {
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 10px 24px rgba(32, 39, 34, 0.12);
    transform: none;
}

/* NOVAs ausfahrende Hoverfläche darf benachbarte Karten nicht überdecken. */
@media (min-width: 768px) {
    .productbox.productbox-hover:hover,
    .productbox.productbox-hover:focus,
    .productbox.productbox-hover.focus {
        z-index: auto;
    }

    .productbox.productbox-hover:hover .productbox-inner::before,
    .productbox.productbox-hover:focus .productbox-inner::before,
    .productbox.productbox-hover.focus .productbox-inner::before {
        inset: 0;
        box-shadow: none;
    }

    .productbox.productbox-hover.productbox-column:hover .productbox-inner.pos-abs,
    .productbox.productbox-hover.productbox-column:focus .productbox-inner.pos-abs,
    .productbox.productbox-hover.productbox-column.focus .productbox-inner.pos-abs {
        position: relative;
        inset: auto;
    }

    .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
    .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
    .productbox.productbox-hover.focus .productbox-ribbon.ribbon {
        top: 0;
        left: 0;
    }
}

/* Startseiten-Streams besitzen in NOVA keinen .productbox-Wrapper. */
.product-wrapper.product-wrapper-product > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.8rem;
    color: var(--onvis-color-ink);
    background-color: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    text-decoration: none;
    transition: border-color var(--onvis-transition), box-shadow var(--onvis-transition);
}

.product-wrapper.product-wrapper-product > a:hover,
.product-wrapper.product-wrapper-product > a:focus-visible {
    border-color: var(--onvis-color-brand-strong);
    box-shadow: 0 10px 24px rgba(32, 39, 34, 0.12);
}

.product-wrapper.product-wrapper-product .item-slider-desc {
    margin-top: 0.75rem;
    color: var(--onvis-color-ink);
    font-weight: 700;
    line-height: 1.4;
}

.product-wrapper.product-wrapper-product .item-slider-price {
    margin-top: auto;
    padding-top: 0.75rem;
}

.product-wrapper.product-wrapper-product .productbox-price {
    color: var(--onvis-color-brand-strong);
    font-weight: 800;
}

@media (min-width: 992px) {
    header .search-wrapper.w-100-util {
        flex: 0 1 760px;
        width: min(100%, 760px) !important;
        max-width: 760px;
        margin-inline: auto;
    }
}

.productbox .productbox-inner {
    display: flex;
    flex-direction: column;
    position: relative !important;
    inset: auto !important;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0.875rem;
}

.productbox .productbox-title {
    display: -webkit-box;
    min-width: 0;
    min-height: 4.35em;
    max-height: 4.35em;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.productbox .productbox-image-wrapper,
.productbox .square-image {
    aspect-ratio: 1 / 1;
    background-color: var(--onvis-color-surface);
    border-radius: 7px 7px 0 0;
}

/* NOVAs Bildwechsel bleibt unverändert; Bedienelemente liegen sicher darüber. */
.productbox .productbox-ribbon.ribbon {
    z-index: 4;
}

.productbox > .productbox-quick-actions {
    z-index: 5;
}

.productbox .productbox-image-wrapper-inner,
.productbox .square-image > .inner {
    overflow: hidden;
    border-radius: inherit;
}

.productbox .productbox-image-wrapper-inner img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--onvis-transition);
}

.productbox .square-image > .inner img {
    transition: transform var(--onvis-transition);
}

/* Das erste Artikelbild bleibt im Ruhezustand immer sichtbar. */
.productbox .productbox-image-wrapper img.first,
.productbox .square-image img.first {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.productbox .productbox-image-wrapper img.second,
.productbox .square-image img.second {
    z-index: 2;
}

.productbox:hover .productbox-image-wrapper-inner img,
.productbox:focus-within .productbox-image-wrapper-inner img {
    transform: none;
}

.productbox:hover .square-image > .inner img,
.productbox:focus-within .square-image > .inner img {
    transform: translate(-50%, -50%);
}

.productbox .productbox-title,
.productbox .productbox-title a {
    color: var(--onvis-color-ink);
    font-weight: 700;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.productbox .productbox-title a:hover,
.productbox .productbox-title a:focus-visible {
    color: var(--onvis-color-brand-strong);
}

.productbox .productbox-price {
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--onvis-color-brand-strong);
    font-weight: 800;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
 * Artikeldetail: Produktkopf, Galerie und Kaufbereich
 * --------------------------------------------------------------------------
 * Der Produktkopf bleibt vollständig in NOVAs bestehender Struktur. Die
 * Regeln gestalten ausschließlich Abstände, Flächen und Größen; Galerie,
 * Varianten, Staffelpreise und Bestelllogik behalten ihre JTL-Funktionen.
 */
#product-offer {
    align-items: flex-start;
    margin-bottom: 2rem;
}

#product-offer > .product-gallery,
#product-offer > .product-info {
    min-width: 0;
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) {
    padding: 1rem;
    background: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-images .square-image {
    background: var(--onvis-color-white);
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-thumbnails-wrapper {
    min-width: 0;
}

/*
 * NOVA initialisiert die Vorschaubilder als horizontalen Slick-Slider. Die
 * Leiste bleibt deshalb bewusst unter dem Hauptbild; so bleiben berechnete
 * Folienbreiten, Wischbewegung und Bildwechsel vollständig in JTL-Hand.
 */
#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-detail-image-preview-bar {
    min-width: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--onvis-color-border);
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-thumbnails {
    margin-bottom: 0;
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-thumbnails .slick-slide {
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: 6px;
}

#product-offer .product-gallery [role="group"]:not(.fullscreen) .product-thumbnails .slick-current {
    border-color: var(--onvis-color-brand);
}

#product-offer > .product-info {
    padding-block: 0;
    color: var(--onvis-color-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#product-offer .product-info-inner {
    padding: clamp(1rem, 2vw, 1.75rem);
    background: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
}

#product-offer .product-title {
    margin-bottom: 0.75rem;
    color: var(--onvis-color-ink);
    font-size: clamp(1.35rem, 1.65vw, 1.75rem);
    line-height: 1.28;
    overflow-wrap: anywhere;
}

#product-offer .info-essential {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-bottom: 1rem;
    color: var(--onvis-color-muted);
    font-size: 0.875rem;
}

#product-offer .price_wrapper {
    margin-block: 0.75rem 1rem;
}

#product-offer .price_wrapper .price {
    color: var(--onvis-color-brand-strong);
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
}

#product-offer .product-offer,
#product-offer .stock-information {
    margin-top: 1rem;
    padding-top: 1rem;
    border-color: var(--onvis-color-border);
}

#product-offer .basket-form-inline {
    align-items: stretch;
    gap: 0.75rem 0;
}

#product-offer .basket-form-inline .btn-primary,
#product-offer .basket-form-inline .choose_quantity,
#product-offer .basket-form-inline .choose_quantity .quantity,
#product-offer .basket-form-inline .choose_quantity .btn,
#product-offer .basket-form-inline .choose_quantity .input-group-text {
    min-height: 3rem;
}

#product-offer .basket-form-inline .choose_quantity,
#product-offer .basket-form-inline .choose_quantity .btn {
    max-height: none;
}

#product-offer .basket-form-inline .btn-primary {
    font-weight: 800;
}

@media (min-width: 992px) {
    #product-offer > .product-gallery {
        flex: 0 0 58%;
        max-width: 58%;
    }

    #product-offer > .product-info {
        flex: 0 0 42%;
        max-width: 42%;
        align-self: stretch;
    }

    /* Lange Konfigurationen bleiben bis zum unteren Viewportrand scrollbar. */
    #product-offer .product-info-inner {
        position: sticky;
        top: 5.5rem;
        max-height: calc(100vh - 6.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

/* --------------------------------------------------------------------------
 * Artikeldetail: Serviceleiste und Inhaltsbereiche
 * --------------------------------------------------------------------------
 * Die Serviceleiste bleibt eine ruhige Informationsfläche. Technische Daten,
 * Zahlung und Versand nutzen ausschließlich die bereits von NOVA erzeugten
 * Inhalte; unbekannt langes Händler-HTML bleibt innerhalb der Inhaltsbreite.
 */
.onvis-product-service-container {
    margin-block: 1.5rem 2rem;
}

.onvis-product-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    background: var(--onvis-color-white);
    border: 1px solid var(--onvis-color-border);
    border-top: 3px solid var(--onvis-color-brand);
    border-radius: var(--onvis-radius);
    box-shadow: var(--onvis-shadow-soft);
}

.onvis-product-service__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.onvis-product-service__benefit {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
    padding: 0.25rem 0.5rem;
}

.onvis-product-service__benefit > [class*="fa-"] {
    display: grid;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: var(--onvis-color-brand-strong);
    background: var(--onvis-color-surface);
    border: 1px solid var(--onvis-color-border);
    border-radius: 50%;
    font-size: 1rem;
}

.onvis-product-service__benefit > span:last-child {
    min-width: 0;
}

.onvis-product-service__benefit strong,
.onvis-product-service__benefit small {
    display: block;
    overflow-wrap: break-word;
}

.onvis-product-service__benefit strong {
    font-size: 0.875rem;
    line-height: 1.35;
}

.onvis-product-service__benefit small {
    color: var(--onvis-color-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.onvis-payment-methods {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--onvis-color-border);
}

.onvis-payment-method {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    max-width: 100%;
    padding: 0.4rem 0.55rem;
    color: var(--onvis-color-ink);
    background: var(--onvis-color-surface);
    border: 1px solid var(--onvis-color-border);
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.onvis-payment-method > [class*="fa-"] {
    flex: 0 0 auto;
    color: var(--onvis-color-brand-strong);
}

.onvis-technical-data,
.onvis-payment-shipping {
    min-width: 0;
    max-width: 100%;
    color: var(--onvis-color-ink);
    overflow-wrap: anywhere;
}

/* Tabellen scrollen innerhalb ihres Bereichs und verbreitern nie die Seite. */
.onvis-technical-data__attributes,
.onvis-technical-data__shortdesc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.onvis-technical-data__attributes .table {
    width: 100%;
    min-width: 32rem;
    margin-bottom: 1.5rem;
}

.onvis-technical-data__attributes .table th,
.onvis-technical-data__attributes .table td {
    padding: 0.75rem;
    border-color: var(--onvis-color-border);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.onvis-technical-data__shortdesc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    min-width: 0;
}

.onvis-technical-data__shortdesc > * {
    min-width: 0;
    max-width: 100%;
}

.onvis-technical-data__shortdesc p {
    margin: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--onvis-color-border);
}

.onvis-technical-data__shortdesc img {
    max-width: 100%;
    height: auto;
}

.onvis-technical-data__shortdesc pre {
    max-width: 100%;
    overflow-x: auto;
}

.onvis-payment-shipping {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.onvis-payment-shipping > * {
    min-width: 0;
}

.onvis-payment-shipping h3 {
    font-size: 1.1rem;
}

.onvis-payment-shipping .btn {
    max-width: 100%;
    margin-top: 0.5rem;
    white-space: normal;
}

#content-wrapper:has(#product-offer) .tab-navigation {
    margin-bottom: 2rem;
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-tabs {
    gap: 0.25rem;
    border-bottom-color: var(--onvis-color-border);
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-link {
    padding: 0.75rem 1rem;
    color: var(--onvis-color-ink);
    border: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
    transition: color var(--onvis-transition);
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-link::after {
    border-color: var(--onvis-color-brand);
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-link:hover,
#content-wrapper:has(#product-offer) .tab-navigation .nav-link.active {
    color: var(--onvis-color-brand-strong);
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-link:hover::after,
#content-wrapper:has(#product-offer) .tab-navigation .nav-link.active::after {
    width: 100%;
}

#content-wrapper:has(#product-offer) .tab-navigation .nav-link:focus-visible {
    color: var(--onvis-color-brand-strong);
    outline: 2px solid var(--onvis-color-brand-strong);
    outline-offset: -2px;
}

#content-wrapper:has(#product-offer) .tab-navigation .tab-content {
    min-width: 0;
    padding-block: 1.5rem;
}

#content-wrapper:has(#product-offer) .recommendations .productbox {
    height: 100%;
}

/* --------------------------------------------------------------------------
 * Responsive Darstellung
 * --------------------------------------------------------------------------
 * Auf schmalen Bildschirmen steht jede Kachel in einer eigenen Zeile. Kleinere
 * Abstände nutzen den verfügbaren Platz, ohne Inhalte an den Rand zu drängen.
 */
@media (max-width: 767.98px) {
    #header-top-bar {
        padding-block: 0.5rem;
    }

    header .search-wrapper {
        margin-block: 0.5rem;
    }

    #jtl-nav-wrapper {
        border-bottom-width: 1px;
    }

    #footer {
        padding: 1.5rem 0 0;
    }

    #copyright {
        padding-block: 0.75rem;
    }

    .onvis-home-offers,
    .onvis-home-news {
        margin-block: 2rem;
        padding-block-start: 1.5rem;
    }

    .onvis-home-offers > * + *,
    .onvis-home-news > * + * {
        margin-top: 1rem;
    }

    .content-cats-small .sub-categories,
    #content-wrapper .sidepanel-left .box-normal,
    .product-wrapper .productbox {
        border-radius: 6px;
    }

    #content-wrapper .sidepanel-left .box-normal,
    .productbox .productbox-inner {
        padding: 0.75rem;
    }

    #content-wrapper .sidepanel-left .box-normal {
        margin-bottom: 1rem;
    }

    .content-cats-small .sub-categories .subcategories-image,
    .productbox .productbox-image-wrapper,
    .productbox .square-image {
        border-radius: 5px 5px 0 0;
    }

    .productbox .productbox-price,
    #product-offer .product-offer,
    #product-offer .stock-information {
        margin-top: 0.75rem;
    }

    #product-offer .price_wrapper {
        margin-block: 0.5rem 0.75rem;
    }

    #product-offer .price_wrapper .price {
        font-size: 1.5rem;
    }

    #product-offer {
        margin-bottom: 1.25rem;
    }

    #product-offer > .product-gallery,
    #product-offer > .product-info {
        flex: 0 0 100%;
        max-width: 100%;
        padding-inline: 0.75rem;
    }

    #product-offer .product-gallery [role="group"]:not(.fullscreen),
    #product-offer .product-info-inner {
        padding: 0.75rem;
        border-radius: 6px;
    }

    #product-offer .basket-form-inline > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .onvis-product-service-container {
        margin-block: 1rem 1.5rem;
        padding-inline: 0.75rem;
    }

    .onvis-product-service {
        padding: 0.9rem;
    }

    .onvis-product-service__benefits,
    .onvis-technical-data__shortdesc,
    .onvis-payment-shipping {
        grid-template-columns: minmax(0, 1fr);
    }

    .onvis-payment-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .onvis-payment-method {
        min-height: 2.5rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #content-wrapper:has(#product-offer) #tabAccordion .card {
        overflow: hidden;
        border-color: var(--onvis-color-border);
        border-radius: 6px;
    }

    #content-wrapper:has(#product-offer) #tabAccordion .card-header {
        min-height: 2.75rem;
        padding: 0;
        color: var(--onvis-color-ink);
        background: var(--onvis-color-white);
        font-weight: 700;
    }

    #content-wrapper:has(#product-offer) #tabAccordion .card-header [type="button"] {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.75rem 1rem;
        color: var(--onvis-color-ink);
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #content-wrapper:has(#product-offer) #tabAccordion .card-header [type="button"]:hover {
        color: var(--onvis-color-brand-strong);
        text-decoration: none;
    }

    #content-wrapper:has(#product-offer) #tabAccordion .card-header [type="button"]:focus-visible {
        color: var(--onvis-color-brand-strong);
        outline: 2px solid var(--onvis-color-brand-strong);
        outline-offset: -3px;
        text-decoration: none;
    }
}

@media (max-width: 991.98px) {
    #product-offer .product-info-inner {
        position: static;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }

    .onvis-product-service {
        grid-template-columns: minmax(0, 1fr);
    }

    .onvis-payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

    .row:has(> [class*="col-"] .kat-title) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .row:has(> [class*="col-"] .kat-title) {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
 * Reduzierte Bewegung
 * --------------------------------------------------------------------------
 * Die Betriebssystem-Einstellung wird respektiert: Navigation, Formulare,
 * Produktkarten und Produktbilder wechseln ohne Animation.
 */
@media (prefers-reduced-motion: reduce) {
    #header-top-bar a:not(.dropdown-item):not(.btn),
    header .form-control,
    #jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:not(.btn-primary),
    #jtl-nav-wrapper #shop-nav > .nav-item > button:not(.btn-primary):not(:disabled):not(.disabled),
    :is(
        .btn-primary,
        .btn-success,
        .btn-secondary,
        .btn-info,
        .btn-outline-primary,
        .btn-outline-secondary,
        .btn-outline-success
    ):not(:disabled):not(.disabled),
    #jtl-nav-wrapper .nav-link:not(.btn-primary),
    #footer a:not(.btn),
    .product-wrapper.product-wrapper-news .newsbox-body .btn,
    .product-wrapper.product-wrapper-news .newsbox-footer > a {
        transition: none;
    }

    .content-cats-small .sub-categories .subcategories-image img,
    .content-cats-small .sub-categories a,
    #content-wrapper .sidepanel-left .form-control,
    #product-offer .product-gallery .product-image,
    #content-wrapper:has(#product-offer) .tab-navigation .nav-link,
    #content-wrapper:has(#product-offer) .tab-navigation .nav-link::after,
    .product-wrapper .productbox,
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]),
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]::before,
    .productbox .productbox-image-wrapper-inner img,
    .productbox .square-image > .inner img {
        transition: none;
    }

    .content-cats-small .sub-categories:hover .subcategories-image img,
    .content-cats-small .sub-categories:focus-within .subcategories-image img,
    .product-wrapper .productbox:hover,
    .product-wrapper .productbox:focus-within,
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]):hover,
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > :is(.container-fluid, [class~="opc-Container"]):focus-within,
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]:hover::before,
    .row:has(> [class*="col-"] .kat-title) > [class*="col-"] > [class~="opc-Container"]:focus-within::before,
    .productbox:hover .productbox-image-wrapper-inner img,
    .productbox:focus-within .productbox-image-wrapper-inner img {
        transform: none;
    }

    .productbox:hover .square-image > .inner img,
    .productbox:focus-within .square-image > .inner img {
        transform: translate(-50%, -50%);
    }
}