/* Skip-Links (.btn-skip-to) standardmäßig unsichtbar machen, außer sie werden mit der Tastatur fokussiert */
.btn-skip-to:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



body {
  font-family: "Roboto",sans-serif;
  font-size: 1.0875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212121;
  text-align: left;
  
}

.btn-primary {
    color: #fff;
    background-color: #212121;
    border-color: #212121;
    box-shadow: none;
}

/* XT-Rot #d93a26 = Sekundaerfarbe der Template-Einstellungen (rgb 217,58,38).
   Weiss darauf 4,58:1. Bis 5.6.2 stand hier #e23c2b mit nur 4,27:1 (unter
   dem Mindestwert 4,5:1 fuer normale Schrift). Dunkler Ton fuer Hover:
   #b83120. */

.h1 {
  font-size: 2.175rem;
}

h2, .h2, .product-matrix .product-matrix-title {
  font-size: 1.975rem;
}


.btn-primary:hover {
  color: #fff;
  background-color: #d93a26;
  border-color: #b83120;
}
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #d93a26;
  border-color: #b83120;
  box-shadow: 0 0 0 0 rgba(208, 168, 57, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #d93a26;
  border-color: #d93a26;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) {
  color: #fff;
  background-color: #b83120;
  border-color: #d93a26;
}


.btn-outline-primary {
  color: #d93a26;
  border-color: #d93a26;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #d93a26;
  border-color: #d93a26;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0 rgba(217, 58, 38, 0.3);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #d93a26;
  background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .show > .btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler) {
  color: #fff;
  background-color: #b83120;
  border-color: #b83120;
}


/* Hoverfarbe im Kopf. Das XT-Rot #d93a26 erreicht auf dem dunklen Kopf
   (#212121) nur 3,51:1, in den weissen Klappmenues auf dem grauen
   Hover-Grund (#f5f5f5) 4,20:1. Darum zwei Toene derselben Farbe:
   heller auf dunklem Grund (#f0604d, 4,97:1), dunkler in den Menues
   (#b83120, 6,00:1 auf Weiss, 5,51:1 auf #f5f5f5; wie gedrueckte Knoepfe).
   Gemessen am 09.10.2026, Pruefliste aus Themes/upreloaded/PFLEGE.md Abschn. 5. */
#shop-nav .nav-link:hover,
#shop-nav .nav-link:focus,
#shop-nav .navbar-nav > .nav-item:hover > .nav-link,
#shop-nav .navbar-nav > .nav-item > .nav-link:hover,
header #shop-nav a:hover,
header #shop-nav a:focus {
    color: #f0604d !important;
}

/* Alle Header-Links (Kontakt, Sitemap, Icons, Warenkorb) */
header a:hover,
header a:focus,
.top-bar a:hover,
.top-bar a:focus,
#header a:hover,
#header a:focus {
    color: #f0604d !important;
}

/* Klappmenues im Kopf (Konto, Merkzettel, Vergleich, Warenkorb) sind weiss. */
#shop-nav .dropdown-menu a:hover,
#shop-nav .dropdown-menu a:focus,
#shop-nav .dropdown-menu .dropdown-item:hover,
#shop-nav .dropdown-menu .dropdown-item:focus {
    color: #b83120 !important;
}

/* Loeschkreuz im Suchfeld: NOVA gibt ihm keine eigene Farbe, es erbt das
   Weiss des Kopfs und steht dann unsichtbar auf dem weissen Feld (1,00:1). */
.search-wrapper .form-clear {
    color: #212121;
}


.page-link:hover {
  z-index: 2;
  color: #d93a26;
  text-decoration: none;
  background-color: transparent;
  border-color: #dee2e6;
}

/* Fuss #181818: #d93a26 hier 3,87:1, der hellere Ton 5,48:1 (wie im Kopf). */
#footer a:not(.btn):hover,
#footer a:not(.btn):focus {
  color: #f0604d;
}

/* Tabellen mit reinem Screenreader-Kopf (z. B. Merkmale auf der Artikelseite):
   Die unsichtbare Kopfzeile ist trotzdem eine 1 px hohe Tabellenzeile, und
   table-bordered-outline gibt jeder Zeile oben und unten einen Rand - zusammen
   mit der ersten echten Zeile eine 3 px dicke Oberkante. Nur Koepfe, die
   ausschliesslich aus sr-only-Zellen bestehen. */
.table > thead:not(:has(th:not(.sr-only))) > tr,
.table > thead:not(:has(th:not(.sr-only))) th {
  border: 0 !important;
}

/* --- Eine Schriftfamilie fuer den ganzen Shop: Archivo ---
   Gemessen am 09.10.2026: Archivo (eigene Abschnitte), Poppins (Menue,
   Produktnamen, NOVA-Ueberschriften), Raleway (Footer) und Roboto
   (Fliesstext - wird nirgends geladen, Besucher sahen die Systemschrift).
   Jetzt ueberall Archivo; grosse Ueberschriften in der schmalen Fassung wie
   in den Startseiten-Abschnitten. Icon-Schriften (Font Awesome) bleiben. */
body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(.guarantee-label):not(.guarantee-label *) {
    font-family: 'Archivo XT', Roboto, sans-serif !important;
}
/* Ausgenommen: das gesetzliche Gewaehrleistungs-Label (.guarantee-label) -
   es behaelt die von JTL vorgesehene Schrift (Inter). Derzeit im Backend
   ausgeschaltet; layout/header.tpl laedt Inter nur vor, wenn es an ist. */
h1, .h1, h2, .h2 {
    font-stretch: 62%;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    word-spacing: .12em;
    line-height: 1.05;
}
#footer .productlist-filter-headline {
    font-stretch: 62%;
    white-space: nowrap;
}

/* Footer-Ueberschriften: NOVA setzt 14 px in "Raleway" (wird nicht geladen),
   kleiner als die Links darunter (17,4 px). Jetzt in der Schlagzeilen-Schrift
   der Seite (Archivo, aus xt-inhalte.css). */
#footer .productlist-filter-headline {
  font-family: 'Archivo XT', Roboto, sans-serif;
  font-stretch: 62%;
  font-weight: 850;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: 1rem;
}

/* Widerrufsknopf: .btn-primary ist #212121 wie der Footer selbst und
   verschwand dort. Pflichtangabe, muss sichtbar sein. */
#footer .withdrawal-link.btn-primary {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
#footer .withdrawal-link.btn-primary:hover,
#footer .withdrawal-link.btn-primary:focus {
  background-color: #fff;
  border-color: #fff;
  color: #212121;
}



@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link {
        color: #fff !important;
        position: relative;
        background: transparent !important;
    }

    /* Kompakt: 12 Kategorien brauchen bei 17,4 px Schrift und 16/24 px
       Innenabstand 2.200 px - drei Zeilen, beim Scrollen bis zu 174 px
       stehende Leiste. So zwei Zeilen mit 77 px (gemessen bei 1440 px). */
    header .navbar-nav > .nav-item > .nav-link {
        font-size: 0.9375rem;
        padding: 0.5rem 0.75rem !important;
    }

    header .navbar-nav > .nav-item > .nav-link:hover,
    header .navbar-nav > .nav-item > .nav-link:focus,
    header .navbar-nav > .nav-item:hover > .nav-link {
        color: #fff !important;
        background: transparent !important;
    }

    header .navbar-nav > .nav-item > .nav-link::before {
        content: "";
        border-color: transparent !important;
        border-style: solid;
        border-width: 0 0 0.1875rem;
        width: 0;
        transition: width 0.2s ease;
    }

    header .navbar-nav > .nav-item > .nav-link:hover::before,
    header .navbar-nav > .nav-item > .nav-link:focus::before,
    header .navbar-nav > .nav-item:hover > .nav-link::before,
    header .navbar-nav > .nav-item.active > .nav-link::before {
        width: 100% !important;
        border-color: #d93a26 !important;
    }
}


.product-videos {
    width: 100%;
}

.product-video {
    width: 100%;
}

.video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.feuerwerkabholung-hinweis {
    background: #f7f7f7;
    border: 1px solid #ebebeb;
    padding: 1rem 1.25rem;
    border-radius:0;
    color: #212121;
    line-height: 1.5;
    margin-bottom: 1rem;
}


/* ===========================================
   XT-Sports Feuerwerk - Fresh Look Upgrade
   =========================================== */

/* --- Typografie: schärfer + moderner --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 800;
}

p {
    line-height: 1.7;
}

/* --- Buttons: Hover-Lift (nicht auf Sortierung/Filter) --- */
.btn {
    transition: all 0.25s ease !important;
}

/* Nicht fuer Knoepfe, die in einem Feld sitzen (Plus/Minus der Menge,
   Lupe der Suche): die sprangen beim Ueberfahren aus dem Kasten (Oliver,
   09.10.2026). Dort zeigt nur die Flaeche den Zustand an. */
.btn:not(.btn-sorting):not(.productlist-filter-button):not(.form-counter .btn):not(.input-group .btn):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

/* --- Sortierung/Filter-Buttons: schwarz, kein rot --- */
.productlist-filter-button,
.btn-sorting,
.sorting .btn,
.productlist-header .btn,
.productlist-header .btn-primary,
.productlist-header .btn-outline-primary {
    background-color: #212121 !important;
    border-color: #212121 !important;
    color: #fff !important;
    border-radius:0 !important;
    transform: none !important;
    box-shadow: none !important;
}

.productlist-header .btn:hover,
.productlist-header .btn-primary:hover,
.productlist-header .btn-outline-primary:hover,
.productlist-filter-button:hover,
.sorting .btn:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Artikel-pro-Seite & Ansicht-Buttons: schwarzer Rahmen statt rot */
.productlist-header .btn-outline-primary,
.productlist-header .dropdown-toggle {
    background-color: #fff !important;
    border-color: #212121 !important;
    color: #212121 !important;
}

.productlist-header .btn-outline-primary:hover,
.productlist-header .dropdown-toggle:hover {
    background-color: #212121 !important;
    border-color: #212121 !important;
    color: #fff !important;
}

/* --- Produktkarten: cleaner Look --- */
.productbox {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border-radius:0 !important;
    transition: box-shadow 0.3s ease !important;
}

.productbox-inner,
.product-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.productbox:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Produktname: NOVA 1.8 unterstreicht alle Links (a:not(.btn)). In der
   Karte ist der Name klar als Link erkennbar - Unterstreichung nur beim
   Ueberfahren und bei Tastaturfokus. */
.productbox-title a {
    text-decoration: none;
}
.productbox-title a:hover,
.productbox-title a:focus-visible {
    text-decoration: underline;
}

/* --- OPC-Kacheln gleich hoch, Link unten buendig ---
   Kacheln im OPC sind HTML-Bloecke mit Inline-"height: 100%". Die Spalten
   sind gleich hoch, aber die Huelle des Bausteins dazwischen hat keine Hoehe,
   also greift das nicht. Gilt nur fuer Spalten, deren Baustein genau so
   einen Block enthaelt. */
.opc-Container .row > [data-area-id]:has(> div:only-child > div[style*="height: 100%"]) {
    display: flex;
    flex-direction: column;
}
.opc-Container .row > [data-area-id] > div:only-child:has(> div[style*="height: 100%"]) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.opc-Container .row > [data-area-id] > div:only-child > div[style*="height: 100%"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.opc-Container .row > [data-area-id] > div:only-child > div[style*="height: 100%"][style*="text-align: center"] {
    align-items: center;
}
.opc-Container .row > [data-area-id] > div:only-child > div[style*="height: 100%"] > a:last-child {
    margin-top: auto;
}

/* --- Badges / Labels frischer --- */
.badge, .label,
.product-badge {
    border-radius:0 !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --- Preise hervorheben --- */
.price, .product-price,
.price_wrapper .price {
    font-weight: 700 !important;
    color: #d93a26 !important;
}
/* Preis auf der Artikelseite etwas groesser (Oliver): vorher 34,8 px,
   jetzt 40 px. Staerke bleibt 700. Kacheln unveraendert. */
.price.h1 {
    font-size: 2.5rem;
}

.price-old, .old-price {
    color: #999 !important;
    text-decoration: line-through !important;
}

/* --- Eingabefelder modernisieren (nur Formulare: Checkout, Kontakt, Login, Register) --- */
.checkout-shipping-form input[type="text"],
.checkout-shipping-form input[type="email"],
.checkout-shipping-form input[type="tel"],
.checkout-shipping-form select,
.checkout-shipping-form textarea,
#login input[type="text"],
#login input[type="email"],
#login input[type="password"],
#register input[type="text"],
#register input[type="email"],
#register input[type="password"],
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    border-radius:0 !important;
    border: 2px solid #e9ecef !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.checkout-shipping-form input:focus,
.checkout-shipping-form select:focus,
.checkout-shipping-form textarea:focus,
#login input:focus,
#register input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #d93a26 !important;
    box-shadow: 0 0 0 3px rgba(217, 58, 38,0.15) !important;
    outline: none !important;
}

/* --- Breadcrumb dezenter --- */
.breadcrumb {
    background: transparent !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
}

.breadcrumb a {
    color: #999 !important;
}

.breadcrumb a:hover {
    color: #d93a26 !important;
}

/* --- Smooth Scroll --- */
html {
    scroll-behavior: smooth;
}

/* --- OPC Container mit background #f0f0f0: leichter Verlauf --- */
.opc-Container[style*="background-color: #f0f0f0"],
.opc-Container[style*="background-color:#f0f0f0"] {
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%) !important;
}

.opc-Container[style*="background-color: #f8f9fa"],
.opc-Container[style*="background-color:#f8f9fa"] {
    background: linear-gradient(180deg, #fcfcfc 0%, #f0f0f0 100%) !important;
}

/* --- Footer Akzentlinie + Raketen-Deko --- */
#footer, .footer-wrapper {
    border-top: 3px solid #d93a26 !important;
    background-image: none !important;
    /* etwas dunkler als der Beratungsblock darueber (#212121), damit beides
       nicht ineinanderlaeuft */
    background-color: #181818 !important;
}

/* NOVA zieht oben im Footer eine duenne Zierlinie (80 % breit) - doppelt
   zur roten Kante. Auf schmalen Schirmen keine Rakete: sie laege hinter
   Widerrufsknopf und Aufklapp-Ueberschriften. */
#footer::before { display: none !important; }

/* Footer-Logo groesser. Steckt in der eigenen Box 127 als 112 x 60 px PNG
   (/media/image/storage/opc/xt-logo-2025-w.png). 1,5-fach ist noch
   vertretbar; scharf erst mit groesserer Datei (SVG oder >= 340 px breit). */
#footer #sidebox127 img {
    width: 168px;
    height: auto;
    max-width: 100%;
}

/* --- Footer-Raster (Desktop) ---
   NOVA: drei Spalten (Logo, Informationen, Gesetzliches) mit leerer vierter,
   darunter Widerrufsknopf, Social-Icons und Steuerhinweis je in eigener Zeile
   - unter dem Logo blieb ein Loch, alles Weitere hing unten links. Und die
   Breite war 1650 px statt 1250 px wie der Seiteninhalt.
   Jetzt: Logo, darunter Widerruf und Social-Icons; daneben die zwei
   Linkspalten; Steuerhinweis als eigene Zeile mit Trennlinie. Nur Anordnung,
   kein Inhalt geaendert. Handy bleibt NOVA (Aufklapp-Ueberschriften). */
@media (min-width: 992px) {
    #footer > .container {
        max-width: 1250px !important;
        padding: 0 1.5rem;
        display: grid;
        grid-template-columns: 1.1fr .9fr 1.25fr .95fr;
        grid-template-rows: auto auto 1fr auto;
        column-gap: 3rem;
        padding-bottom: 1rem;
    }
    #footer > .container > #footer-boxes,
    #footer > .container > .withdrawal-link-wrapper,
    #footer > .container > .footer-social-media {
        display: contents;
    }
    #footer #footer-boxes > [class*="col"],
    #footer .withdrawal-link-wrapper > [class*="col"],
    #footer .footer-social-media > [class*="col"] {
        max-width: none;
        flex: none;
        width: auto;
        padding: 0;
        margin: 0;
    }
    #footer #footer-boxes > :nth-child(1) { grid-column: 1; grid-row: 1; }
    #footer #footer-boxes > :nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
    #footer #footer-boxes > :nth-child(3) { grid-column: 3; grid-row: 1 / span 3; }
    #footer .withdrawal-link-wrapper > [class*="col"] { grid-column: 1; grid-row: 2; max-width: 20rem; }
    #footer .withdrawal-link-wrapper .mt-3 { margin-top: 1.5rem !important; }
    /* NOVA setzt mx-auto (margin auto mit !important) - zentriert sonst im Raster */
    #footer .footer-social-media > [class*="col"] { grid-column: 1; grid-row: 3; margin: 1.25rem 0 0 !important; justify-self: start; }
    #footer .footer-social-media ul { justify-content: flex-start !important; margin: 0; padding: 0; }
    /* Rakete als eigene vierte Spalte im Inhaltsbereich: fuellt die freie
       Flaeche rechts, rutscht bei breiten Schirmen nicht an den Rand. */
    #footer > .container::after {
        content: "";
        grid-column: 4;
        grid-row: 1 / span 3;
        min-height: 280px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 969.945 969.945' fill='rgba(255,255,255,0.07)'%3E%3Cg%3E%3Cpolygon points='319.5,470.672 424.4,510.672 485.9,534.072 590.8,574.072 680.101,484.672 408.9,381.373'/%3E%3Cpolygon points='447.601,342.572 718.9,445.972 780.601,384.172 593.3,196.873'/%3E%3Cpath d='M385.7,549.373l-104.9-40l-25,25c-14.5,14.5-17,36.398-7.6,53.5c-4.6,2.6-9.2,5-14.1,7.199c-0.7,0.301-1.5,0.6-2.2,0.9c-2.5,1-5.1,1.9-7.7,2.699c-4.6,1.5-9.4,2.801-14.2,3.9c-2.1,0.5-4.3,0.9-6.4,1.301c-1.1,0.199-2.1,0.398-3.2,0.5c-0.3,0-0.5,0.1-0.7,0.1c-4.8,0.6-9.6,0.9-14.4,1c-4.9,0.1-9.8,0-14.7-0.301c-1.9-0.1-3.9-0.299-5.8-0.5c1.3,0.1-4.8-0.799-6-1c-21.8-4.1-42-13.699-63.5-18.699c-23.7-5.5-48.5-7.201-72.8-4.9c-12.2,1.199-22.5,9.301-22.5,22.5c0,11.4,10.3,23.699,22.5,22.5c11.2-1.1,22.4-1.301,33.6-0.6c2.5,0.1,5,0.4,7.4,0.6c1.2,0.1,2.5,0.301,3.7,0.4c0.3,0,0.5,0.1,0.7,0.1c0.2,0,0.4,0.1,0.7,0.1c6.2,0.9,12.3,2.201,18.3,3.6c22.4,5.4,43.4,15.4,66.3,18.9c43.5,6.701,89.1-2.1,125.9-26.6l17.1,17.1l-272.3,272.5c-11.7,11.701-11.7,30.701,0,42.4c5.9,5.9,13.5,8.801,21.2,8.801c7.7,0,15.4-2.9,21.2-8.801l272.5-272.5l40.601,40.6c17.6,17.6,46.1,17.6,63.6,0l108.9-108.9l-104.9-40L385.7,549.373z'/%3E%3Cpath d='M940.101,7.572c-1.7,0-3.4,0.1-5.2,0.4l-341.3,58.7c-24,4.1-33.301,33.6-16.101,50.8l61.4,61.4l159.7,159.7l61.399,61.4c6,6,13.601,8.8,21.101,8.8c13.699,0,27-9.399,29.699-24.899l58.7-341.3C972.7,23.972,958.2,7.572,940.101,7.572z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
    }
    #footer .footnote-vat {
        grid-column: 1 / -1;
        grid-row: 4;
        border-top: 1px solid #333;
        margin-top: 2.5rem;
        padding: 1.25rem 0 0;
        color: #a3a5a9;
    }
}

/* --- Header Schatten + Raketen-Spitze --- */
.navbar, #header, .top-bar {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

.jtl-nav-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='500 0 470 410' fill='rgba(255,255,255,0.05)'%3E%3Cg%3E%3Cpolygon points='447.601,342.572 718.9,445.972 780.601,384.172 593.3,196.873'/%3E%3Cpath d='M940.101,7.572c-1.7,0-3.4,0.1-5.2,0.4l-341.3,58.7c-24,4.1-33.301,33.6-16.101,50.8l61.4,61.4l159.7,159.7l61.399,61.4c6,6,13.601,8.8,21.101,8.8c13.699,0,27-9.399,29.699-24.899l58.7-341.3C972.7,23.972,958.2,7.572,940.101,7.572z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 40px center !important;
    background-size: 300px !important;
}

/* --- Text-Selektion --- */
::selection {
    background: #d93a26;
    color: #fff;
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #d93a26;
    border-radius:0;
}

::-webkit-scrollbar-thumb:hover {
    background: #c1121f;
}
/* --- Ribbon in der Artikelkachel (09.10.2026) ---
   NOVA: Band mit Knick, ragt links aus dem Bild, Versalien, Schatten, springt
   beim Ueberfahren nach oben links. Neu in der Bauart der Klassen-Marke
   (xt-inhalte.css, .xt-klasse): innen, eckig, Archivo, weisser Rand, ruhig.
   Lagerstand ist leise (weisses Schild, farbiger Punkt), weil er auf fast
   jeder Kachel steht. Werbliche Hinweise in XT-Rot.
   Typen laut includes/defines_inc.php: 1 Bestseller, 2 Sonderangebot, 3 Neu,
   4 Top, 5 Bald verfuegbar, 6 Top bewertet, 7 Ausverkauft, 8 Auf Lager,
   9 Vorbestellen. */
.productbox-ribbon.ribbon,
.productbox.productbox-hover:hover .productbox-ribbon.ribbon,
.productbox.productbox-hover:focus .productbox-ribbon.ribbon,
.productbox.productbox-hover.focus .productbox-ribbon.ribbon {
    top: .5rem;
    left: .5rem;
    transition: none;
}
.productbox-ribbon.ribbon {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .55rem .3rem;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #212121, 0 0 0 2px #fff;
    background: #fff;
    color: #212121;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}
.productbox-ribbon.ribbon::after { display: none; }
.productbox-ribbon.ribbon::before {
    content: "";
    position: static;
    flex: none;
    width: .5rem;
    height: .5rem;
    border: 0;
    background: #0f8662;   /* 4,6:1 auf Weiss */
}
.productbox-ribbon.ribbon-7::before { background: #8a8a8a; }   /* ausverkauft */
.productbox-ribbon.ribbon-7 { color: #555; }                   /* 7,5:1 */
.productbox-ribbon.ribbon-5::before,
.productbox-ribbon.ribbon-9::before { background: #b7791f; }   /* bald / vorbestellen */
.productbox-ribbon.ribbon-1,
.productbox-ribbon.ribbon-2,
.productbox-ribbon.ribbon-3,
.productbox-ribbon.ribbon-4,
.productbox-ribbon.ribbon-6 {
    background: #d93a26;   /* Weiss darauf 4,58:1 */
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}
.productbox-ribbon.ribbon-1::before,
.productbox-ribbon.ribbon-2::before,
.productbox-ribbon.ribbon-3::before,
.productbox-ribbon.ribbon-4::before,
.productbox-ribbon.ribbon-6::before { display: none; }
@media (max-width: 991.98px) {
    /* NOVA verkleinert hier auf 9 px */
    .productbox-ribbon.ribbon { font-size: .6875rem; }
}

/* --- Kategoriekopf (09.10.2026, Idee aus upreloaded: Titel und Einleitung
   als ein ruhiger Block, Lesebreite begrenzt). Greift, sobald die
   Kategorien Texte haben; bis dahin steht nur der Titel. Die Beschreibung
   kommt aus der Wawi und bringt oft eigene <p> mit, deshalb ".desc" und
   ".desc p" gleich behandelt. */
#result-wrapper > .title { margin-bottom: .75rem; }
/* Volle Breite (Oliver, 09.10.2026): mit 72ch blieb rechts eine leere
   Haelfte, die Einleitung wirkte wie eine halbe Spalte. Sie ist nur zwei
   bis drei Saetze lang, ueber die ganze Breite also zwei Zeilen. */
#result-wrapper > .desc {
    margin-bottom: 1.75rem;
    color: #555;            /* 7,5:1 auf Weiss */
    font-size: 1rem;
    line-height: 1.6;
}
#result-wrapper > .desc p { margin: 0 0 .75rem; }
#result-wrapper > .desc p:last-child { margin-bottom: 0; }
#result-wrapper > .desc a { color: #b83120; text-decoration: underline; }   /* 6,0:1 */

/* --- Beratungskarte unter dem Warenkorbknopf (snippets/xt_beratung.tpl,
   Idee aus upreloaded). Bewusst hell: der Warenkorbknopf ist die einzige
   dunkle Flaeche im Kaufbereich (Oliver: dunkle Karte liess ihn
   untergehen). Text #212121 auf #f5f5f5 14,8:1, Zweittext #555 6,9:1. */
.xt-beratung {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #f5f5f5;
    color: #212121;
}
.xt-beratung p { margin: 0; }
/* Textgroessen wie der Abholhinweis darueber (Grundgroesse der Seite). */
.xt-beratung-titel { font-weight: 700; }
.xt-beratung-text { color: #555; margin-top: .15rem !important; }
.xt-beratung-anruf {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    color: #212121 !important;
    text-decoration: none !important;
}
.xt-beratung-anruf .fa-phone { font-size: 1rem; color: #212121; }
/* Normale Breite: schmal bleiben nur Artikelname und Preis (Oliver). */
.xt-beratung-nummer {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    white-space: nowrap;
}
.xt-beratung-anruf:hover .xt-beratung-nummer,
.xt-beratung-anruf:focus .xt-beratung-nummer {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.xt-beratung-zeiten { color: #555; margin-top: .35rem !important; }

/* --- Suche im Kopf (09.10.2026). Vorher: Feld mit 1-px-Rand und daneben ein
   eigener Kasten fuer die Lupe (Desktop weiss, Handy rot), 34 px hoch,
   Schrift 14 px; sah aus wie zwei Teile. Jetzt auf Desktop und Handy eine
   weisse Leiste aus einem Stueck, 40 px hoch, Lupe darin.
   #search = Desktop, .search-form-wrapper-fixed = Handy (d-lg-none).
   Die BREITE kommt nicht von hier, sondern aus der Backend-Einstellung
   "Suchfeld Breite" (header.menu_search_width), die NOVA als max-width ins
   HTML schreibt. */
header #search .input-group,
header .search-form-wrapper-fixed .input-group { background: #fff; flex-wrap: nowrap; }
header #search .form-control,
header #search .form-control:focus,
header .search-form-wrapper-fixed .form-control,
header .search-form-wrapper-fixed .form-control:focus {
    height: 2.5rem;
    padding: .5rem .875rem;
    border: 0;
    font-size: 1rem;
    color: #212121;
    box-shadow: none;
}
header #search .form-control::placeholder,
header .search-form-wrapper-fixed .form-control::placeholder { color: #6b6b6b; opacity: 1; }   /* 5,3:1 */
header #search .btn-secondary,
header #search .btn-secondary:hover,
header #search .btn-secondary:focus,
header .search-form-wrapper-fixed .btn-secondary,
header .search-form-wrapper-fixed .btn-secondary:hover,
header .search-form-wrapper-fixed .btn-secondary:focus {
    height: 2.5rem;
    width: 2.75rem;
    padding: 0;
    border: 0;
    background: #fff;
    color: #212121;
    box-shadow: none;
}
header #search .btn-secondary [class*="fa"],
header .search-form-wrapper-fixed .btn-secondary [class*="fa"] { color: #212121; }
/* Tastaturfokus sichtbar, aussen um die ganze Leiste (weiss auf #212121). */
header #search .input-group:focus-within,
header .search-form-wrapper-fixed .input-group:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
/* Blackline faerbt das Handy-Feld per ID dunkel (#search-header-mobile-top
   { background:#212121; color:#fff }, im kritischen CSS). Auf der weissen
   Leiste waere getippter Text dann unsichtbar. */
header #search-header-mobile-top {
    background: transparent;
    color: #212121;
    border-color: transparent;
}
/* Typeahead kopiert beim Start die Hintergrundfarbe des Feldes als
   Inline-Stil in sein Hinweisfeld (.tt-hint) - auf dem Handy das alte
   #212121. Gegen Inline-Stil hilft nur !important. */
header #search .tt-hint,
header .search-form-wrapper-fixed .tt-hint { background: #fff !important; }
/* Die Lupe ist eine dunkle SVG-Grafik (blackline: search_icon.svg).
   Blackline kehrt sie unter 992 px mit filter:invert(1) ins Helle um, fuer
   den frueheren roten Knopf. Auf der weissen Leiste bleibt sie dunkel. */
header .search-form-wrapper-fixed .fas.fa-search,
header #search .fas.fa-search { filter: none; }

/* --- Schrittleiste im Checkout (10.10.2026). Blackline blendet die Nummern
   aus (.stepper .badge { opacity:0 }), uebrig blieben drei schwebende Woerter
   mit einer Linie unter dem aktuellen Schritt (Oliver: „der Ablauf ist
   unklar“). Jetzt: Nummer als eckiges Kaestchen, darunter eine Leiste ueber
   alle Schritte. Erledigt XT-Rot, aktuell Schwarz, kommend Grau.
   Kontraste: #555 auf Weiss 7,5:1, Weiss auf #d93a26 4,58:1. */
.checkout-steps .step .step-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}
.checkout-steps .step .badge {
    opacity: 1;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0 !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    background: #fff !important;   /* blackline: .badge-secondary dunkel */
    color: #555 !important;
    box-shadow: inset 0 0 0 1px #8a8a8a;
}
.checkout-steps .step .step-text { color: #555; }
.checkout-steps .step .step-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #e3e3df;
}
/* erledigt */
.checkout-steps .step.step-active .badge { background: #d93a26 !important; color: #fff !important; box-shadow: none; }
.checkout-steps .step.step-active .step-text { color: #212121; }
.checkout-steps .step.step-active .step-content::after { background: #d93a26; }
/* aktuell */
.checkout-steps .step.step-current .badge { background: #212121 !important; color: #fff !important; box-shadow: none; }
.checkout-steps .step.step-current .step-text { color: #212121; font-weight: 700; }
.checkout-steps .step.step-current .step-content::after { background: #212121; }

/* --- Suche auf dem Handy ruhiger (11.10.2026, Oliver: "mobil sehr
   prominent"). Statt der weissen Leiste ein dunkles Feld im Ton des Kopfs,
   36 px hoch. Desktop (#search) bleibt weiss.
   Dabei behoben: Der Platzhalter "Suchen" war weiss auf weiss; blackline
   setzt ihn per #jtl-nav-wrapper auf #fff, das schlug die Klassenregel oben. Kontraste: Platzhalter #b8b8b3 auf #2e2e2e 6,8:1,
   Text #fff 13,6:1, Rahmen #767676 gegen den Kopf #212121 3,6:1. */
header .search-form-wrapper-fixed .input-group { background: #2e2e2e; box-shadow: inset 0 0 0 1px #767676; }
header .search-form-wrapper-fixed .form-control,
header .search-form-wrapper-fixed .form-control:focus,
header #search-header-mobile-top { height: 2.25rem; background: transparent; color: #fff; }
/* blackline (kritisches CSS): #jtl-nav-wrapper .form-control::placeholder
   { color:#fff } - deshalb hier mit ID und zwei Klassen. */
#jtl-nav-wrapper .search-form-wrapper-fixed .form-control::placeholder,
#jtl-nav-wrapper .search-form-wrapper-fixed .form-control:focus::placeholder { color: #b8b8b3; }
header .search-form-wrapper-fixed .btn-secondary,
header .search-form-wrapper-fixed .btn-secondary:hover,
header .search-form-wrapper-fixed .btn-secondary:focus { height: 2.25rem; background: transparent; }
/* Lupe wieder hell, wie blackline sie unter 992 px vorsieht. */
header .search-form-wrapper-fixed .fas.fa-search { filter: invert(1); }
/* Typeahead-Hinweisfeld traegt die Feldfarbe als Inline-Stil, siehe oben. */
header .search-form-wrapper-fixed .tt-hint { background: transparent !important; }