/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

::selection {
    background-color: var(--bs-accent);
    color: #fff;
}

::-moz-selection {
    background-color: var(--bs-accent);
    color: #fff;
}

/* Inhalt eingerückt; Hero auf der Startseite bleibt randlos */
#content-wrapper {
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

#content-wrapper.container-fluid,
#content-wrapper.container-fluid-xl {
    max-width: 103.125rem;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Startseite: Kacheln, Produktslider, News als zentrierte Spalte.
 * Header/Menü, Footer und #slider-1 bleiben volle Breite.
 */
body[data-page="18"] #content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

body[data-page="18"] #content {
    width: 100%;
    max-width: 1880px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

body[data-page="18"] #content > .container-fluid,
body[data-page="18"] #content .product-slider-wrapper,
body[data-page="18"] #content .index-news-wrapper > .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Einheitliche Produktbild-Fläche (Slider, Listen, Boxen) */
.square,
.productbox-image-wrapper,
.item-slider.productbox-image {
    display: flex;
    position: relative;
    width: 100%;
}

.square::before,
.productbox-image-wrapper::before,
.item-slider.productbox-image::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.square-image .inner,
.productbox-image-wrapper-inner,
.item-slider.square-image .inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.square-image .inner picture,
.item-slider.square-image .inner picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.square-image .inner a,
.productbox-image-wrapper-inner a,
.item-slider.square-image .inner a {
    display: block;
    width: 100%;
    height: 100%;
}

.square-image .inner img,
.productbox-image-wrapper-inner img,
.item-slider .product-image,
.productbox-image img.product-image {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/*
 * Nur die OPC-Kacheln unter dem Banner (#content, id slider-uid_*).
 * Nicht #slider-1 (Hero). Bildfläche ~40% niedriger als 4:3 (20/9).
 */
#content [id^="slider-uid_"] .splide__slide:has(> .splide__slide__caption) {
    display: flex !important;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

#content [id^="slider-uid_"] .splide__slide:has(> .splide__slide__caption) > a {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 20 / 9;
    overflow: hidden;
    background: #fff;
}

#content [id^="slider-uid_"] .splide__slide:has(> .splide__slide__caption) > a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

#content [id^="slider-uid_"] .splide__slide:has(> .splide__slide__caption) > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 20 / 9;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

#content [id^="slider-uid_"] .splide__slide > .splide__slide__caption,
#content [id^="slider-uid_"] .slider-wrapper .splide__slide__caption {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    min-height: 3.5rem;
    margin-top: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    background: var(--bs-accent) !important;
    color: #fff !important;
}

#content [id^="slider-uid_"] .splide__slide__caption .desc,
#content [id^="slider-uid_"] .splide__slide__caption .title,
#content [id^="slider-uid_"] .splide__slide__caption p,
#content [id^="slider-uid_"] .splide__slide__caption strong {
    color: #fff !important;
    margin: 0;
    text-align: center;
}

/* Keine Unterstreichung bei Links; Hover orange statt NOVA-Ocker */
a,
a:hover,
a:focus,
.slick-slide a:hover,
.slick-slide a:focus,
.item-slider-desc,
.productbox-title a:hover {
    text-decoration: none !important;
}

a:hover,
a:focus,
.slick-slide a:hover,
.slick-slide a:focus,
.item-slider a:hover,
.productbox-title a:hover,
.btn-link:hover,
.form-icon-trigger-label:hover,
.consent-modal-close:hover,
.consent-modal-close:focus,
a.give-consent-preview:focus-visible,
.jqcloud-word a:hover {
    color: var(--bs-accent) !important;
}

#header-top-bar a:not(.dropdown-item):not(.btn):hover,
#header-top-bar a:not(.dropdown-item):not(.btn):focus {
    color: var(--bs-surface) !important;
}

/* Überschriften-Links: Standard orange, Hover grau */
.hr-sect a,
.hr-sect.h2 a,
h1 a, h2 a, h3 a, h4 a,
.h1 a, .h2 a, .h3 a, .h4 a,
.blog-header a,
.product-headline a,
.product-title a,
.newsbox-headline {
    color: var(--bs-accent);
    text-decoration: none !important;
}

.hr-sect a:hover,
.hr-sect.h2 a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover,
.blog-header a:hover,
.product-headline a:hover,
.product-title a:hover,
.newsbox-headline:hover {
    color: var(--bs-text) !important;
    text-decoration: none !important;
}

/*
 * NOVA-Clear hardcodiert Primary als Ocker #F8BF00.
 * Alles Primär-/Hover-/Border-Gelb auf Shop-Orange.
 */
.tab-navigation .nav-link::after,
.tab-navigation .nav-link.active::after,
.tab-navigation .nav-link:hover::after,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.productlist-filter-categories > .nav-item > .nav-link::before,
aside .nav-panel > .nav > .active > .nav-link,
.filter-item.active .filter-img,
.filter-item:active .filter-img,
.filter-search-wrapper.input-group-selected .input-group-text,
.filter-search-wrapper.input-group-selected .filter-search,
.carousel-thumbnails .slick-slide.slick-current,
.swatches-image.active,
.swatches-text.active,
.badge-check,
.badge-outline-primary,
.border-primary,
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select.show button.dropdown-toggle,
.form-control:focus + .input-group-append .input-group-text,
.account-head-data .account-head-data-credit {
    border-color: var(--bs-accent) !important;
}

.bg-primary,
.badge-primary,
.progress-bar,
.list-group-item.active,
.badge-check .badge-circle,
.badge-circle:hover,
.badge-circle:focus,
.badge-circle-1.on-list,
.slick-arrow:hover,
.modal-header .close:hover,
.modal-header .close:focus,
.noUi-horizontal .noUi-connect,
.noUi-horizontal .noUi-handle,
.fa-sup,
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after,
.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb,
#image_wrapper.fullscreen .product-detail-image-topbar #image_fullscreen_close:hover,
#image_wrapper #gallery .slick-arrow:hover,
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item .badge-circle,
.btn-icon-primary:not(:disabled):not(.disabled):active,
.btn-icon-secondary:not(:disabled):not(.disabled):active,
.btn-animated .btn-outline-primary::after,
.btn-animated .btn-outline-primary:hover::after {
    background-color: var(--bs-accent) !important;
    background: var(--bs-accent) !important;
}

.text-primary,
.badge-outline-primary,
.box_login .register .fa,
.checkout-steps .step-check {
    color: var(--bs-accent) !important;
}

.form-control:focus,
.custom-select:focus,
.btn:focus,
.btn.focus,
.page-link:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}

#rmaStickyPositions.loadingAJAX::after,
#rmaStickyPositions.loadingAJAX::before {
    border-color: var(--bs-accent) var(--bs-accent) transparent transparent;
}