/* =====================================================================
   TM24 Hybrid Shop – eine Schicht fuer alle JTL-Seitentypen (Kaufen)
   Geladen in layout/header.tpl im Block layout-header-head-resources NACH
   den NOVA-Parent-Styles. Damit gewinnt sie Gleichstaende ohne neue
   !important-Kaskaden; !important steht nur dort, wo bestehende Child-
   Dateien bereits !important erzwingen (Hintergruende, Buttons, Felder).
   Gilt nur fuer body.is-nova (JTL). Verkaufen (/verkaufen) und die B2B-
   Landingpage laden diese Datei nicht.
   Keine neuen Preise, Bestaende, Texte oder Zaehler: nur Darstellung.
   ===================================================================== */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

:root {
    --hy-navy: #06122E;
    --hy-electric: #0039E8;
    --hy-electric-hi: #1F55FF;
    --hy-blue: #003B8F;
    --hy-red: #E30613;
    --hy-ice: #EAF3FF;
    --hy-paper: #F5F8FE;
    --hy-ink: #0B1533;
    --hy-muted: #4E5A78;
    --hy-line: #DCE5F5;
    --hy-line-strong: #C3D2EC;
    --hy-ok: #0A6B3D;
    --hy-ok-bg: #E4F5EC;
    --hy-warn: #8A5200;
    --hy-warn-bg: #FFF3DC;
    --hy-stop: #B4231B;
    --hy-stop-bg: #FDECEA;
    --hy-r: 16px;
    --hy-r-s: 12px;
    --hy-ring: 0 0 0 3px rgba(0, 57, 232, .18);
    --hy-lift: 0 1px 2px rgba(6, 18, 46, .05), 0 10px 28px rgba(6, 18, 46, .08);
    --hy-display: "Archivo", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hy-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Grauer Seitengrund: die bestehenden Child-Tokens zeigen jetzt auf Weiss. */
    --tm-bg: #FFFFFF !important;
    --bg: #FFFFFF !important;
}

/* ---------- Grund, Schrift, Browserflaechen ---------- */
html body.is-nova,
html body.is-nova #main-wrapper,
html body.is-nova #content-wrapper,
html body.is-nova #content,
html body.is-nova main,
html body.is-nova .container-max-fluid,
html body.is-nova .content-wrapper {
    background-color: #FFFFFF !important;
}
html body.is-nova {
    color: var(--hy-ink);
    font-family: var(--hy-ui);
    -webkit-font-smoothing: antialiased;
}
html body.is-nova ::selection { background: var(--hy-electric); color: #fff; }
html body.is-nova :focus-visible { outline: 3px solid var(--hy-electric); outline-offset: 2px; }
html body.is-nova a { color: var(--hy-electric); text-underline-offset: 3px; }
html body.is-nova a:hover { color: var(--hy-blue); }
html body.is-nova #main-wrapper :is(h1, .h1, h2, .h2),
html body.is-nova :is(h1, .h1, h2, .h2) {
    font-family: var(--hy-display) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hy-ink);
    text-wrap: balance;
}
html body.is-nova :is(h3, .h3, h4, .h4) { font-family: var(--hy-ui); font-weight: 800; color: var(--hy-ink); }
html body.is-nova .text-muted-util,
html body.is-nova .text-muted { color: var(--hy-muted) !important; }
html body.is-nova :is(.price, .price_value, .price_overall, .total-sum, .cart-items-price, .productbox-price) {
    font-variant-numeric: tabular-nums;
}
html body.is-nova { scrollbar-color: var(--hy-line-strong) #fff; }
html body.is-nova ::-webkit-scrollbar-track { background: #fff; }

/* ---------- Header: gemeinsamer Vertrag mit Verkaufen (Logo | Insel | Aktionen) ----------
   Referenz live /verkaufen/ (17.10.): Desktop Raster 1120 px, Rand 24 px, Zeile 72 px, Logo 34 px,
   Insel 44 px hoch bei y 14. Handy: Rand 8/12 px, Zeile 58 px, Logo 26 px, Insel 40 px bei y 9.
   Der Shop ergaenzt nur seine Aktionen: Suche und Warenkorb. Die USP-Leiste steht unter dem Kopf
   (layout/header.tpl), damit die Insel auf allen drei Bereichen an derselben Stelle sitzt.
   Selektorform wie Verkaufen (#tm24-home-header.<bereich> > .tm24-header-grid > ...), damit die
   bestehenden !important-Regeln aus css/tm24-header-tokens.css ohne Aenderung dort zuruecktreten. */
html body.is-nova #tm24-home-header.shop-header {
    background: #fff !important;
    border-bottom: 1px solid #E1E8F5 !important;
    padding: 0 !important;
}
/* NOVA's fixed checkout height must not clip the two-row TM24 header. */
html body.is-nova.is-checkout #tm24-home-header.shop-header {
    height: auto;
}
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: none !important;
    grid-template-areas: "left center right" !important;
    align-items: center !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    max-width: 1120px !important;
    height: auto !important;
    min-height: 72px !important;
    padding: 0 24px !important;
    position: relative !important;
}
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left { grid-area: left !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 16px !important; width: auto !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left::after { content: none !important; display: none !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-center { grid-area: center !important; display: flex !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right { grid-area: right !important; position: static !important; display: flex !important; align-items: center !important; justify-self: end !important; gap: 8px !important; margin: 0 !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > a.shop-logo { order: 0 !important; flex: 0 0 auto !important; margin: 0 !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > a.shop-logo > img { height: 34px !important; max-height: none !important; width: auto !important; max-width: 170px !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > .tm24-pill-nav { order: 1 !important; margin: 0 !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-center > .shop-search { flex: 1 1 auto !important; width: 100% !important; max-width: 520px !important; }
/* Insel: gleiche Kapsel wie Verkaufen (Eisblau, aktive Navy-Pille, 800er Schnitt) */
html body.is-nova :is(.tm24-pill-nav, #tm24-home-header .tm24-header-left .tm24-pill-nav) {
    --tm-bg: var(--hy-ice);
    background: var(--hy-ice) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 3px !important;
    gap: 2px !important;
    box-shadow: none !important;
}
html body.is-nova #tm24-home-header .tm24-pill { font-weight: 800 !important; color: var(--hy-blue) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.is-nova #tm24-home-header .tm24-pill.is-active { background: var(--hy-navy) !important; color: #fff !important; }
/* Aktionen: Konto und Warenkorb als ruhige Symbole; Warenkorb zeigt die native Positionsanzahl */
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > .shop-icon-link { position: relative !important; min-width: 56px !important; color: var(--hy-ink) !important; }
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > .shop-icon-link:hover { color: var(--hy-electric) !important; }
html body.is-nova #tm24-home-header .tm24-header-cart { margin: 0; padding: 0; list-style: none; }
html body.is-nova #tm24-home-header .tm24-header-cart .shop-icon-link { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 0; color: var(--hy-ink); }
html body.is-nova #tm24-home-header .tm24-header-cart .shop-icon-link:hover { color: var(--hy-electric); }
html body.is-nova #tm24-home-header .tm24-header-cart .cart-dropdown { left: auto; right: 0; max-width: calc(100vw - 24px); }
html body.is-nova #tm24-home-header .tm24-cart-count {
    position: absolute; top: -4px; left: calc(50% + 6px);
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--hy-electric); color: #fff !important; font: 800 11px/19px var(--hy-ui) !important; text-align: center;
    font-variant-numeric: tabular-nums;
}
/* zwei IDs: tm24-mobile-unified.css (bytegleich) erzwingt dort #tm24-home-header #tm24-menu-toggle min-height 44 */
html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > #tm24-menu-toggle.shop-burger-btn { width: 44px !important; height: 42px !important; min-height: 0 !important; min-width: 0 !important; border: 1px solid var(--hy-line-strong) !important; border-radius: 12px !important; background: #fff !important; }
/* USP-Leiste unter Kopf und Kategorien: ruhig, gleiche Inhalte, nur ab Tablet */
html body.is-nova .tm24-topbar.shop-topbar { background: var(--hy-paper) !important; color: var(--hy-blue) !important; border-bottom: 1px solid #E1E8F5; padding: 0 !important; min-height: 0 !important; height: auto !important; }
html body.is-nova .tm24-topbar.shop-topbar .tm24-topbar-inner { display: flex !important; justify-content: center !important; flex-wrap: wrap; gap: 6px 28px !important; padding: 9px 0 !important; font: 700 13px/1.3 var(--hy-ui) !important; color: var(--hy-blue) !important; }
html body.is-nova .tm24-topbar.shop-topbar .tm24-topbar-inner span { color: inherit !important; }

@media (max-width: 1023.98px) {
    /* Tablet: Zeile 1 wie Verkaufen (Logo + Insel | Konto, Warenkorb, Menue), Suche als volle Zeile */
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "left right" "center center" !important;
        padding: 0 24px 12px !important;
    }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left,
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right { min-height: 72px !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-center { grid-area: center !important; width: 100% !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-center > .shop-search { max-width: none !important; }
}
@media (max-width: 767.98px) {
    /* Handy: Logo | Insel | Menue wie Verkaufen; darunter Suche und Warenkorb. Konto steht im Menue. */
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "logo nav menu" "search search cart" !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        min-height: 58px !important;
        padding: 8px 12px !important;
    }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > :is(.tm24-header-left, .tm24-header-right) { display: contents !important; min-height: 0 !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > a.shop-logo { grid-area: logo !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > a.shop-logo > img { height: 26px !important; max-width: 96px !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-left > .tm24-pill-nav { grid-area: nav !important; justify-self: center !important; padding: 2px !important; }
    html body.is-nova #tm24-home-header .tm24-pill { padding: 7px 10px !important; min-height: 36px !important; height: 36px !important; font-size: 13px !important; line-height: 1.1 !important; gap: 0 !important; }
    html body.is-nova #tm24-home-header .tm24-pill i { display: none !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-center { grid-area: search !important; width: 100% !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > .shop-burger-btn { grid-area: menu !important; justify-self: end !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > .shop-icon-link[href="/Mein-Konto"] { display: none !important; }
    html body.is-nova #tm24-home-header.shop-header > .tm24-header-grid > .tm24-header-right > .tm24-header-cart {
        grid-area: cart !important; display: inline-flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important;
        width: 44px !important; min-width: 44px !important; height: 44px !important; border: 1.5px solid var(--hy-line-strong) !important; border-radius: var(--hy-r-s) !important; background: #fff !important;
    }
    html body.is-nova #tm24-home-header .tm24-header-cart .shop-icon-link { min-width: 0; min-height: 40px; justify-content: center; }
    html body.is-nova #tm24-home-header .tm24-header-cart-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
    html body.is-nova #tm24-home-header .tm24-cart-count { top: -7px; left: auto; right: -7px; }
    html body.is-nova .tm24-topbar.shop-topbar { display: none !important; }
}
@media (max-width: 359px) {
    html body.is-nova #tm24-home-header .tm24-pill-nav { width: max-content !important; }
    html body.is-nova #tm24-home-header .tm24-pill { padding: 7px 5px !important; font-size: 12px !important; }
}
html body.is-nova #tm24-home-header .shop-search-input {
    background: #fff !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    border-radius: var(--hy-r-s) !important;
    color: var(--hy-ink);
}
html body.is-nova #tm24-home-header .shop-search-input:focus {
    border-color: var(--hy-electric) !important;
    box-shadow: var(--hy-ring) !important;
    outline: none;
}
/* Kategorienleiste: ruhige Textnavigation, aktive Seite unterstrichen */
html body.is-nova .shop-megamenu { background: #fff; border-bottom: 1px solid var(--hy-line); }
html body.is-nova .shop-megamenu-link { color: var(--hy-ink); font-weight: 700; }
html body.is-nova .shop-megamenu-link:hover,
html body.is-nova .shop-megamenu-link[aria-current="page"] { color: var(--hy-electric); }
@media (max-width: 767px) {
    /* Mobil: Suche ueber die volle Breite der zweiten Kopfzeile (16 px verhindert iOS-Zoom) */
    html body.is-nova #tm24-home-header .tm24-header-center,
    html body.is-nova #tm24-home-header .shop-search,
    html body.is-nova #tm24-home-header .shop-search-input { width: 100% !important; max-width: none !important; }
    html body.is-nova #tm24-home-header .shop-search-input { min-height: 44px !important; height: 44px !important; font-size: 16px !important; }
}

/* ---------- Buttons ---------- */
html body.is-nova #main-wrapper .btn { border-radius: var(--hy-r-s) !important; font-weight: 700; }
html body.is-nova #main-wrapper .btn-primary {
    background: var(--hy-electric) !important;
    border-color: var(--hy-electric) !important;
    color: #fff !important;
    min-height: 48px;
    box-shadow: none !important;
}
html body.is-nova #main-wrapper .btn-primary:hover,
html body.is-nova #main-wrapper .btn-primary:focus { background: var(--hy-blue) !important; border-color: var(--hy-blue) !important; }
html body.is-nova #main-wrapper .btn-primary:disabled,
html body.is-nova #main-wrapper .btn-primary.disabled { background: var(--hy-line-strong) !important; border-color: var(--hy-line-strong) !important; color: var(--hy-muted) !important; }
html body.is-nova #main-wrapper :is(.btn-outline-primary, .btn-secondary, .btn-outline-secondary) {
    background: #fff !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    color: var(--hy-ink) !important;
}
html body.is-nova #main-wrapper :is(.btn-outline-primary, .btn-secondary, .btn-outline-secondary):hover {
    border-color: var(--hy-electric) !important;
    color: var(--hy-electric) !important;
}

/* ---------- Formularfelder ---------- */
html body.is-nova #main-wrapper :is(.form-control, .custom-select, select.form-control, .bootstrap-select > .dropdown-toggle) {
    background-color: #fff !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    border-radius: var(--hy-r-s) !important;
    color: var(--hy-ink) !important;
    min-height: 48px;
    box-shadow: none !important;
}
html body.is-nova #main-wrapper :is(.form-control, .custom-select, .bootstrap-select > .dropdown-toggle):focus,
html body.is-nova #main-wrapper .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--hy-electric) !important;
    box-shadow: var(--hy-ring) !important;
}
html body.is-nova #main-wrapper .has-error :is(.form-control, .custom-select),
html body.is-nova #main-wrapper :is(.form-control, .custom-select).is-invalid { border-color: var(--hy-stop) !important; }
html body.is-nova #main-wrapper .form-error-msg { color: var(--hy-stop); font-weight: 600; }
html body.is-nova #main-wrapper label, html body.is-nova #main-wrapper .col-form-label { color: var(--hy-ink); font-weight: 600; }
html body.is-nova #main-wrapper .custom-control-label::before { border: 1.5px solid var(--hy-line-strong); }
html body.is-nova #main-wrapper .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hy-electric) !important;
    border-color: var(--hy-electric) !important;
}
html body.is-nova #main-wrapper .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: var(--hy-ring); }
html body.is-nova #main-wrapper .bootstrap-select .dropdown-menu { border: 1px solid var(--hy-line); border-radius: var(--hy-r-s); box-shadow: var(--hy-lift); }
html body.is-nova #main-wrapper .bootstrap-select .dropdown-item:hover,
html body.is-nova #main-wrapper .bootstrap-select .dropdown-item.active,
html body.is-nova #main-wrapper .bootstrap-select .dropdown-item:active { background: var(--hy-ice) !important; color: var(--hy-ink) !important; }

/* ---------- Karten, Hinweise, Brotkrumen, Blaettern ---------- */
html body.is-nova #main-wrapper :is(.card, .card-gray, .min-h-card) {
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
}
html body.is-nova #main-wrapper .alert { border-radius: var(--hy-r-s); border: 0; font-weight: 500; }
html body.is-nova #main-wrapper .alert-info { background: var(--hy-ice); color: var(--hy-blue); }
html body.is-nova #main-wrapper .alert-success { background: var(--hy-ok-bg); color: var(--hy-ok); }
html body.is-nova #main-wrapper .alert-warning { background: var(--hy-warn-bg); color: var(--hy-warn); }
html body.is-nova #main-wrapper .alert-danger { background: var(--hy-stop-bg); color: var(--hy-stop); }
html body.is-nova #main-wrapper .breadcrumb { background: transparent !important; padding-left: 0; font-size: 14px; }
html body.is-nova #main-wrapper .breadcrumb-item, html body.is-nova #main-wrapper .breadcrumb-item a { color: var(--hy-muted); }
html body.is-nova #main-wrapper .breadcrumb-item.active, html body.is-nova #main-wrapper .breadcrumb-item:last-child { color: var(--hy-ink); font-weight: 600; }
html body.is-nova #main-wrapper .pagination .page-link {
    border: 1px solid var(--hy-line) !important;
    border-radius: 10px !important;
    margin: 0 3px;
    color: var(--hy-ink) !important;
    min-width: 40px;
    text-align: center;
}
html body.is-nova #main-wrapper .pagination .page-item.active .page-link { background: var(--hy-navy) !important; border-color: var(--hy-navy) !important; color: #fff !important; }
html body.is-nova #main-wrapper .badge-primary { background: var(--hy-electric); }

/* ---------- Listen: Kategorie, Hersteller, Suche (data-page 2) ---------- */
html body.is-nova[data-page="2"] #main-wrapper #content > h1,
html body.is-nova[data-page="2"] #main-wrapper .productlist-header h1,
html body.is-nova[data-page="2"] #main-wrapper #result-wrapper h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 8px 0 16px;
}
html body.is-nova[data-page="2"] #main-wrapper h1::after { display: none !important; }
html body.is-nova #main-wrapper #sidepanel_left .box,
html body.is-nova #main-wrapper #sidepanel_left .box-categories {
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
}
html body.is-nova #main-wrapper #sidepanel_left .box-categories .nav-link { color: var(--hy-ink); border-radius: 10px; }
html body.is-nova #main-wrapper #sidepanel_left .box-categories .nav-link.active,
html body.is-nova #main-wrapper #sidepanel_left .box-categories .active > .nav-link {
    background: var(--hy-ice) !important;
    color: var(--hy-electric) !important;
    font-weight: 700;
    border-left: 0 !important;
    box-shadow: none !important;
}
html body.is-nova #main-wrapper #sidepanel_left .box-categories .nav-link.dropdown-toggle::after,
html body.is-nova #main-wrapper #sidepanel_left .btn-filter-box.dropdown-toggle::after { background-color: transparent !important; }
/* Unterkategorien als klare Wegweiser */
html body.is-nova #main-wrapper .content-cats-small { row-gap: 12px; margin-bottom: 24px; }
html body.is-nova #main-wrapper .content-cats-small > [class*="col"] > div,
html body.is-nova #main-wrapper .content-cats-small .sub-categories {
    height: 100%;
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body.is-nova #main-wrapper .content-cats-small > [class*="col"] > div:hover,
html body.is-nova #main-wrapper .content-cats-small .sub-categories:hover { border-color: var(--hy-electric) !important; box-shadow: var(--hy-lift) !important; }
html body.is-nova #main-wrapper .content-cats-small a { color: var(--hy-ink); font-weight: 700; text-decoration: none; }
/* Sortieren/Filtern und aktive Filter */
html body.is-nova #main-wrapper .productlist-page-nav { border-bottom: 1px solid var(--hy-line); padding-bottom: 12px; margin-bottom: 16px; }
html body.is-nova #main-wrapper .active-filters .btn,
html body.is-nova #main-wrapper .js-filter-item.active,
html body.is-nova #main-wrapper .filter-item.active {
    background: var(--hy-ice) !important;
    border: 1.5px solid var(--hy-electric) !important;
    color: var(--hy-electric) !important;
    border-radius: 999px !important;
}
/* Produktkarte: Bildbuehne, klarer Name, Preis als Anker */
html body.is-nova #main-wrapper .productbox,
html body.is-nova #main-wrapper .productbox-inner {
    background: #fff !important;
}
html body.is-nova #main-wrapper .product-wrapper .productbox {
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    height: 100%;
}
html body.is-nova #main-wrapper .product-wrapper .productbox:hover,
html body.is-nova #main-wrapper .product-wrapper .productbox:focus-within { border-color: var(--hy-electric) !important; box-shadow: var(--hy-lift) !important; }
html body.is-nova #main-wrapper .productbox .productbox-media { background: #fff !important; }
html body.is-nova #main-wrapper .productbox .productbox-details { padding: 12px 14px 16px; }
html body.is-nova #main-wrapper .productbox .tm24-brand {
    color: var(--hy-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 2px;
}
html body.is-nova #main-wrapper .productbox .productbox-title,
html body.is-nova #main-wrapper .productbox .productbox-title a {
    color: var(--hy-ink) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
html body.is-nova #main-wrapper .productbox .price,
html body.is-nova #main-wrapper .productbox .productbox-price {
    color: var(--hy-navy) !important;
    font-family: var(--hy-display) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -.01em;
}
html body.is-nova #main-wrapper .productbox .footnote-reference { color: var(--hy-muted); font-weight: 600; }
html body.is-nova #main-wrapper .tm24-avail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
html body.is-nova #main-wrapper .tm24-avail--ok { background: var(--hy-ok-bg); color: var(--hy-ok); }
html body.is-nova #main-wrapper .tm24-avail--out { background: var(--hy-stop-bg); color: var(--hy-stop); }
/* Top-Artikel-Slider */
html body.is-nova #main-wrapper #slider-top-products .hr-sect,
html body.is-nova #main-wrapper .product-slider-wrapper .hr-sect { font-family: var(--hy-display); font-weight: 800; color: var(--hy-ink); }
html body.is-nova #main-wrapper #slider-top-products .hr-sect::before,
html body.is-nova #main-wrapper #slider-top-products .hr-sect::after { background: var(--hy-line) !important; }
html body.is-nova #main-wrapper #slider-top-products .productbox-image,
html body.is-nova #main-wrapper #slider-top-products .square-image,
html body.is-nova #main-wrapper #slider-top-products .product-wrapper,
html body.is-nova #main-wrapper .product-slider-wrapper .square-image { background: #fff !important; }
html body.is-nova #main-wrapper #slider-top-products .price { color: var(--hy-navy) !important; font-weight: 800; }
/* Wirklich leere Kategorie (nur noch ohne Produkte, Unterkategorien, Suche oder Filter) */
html body.is-nova #main-wrapper .tm24-empty-cat { text-align: center; padding: 40px 16px 8px; }
html body.is-nova #main-wrapper .tm24-empty-cat__icon {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hy-ice); color: var(--hy-electric); font-size: 24px;
}
html body.is-nova #main-wrapper .tm24-empty-cat h2 { font-size: 22px; margin: 0 0 8px; }
html body.is-nova #main-wrapper .tm24-empty-cat p { color: var(--hy-muted); max-width: 480px; margin: 0 auto 20px; line-height: 1.6; }
html body.is-nova #main-wrapper .tm24-empty-cat__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
html body.is-nova #main-wrapper .tm24-empty-cat__links a {
    padding: 8px 16px; border: 1.5px solid var(--hy-line-strong); border-radius: 999px;
    color: var(--hy-ink); font-weight: 700; font-size: 14px; text-decoration: none;
}
html body.is-nova #main-wrapper .tm24-empty-cat__links a:hover { border-color: var(--hy-electric); color: var(--hy-electric); }
html body.is-nova #main-wrapper .tm24-empty-cat__title { font-weight: 800; margin: 8px 0 16px; }
html body.is-nova #main-wrapper .tm24-empty-cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding-bottom: 32px; }
html body.is-nova #main-wrapper .tm24-empty-cat__grid:empty { display: none; }
html body.is-nova #main-wrapper .tm24-fallback-card { border: 1px solid var(--hy-line); border-radius: var(--hy-r); overflow: hidden; background: #fff; }
html body.is-nova #main-wrapper .tm24-fallback-card a { display: block; color: inherit; text-decoration: none; }
html body.is-nova #main-wrapper .tm24-fallback-card__img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
html body.is-nova #main-wrapper .tm24-fallback-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
html body.is-nova #main-wrapper .tm24-fallback-card__body { padding: 12px 14px 16px; border-top: 1px solid var(--hy-line); }
html body.is-nova #main-wrapper .tm24-fallback-card__brand { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--hy-muted); text-transform: uppercase; }
html body.is-nova #main-wrapper .tm24-fallback-card__name { font-size: 14px; font-weight: 700; color: var(--hy-ink); line-height: 1.35; }
html body.is-nova #main-wrapper .tm24-fallback-card__price { font-family: var(--hy-display); font-size: 18px; font-weight: 800; color: var(--hy-navy); margin-top: 6px; }
/* Suche ohne Treffer: Hinweis und Suchformular als ein Block */
html body.is-nova #main-wrapper #suche2 { max-width: 560px; }

/* ---------- Produktdetail (data-page 1) ----------
   Die Altregeln sind hier ID-basiert (#product-offer ...) und mit !important gesetzt;
   deshalb traegt dieser Abschnitt bewusst zwei IDs. */
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-gallery {
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    padding: 16px !important;
    box-shadow: none !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-gallery :is(#image_wrapper, .gallery-with-action, #gallery, .square-image, .square-image .inner) {
    background: #fff !important;
    border-radius: var(--hy-r-s) !important;
    padding: 0 !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-headline .product-title,
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-title {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-family: var(--hy-display) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
    color: var(--hy-ink) !important;
    margin: 0 0 12px !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-title::after { display: none !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .info-essential { color: var(--hy-muted); font-size: 14px; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .info-essential li { padding: 2px 0; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer :is(.price_wrapper .price, .price_wrapper .price span, .price) {
    color: var(--hy-navy) !important;
    font-family: var(--hy-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .price_wrapper .price { font-size: clamp(30px, 4vw, 40px) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer :is(.price-note, .vat_info) { color: var(--hy-muted) !important; font-size: 13px !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations dt { font-weight: 800; color: var(--hy-ink); margin-bottom: 6px; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations .bootstrap-select > .dropdown-toggle,
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations .bootstrap-select.form-control > .dropdown-toggle,
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations select.custom-select {
    border: 1.5px solid var(--hy-line-strong) !important;
    border-radius: var(--hy-r-s) !important;
    background: #fff !important;
    color: var(--hy-ink) !important;
    min-height: 52px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations .bootstrap-select.show > .dropdown-toggle,
html body.is-nova[data-page="1"] #main-wrapper #product-offer .variations .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--hy-electric) !important;
    box-shadow: var(--hy-ring) !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .alert.choose-variations { background: var(--hy-ice) !important; color: var(--hy-blue) !important; border: 0 !important; border-radius: var(--hy-r-s) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .delivery-status .status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px !important; border-radius: 999px !important; font-weight: 700; font-size: 14px;
    border: 0 !important; box-shadow: none !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer .delivery-status .status-2 { background: var(--hy-ok-bg) !important; color: var(--hy-ok) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .delivery-status .status-1 { background: var(--hy-warn-bg) !important; color: var(--hy-warn) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .delivery-status .status-0 { background: var(--hy-stop-bg) !important; color: var(--hy-stop) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .estimated-delivery { color: var(--hy-muted); font-size: 14px; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer #add-to-cart .btn.btn-primary,
html body.is-nova[data-page="1"] #main-wrapper #product-offer #add-to-cart [name="inWarenkorb"] {
    min-height: 56px !important;
    font-size: 17px !important;
    border-radius: var(--hy-r-s) !important;
    background: var(--hy-electric) !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body.is-nova[data-page="1"] #main-wrapper #product-offer #add-to-cart .btn.btn-primary:hover { background: var(--hy-blue) !important; }
html body.is-nova #main-wrapper :is(.form-counter, .qty-wrapper) .btn {
    background: #fff !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    color: var(--hy-ink) !important;
}
html body.is-nova #main-wrapper :is(.form-counter, .qty-wrapper) .form-control { text-align: center; font-weight: 700; }
html body.is-nova[data-page="1"] #main-wrapper .nav-tabs { border-bottom: 1px solid var(--hy-line) !important; }
html body.is-nova[data-page="1"] #main-wrapper .nav-tabs .nav-link { border: 0 !important; color: var(--hy-muted) !important; font-weight: 700; background: transparent !important; border-radius: 0 !important; }
html body.is-nova[data-page="1"] #main-wrapper .nav-tabs .nav-link.active { color: var(--hy-ink) !important; box-shadow: inset 0 -3px 0 var(--hy-electric) !important; }
html body.is-nova[data-page="1"] #main-wrapper #product-offer .gpsr-compliance { color: var(--hy-muted); font-size: 13px; }

/* Kaufbox: Variante, Preis, Verfuegbarkeit, Zustand und Warenkorb als eine Karte (native .product-offer) */
html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-info .product-offer {
    background: #fff;
    border: 1px solid var(--hy-line);
    border-radius: var(--hy-r);
    padding: 20px;
    margin-top: 8px;
}
@media (max-width: 575.98px) {
    html body.is-nova[data-page="1"] #main-wrapper #product-offer .product-info .product-offer { padding: 16px; margin-left: -4px; margin-right: -4px; }
}
/* Zustandskasten: vorhandener Beschreibungsabschnitt "Artikelzustand" (productdetails/details.tpl + js/tm24-pdp.js) */
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-condition {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border-radius: var(--hy-r-s);
    background: var(--hy-ice);
    color: var(--hy-ink);
}
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-condition__title { margin: 0 0 6px; font: 800 15px/1.3 var(--hy-ui); color: var(--hy-blue); }
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-condition__list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-condition__list li { margin: 2px 0; }
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-condition__list li::marker { color: var(--hy-electric); }
/* Kerndaten unter der Kaufbox: ruhig und klein, GPSR-Angaben folgen dem Plugin-Anker */
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-facts {
    margin-top: 16px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--hy-line);
    color: var(--hy-muted);
    font-size: 14px;
}
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-facts .info-essential { margin-bottom: 8px; }
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-facts .info-essential li { padding: 2px 0; }
html body.is-nova[data-page="1"] #main-wrapper .tm24-pdp-facts .gpsr-compliance { font-size: 13px; margin-top: 4px; }
/* Mobile Kaufleiste (js/tm24-pdp.js): Preis + nativer Warenkorb-Knopf, nur wenn dieser aus dem Bild ist */
html body.is-nova .tm24-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--hy-line);
    box-shadow: 0 -8px 24px rgba(6, 18, 46, .10);
}
html body.is-nova .tm24-buybar[hidden] { display: none !important; }
html body.is-nova .tm24-buybar__price { flex: 0 0 auto; max-width: 45%; font: 800 20px/1.1 var(--hy-display); color: var(--hy-navy); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.is-nova .tm24-buybar__button {
    flex: 1 1 auto; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--hy-r-s);
    background: var(--hy-electric); color: #fff; font: 800 16px/1.2 var(--hy-ui); cursor: pointer;
}
html body.is-nova .tm24-buybar__button:hover { background: var(--hy-blue); }
html body.is-nova.tm24-has-buybar { padding-bottom: 76px; }
html body.is-nova.tm24-has-buybar #consent-settings-btn { bottom: 86px !important; }
@media (min-width: 992px) { html body.is-nova .tm24-buybar { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    html body.is-nova .tm24-buybar:not([hidden]) { animation: tm24BuybarIn .22s cubic-bezier(.16, 1, .3, 1); }
    @keyframes tm24BuybarIn { from { transform: translateY(100%); } to { transform: none; } }
}

/* ---------- Warenkorb (data-page 3) und Mini-Warenkorb ---------- */
html body.is-nova #main-wrapper .basket-heading { font-family: var(--hy-display); font-weight: 800; letter-spacing: -.02em; }
html body.is-nova #main-wrapper .basket .cart-items-header { color: var(--hy-muted) !important; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--hy-line); }
html body.is-nova #main-wrapper .basket .cart-items-body { border-bottom: 1px solid var(--hy-line); padding: 16px 0; }
html body.is-nova #main-wrapper .basket .cart-items-name a { color: var(--hy-ink); font-weight: 700; }
html body.is-nova #main-wrapper .basket .cart-items-price,
html body.is-nova #main-wrapper .basket .price_overall,
html body.is-nova #main-wrapper .basket .total-sum { color: var(--hy-navy) !important; font-weight: 800; }
html body.is-nova #main-wrapper .basket-summary { padding: 20px; }
html body.is-nova #main-wrapper .basket-summary .basket-summary-total { font-family: var(--hy-display); font-size: 22px; }
html body.is-nova #main-wrapper .basket-summary .basket-summary-total .price_label { font-family: var(--hy-ui); font-size: 16px; font-weight: 700; overflow-wrap: normal; word-break: normal; hyphens: manual; }
html body.is-nova #main-wrapper .basket-empty { text-align: center; padding: 32px 16px; }
html body.is-nova #main-wrapper .cart-dropdown { border-radius: var(--hy-r) !important; border: 1px solid var(--hy-line) !important; box-shadow: var(--hy-lift) !important; }
html body.is-nova #main-wrapper .cart-dropdown-total-item-price { color: var(--hy-navy); font-weight: 800; }
/* JTL misst den ausgeblendeten NOVA-Kopf. Die tatsaechliche Shopkopfhoehe
   wird in layout/header.tpl gemessen, damit Summe und Kassenknopf frei bleiben. */
html body.is-nova #main-wrapper .basket .cart-summary { top: calc(var(--tm24-shop-header-height, 144px) + 16px) !important; }
html body.is-nova #main-wrapper .basket .basket-summary { background: #fff !important; border: 1px solid var(--hy-line) !important; border-radius: var(--hy-r) !important; box-shadow: none !important; }
html body.is-nova #main-wrapper .basket #cart-checkout-btn { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; margin-top: 12px; font-size: 17px; font-weight: 800; border-radius: var(--hy-r-s); background: var(--hy-electric); border: 0; }
/* Mobile Kassenleiste (basket/index.tpl + js/tm24-cart.js): Zwischensumme + Link zur Kasse */
html body.is-nova .tm24-cartbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--hy-line);
    box-shadow: 0 -8px 24px rgba(6, 18, 46, .10);
}
html body.is-nova .tm24-cartbar.is-hidden { display: none; }
html body.is-nova .tm24-cartbar__sum { display: flex; flex-direction: column; min-width: 0; }
html body.is-nova .tm24-cartbar__label { font-size: 12px; font-weight: 700; color: var(--hy-muted); }
html body.is-nova .tm24-cartbar__value { font: 800 20px/1.1 var(--hy-display); color: var(--hy-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.is-nova .tm24-cartbar__button {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
    border-radius: var(--hy-r-s); background: var(--hy-electric); color: #fff !important; font: 800 16px/1.2 var(--hy-ui); text-decoration: none !important;
}
html body.is-nova .tm24-cartbar__button:hover { background: var(--hy-blue); }
html body.is-nova.tm24-has-cartbar { padding-bottom: 76px; }
html body.is-nova.tm24-has-cartbar #consent-settings-btn { bottom: 86px !important; }
@media (min-width: 992px) {
    html body.is-nova .tm24-cartbar { display: none !important; }
    html body.is-nova.tm24-has-cartbar { padding-bottom: 0; }
}

/* ---------- Checkout: Schrittleiste, waehlbare Flaechen, Zusammenfassung ---------- */
html body.is-nova #main-wrapper .checkout-steps { border-bottom: 1px solid var(--hy-line); margin-bottom: 24px; padding-bottom: 8px; }
html body.is-nova #main-wrapper .checkout-steps .step { color: var(--hy-muted); }
html body.is-nova #main-wrapper .checkout-steps .step .badge-pill { background: var(--hy-line-strong) !important; color: var(--hy-ink) !important; }
html body.is-nova #main-wrapper .checkout-steps .step-active .badge-pill { background: var(--hy-electric) !important; color: #fff !important; }
html body.is-nova #main-wrapper .checkout-steps .step-current { color: var(--hy-ink); font-weight: 800; }
html body.is-nova #main-wrapper .checkout-steps .step-check { color: var(--hy-ok); }
/* Schritt 1: zwei klare Wege (checkout/step0_login_or_register.tpl), Sprungmarken zu den nativen Bereichen */
html body.is-nova #main-wrapper .tm24-checkout-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
html body.is-nova #main-wrapper .tm24-checkout-choice__item {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 64px;
    border: 1.5px solid var(--hy-line-strong); border-radius: var(--hy-r); background: #fff;
    color: var(--hy-ink) !important; text-decoration: none !important;
}
html body.is-nova #main-wrapper .tm24-checkout-choice__item strong { font: 800 17px/1.25 var(--hy-ui); }
html body.is-nova #main-wrapper .tm24-checkout-choice__item span { font-size: 14px; color: var(--hy-muted); }
html body.is-nova #main-wrapper .tm24-checkout-choice__item.is-primary { border-color: var(--hy-electric); background: var(--hy-ice); }
html body.is-nova #main-wrapper .tm24-checkout-choice__item:hover { border-color: var(--hy-electric); }
html body.is-nova #main-wrapper :is(#customer, #existing-customer) { scroll-margin-top: calc(var(--tm24-shop-header-height, 144px) + 16px); }
@media (max-width: 575.98px) { html body.is-nova #main-wrapper .tm24-checkout-choice { grid-template-columns: 1fr; } }
/* Fehler direkt am Feld deutlich: Feld mit Hinweisfarbe, Meldung mit Zeichen (native .form-error-msg bleibt) */
html body.is-nova #main-wrapper .has-error :is(.form-control, .custom-select) { background-color: #FFF8F7 !important; box-shadow: 0 0 0 3px rgba(180, 35, 27, .12) !important; }
html body.is-nova #main-wrapper .form-error-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 14px; }
html body.is-nova #main-wrapper .form-error-msg::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--hy-stop); color: #fff; font: 800 12px/18px var(--hy-ui); text-align: center; }
/* Versand- und Zahlarten: Auswahl als Flaeche, ausgewaehlt in Eisblau */
html body.is-nova #main-wrapper :is(.checkout-shipping-form-options, .checkout-payment-method) .custom-control {
    border: 1.5px solid var(--hy-line-strong);
    border-radius: var(--hy-r-s);
    padding: 14px 14px 14px 44px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
html body.is-nova #main-wrapper :is(.checkout-shipping-form-options, .checkout-payment-method) .custom-control:has(.custom-control-input:checked) {
    border-color: var(--hy-electric);
    background: var(--hy-ice);
}
html body.is-nova #main-wrapper :is(.checkout-shipping-form-options, .checkout-payment-method) .custom-control-label { width: 100%; font-weight: 700; }
html body.is-nova #main-wrapper :is(.checkout-shipping-form-options-specific-cost, .checkout-payment-method-note) { color: var(--hy-muted); font-weight: 500; }
html body.is-nova #main-wrapper .checkout-payment-method-badge { border-radius: 999px; }
html body.is-nova #main-wrapper .cart-summary { padding: 20px; }
html body.is-nova #main-wrapper .checkout-confirmation :is(.card, .checkout-confirmation-billing-address, .checkout-confirmation-shipping) { border-radius: var(--hy-r); }
html body.is-nova #main-wrapper .checkout-confirmation-heading { font-family: var(--hy-display); font-weight: 800; }
html body.is-nova #main-wrapper .checkout-confirmation-change { font-weight: 700; }
html body.is-nova #main-wrapper .order-submit .btn-primary,
html body.is-nova #main-wrapper .checkout-button-row .btn-primary { min-height: 56px; font-size: 17px; }
html body.is-nova #main-wrapper .checkout-confirmation-legal-notice { color: var(--hy-muted); font-size: 14px; }

/* ---------- Konto, Anmeldung, Registrierung, Passwort (4, 10, 14) ---------- */
html body.is-nova #main-wrapper #login_form,
html body.is-nova #main-wrapper #password-reset-form,
html body.is-nova #main-wrapper form[name="password-reset"],
html body.is-nova #main-wrapper #new_customer {
    background: #fff;
    border: 1px solid var(--hy-line);
    border-radius: var(--hy-r);
    padding: 24px;
}
html body.is-nova #main-wrapper :is(#login_form, #new_customer) h2,
html body.is-nova #main-wrapper :is(#login_form, #new_customer) .h2 { font-size: 24px; }
html body.is-nova[data-page="10"] #main-wrapper fieldset,
html body.is-nova[data-page="4"] #main-wrapper fieldset { border: 0; padding: 0; margin-bottom: 24px; }
html body.is-nova[data-page="10"] #main-wrapper legend,
html body.is-nova[data-page="4"] #main-wrapper legend { font-family: var(--hy-display); font-weight: 800; font-size: 20px; color: var(--hy-ink); }
html body.is-nova #main-wrapper .account-sidebar .nav-link,
html body.is-nova #main-wrapper #account .list-group-item { border-radius: 10px; color: var(--hy-ink); }
html body.is-nova #main-wrapper #account .list-group-item.active,
html body.is-nova #main-wrapper .account-sidebar .nav-link.active { background: var(--hy-ice) !important; color: var(--hy-electric) !important; border-color: transparent !important; }
html body.is-nova #main-wrapper .table { color: var(--hy-ink); }
html body.is-nova #main-wrapper .table thead th { border-bottom: 1px solid var(--hy-line) !important; color: var(--hy-muted); font-size: 13px; }
html body.is-nova #main-wrapper .table td, html body.is-nova #main-wrapper .table th { border-top: 1px solid var(--hy-line) !important; }

/* ---------- Info- und Rechtsseiten, Sitemap, Kontakt, 404 ---------- */
html body.is-nova #main-wrapper .index-heading-wrapper h1,
html body.is-nova #main-wrapper .link-content h1 { font-size: clamp(28px, 4vw, 42px); margin: 16px 0 20px; }
html body.is-nova #main-wrapper .link-content {
    max-width: 78ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--hy-ink);
}
html body.is-nova #main-wrapper .link-content :is(h2, h3) { margin-top: 1.8em; }
html body.is-nova #main-wrapper .link-content .well,
html body.is-nova #main-wrapper .link-content [class*="Haendlerbund_Rechtstext"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body.is-nova #main-wrapper .link-content table { width: 100%; border-collapse: collapse; }
html body.is-nova #main-wrapper .link-content :is(td, th) { border-bottom: 1px solid var(--hy-line); padding: 8px 6px; vertical-align: top; }
html body.is-nova[data-page="25"] #main-wrapper .sitemap a,
html body.is-nova[data-page="25"] #main-wrapper #content a { color: var(--hy-ink); }
html body.is-nova[data-page="25"] #main-wrapper #content a:hover { color: var(--hy-electric); }
html body.is-nova[data-page="36"] #main-wrapper #content h1 { font-size: clamp(32px, 5vw, 48px); }

/* ---------- Startseite (data-page 18): Wellen an den weissen Grund anpassen ---------- */
html body.is-nova #main-wrapper :is(.tm24-home-hero__wave, .tm24-elegant-wave) { background: #fff !important; }
html body.is-nova #main-wrapper :is(.tm24-hero--blue, .tm24-split-wave, .tm24-glass-wave, .tm24-minimal-wave)::after { background: #fff !important; }
html body.is-nova #main-wrapper .tm-catpill { background: #fff; border: 1.5px solid var(--hy-line-strong); }

html body.is-nova .footer-wrapper { background: transparent !important; }

/* ---------- Hybrid-Anker: Startseiten-Hero, Kacheln, Kartenpreise, mobile Suche ---------- */
/* Mobile Suche: das Suchfeld steckt im JTL-Wrapper .twitter-typeahead, der auf Inhaltsbreite schrumpfte. */
html body.is-nova #tm24-home-header .shop-search > .twitter-typeahead { flex: 1 1 auto !important; width: 100% !important; min-width: 0; }
/* Startseiten-Hero: Navy-Buehne wie Verkaufen statt Lila-Verlauf, Punktmuster und Welle */
html body.is-nova .tm24-shop-hero {
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(0, 57, 232, .55) 0%, rgba(0, 57, 232, 0) 60%),
        linear-gradient(160deg, #0A1F4D 0%, var(--hy-navy) 70%) !important;
    padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px) !important;
    text-align: left !important;
}
html body.is-nova .tm24-shop-hero::before,
html body.is-nova .tm24-shop-hero::after { display: none !important; }
html body.is-nova .tm24-shop-hero__inner { max-width: 1180px !important; padding: 0 24px !important; }
html body.is-nova .tm24-shop-hero__title {
    font-family: var(--hy-display) !important;
    font-weight: 800 !important;
    font-size: clamp(34px, 5.4vw, 64px) !important;
    letter-spacing: -.03em !important;
    line-height: 1.04 !important;
    max-width: 16ch;
    margin: 0 0 16px !important;
}
html body.is-nova .tm24-shop-hero__sub { margin: 0 !important; max-width: 56ch !important; color: rgba(255, 255, 255, .86) !important; }
html body.is-nova .tm24-shop-hero__badges { justify-content: flex-start !important; gap: 8px !important; margin-top: 24px !important; }
html body.is-nova .tm24-shop-hero__badge {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    font-size: 13px !important; padding: 6px 12px !important;
}
html body.is-nova .tm24-shop-hero__badge i { color: #7CE3A8 !important; filter: none !important; font-size: 15px !important; }
html body.is-nova .tm24-shop-hero__cta {
    background: #fff !important;
    color: var(--hy-navy) !important;
    -webkit-text-fill-color: var(--hy-navy) !important;
    border-radius: var(--hy-r-s) !important;
    padding: 0 28px !important;
    min-height: 52px;
    font-size: 17px !important;
    box-shadow: none !important;
}
html body.is-nova .tm24-shop-hero__cta:hover,
html body.is-nova .tm24-shop-hero__cta:focus-visible { background: var(--hy-ice) !important; }
/* Startseiten-Kacheln und Abschnittskoepfe */
html body.is-nova .tm24-hs-tile {
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
    transition: border-color .15s ease;
}
html body.is-nova .tm24-hs-tile:hover { border-color: var(--hy-electric) !important; transform: none !important; }
html body.is-nova .tm24-hs-tile-title { color: var(--hy-ink) !important; font-weight: 800 !important; }
html body.is-nova .tm24-hs-tile-sub { color: var(--hy-muted) !important; }
html body.is-nova :is(.tm24-hs-title, .tm24-home-head h2, .tm24-home-head .h2) { font-family: var(--hy-display) !important; letter-spacing: -.02em; color: var(--hy-ink) !important; }
html body.is-nova .tm24-cardstyle { box-shadow: none !important; border: 1px solid var(--hy-line) !important; border-radius: var(--hy-r) !important; }
/* Produktkarten: Preis-Span und Bildflaechen der Altregeln */
html body.is-nova #main-wrapper .productbox :is(.price span, .productbox-price span) {
    color: var(--hy-navy) !important;
    font-family: var(--hy-display) !important;
    font-weight: 800 !important;
}
html body.is-nova #main-wrapper .productbox :is(.productbox-images, .productbox-slide, .square-image, .square-image .inner, .productbox-image) { background: #fff !important; }
html body.is-nova #main-wrapper .productbox-inner,
html body.is-nova #main-wrapper .product-wrapper .productbox { box-shadow: none !important; }
html body.is-nova #main-wrapper .product-wrapper .productbox:hover { box-shadow: var(--hy-lift) !important; }
/* Kategorien-Seitenleiste: ruhige Liste */
html body.is-nova #main-wrapper #sidepanel_left .box-categories .nav-link { font-size: 14px; padding-top: 8px; padding-bottom: 8px; border-bottom-color: var(--hy-line) !important; }
html body.is-nova #main-wrapper #sidepanel_left :is(.box-title, .productlist-filter-headline) { color: var(--hy-muted) !important; letter-spacing: .08em; }

/* Unterkategorien sind auf Oberkategorien der einzige Weg zum Bestand (JTL listet dort keine
   direkt zugeordneten Artikel). custom.css blendete sie mit display:none !important aus. */
html body.is-nova #main-wrapper .content-cats-small {
    display: flex !important;
    flex-wrap: wrap;
    margin: 8px -6px 28px !important;
    row-gap: 12px;
}
html body.is-nova #main-wrapper .content-cats-small > [class*="col"] { padding: 0 6px; margin-bottom: 0 !important; }
html body.is-nova #main-wrapper .content-cats-small .sub-categories {
    background: #fff !important;
    border: 1px solid var(--hy-line) !important;
    border-radius: var(--hy-r) !important;
    box-shadow: none !important;
    padding: 14px 16px;
    height: 100%;
    transition: border-color .15s ease;
}
html body.is-nova #main-wrapper .content-cats-small .sub-categories:hover,
html body.is-nova #main-wrapper .content-cats-small .sub-categories:focus-within { border-color: var(--hy-electric) !important; }
html body.is-nova #main-wrapper .content-cats-small .caption { text-align: left !important; margin: 0 !important; }
html body.is-nova #main-wrapper .content-cats-small .caption a { color: var(--hy-ink) !important; font-weight: 800; font-size: 16px; text-decoration: none; display: block; }
html body.is-nova #main-wrapper .content-cats-small .caption a::after { content: " \2192"; color: var(--hy-electric); }
html body.is-nova #main-wrapper .content-cats-small hr { display: none !important; }
html body.is-nova #main-wrapper .content-cats-small ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
html body.is-nova #main-wrapper .content-cats-small ul a { color: var(--hy-muted) !important; font-size: 13px; text-decoration: none; }
html body.is-nova #main-wrapper .content-cats-small ul a:hover { color: var(--hy-electric) !important; text-decoration: underline; }
@media (max-width: 767px) {
    html body.is-nova #main-wrapper .content-cats-small > [class*="col"] { flex: 0 0 50%; max-width: 50%; }
    html body.is-nova #main-wrapper .content-cats-small .sub-categories { padding: 12px 14px; }
    html body.is-nova #main-wrapper .content-cats-small .caption a { font-size: 15px; }
}

/* Unterkategorie-Pillen (snippets/tm24_catpills.tpl) ersetzen per Skript das JTL-Raster.
   custom.css und tm24-category-premium.css blendeten auch sie aus -> Oberkategorien ohne Weg zum Bestand.
   Hier sichtbar als Auswahlflaechen; die Zahl an Unterkategorie-Pillen zaehlt Unterkategorien, nicht Artikel,
   und wird deshalb nicht gezeigt. */
html body.is-nova #main-wrapper .tm24-catpills-wrap {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 4px 0 24px !important;
}
html body.is-nova #main-wrapper .tm24-catpills-row { padding: 0 !important; gap: 8px !important; max-width: none !important; }
html body.is-nova #main-wrapper .tm24-catpill {
    background: #fff !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    color: var(--hy-ink) !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}
html body.is-nova #main-wrapper .tm24-catpill:hover { border-color: var(--hy-electric) !important; color: var(--hy-electric) !important; background: #fff !important; }
html body.is-nova #main-wrapper .tm24-catpill.is-open,
html body.is-nova #main-wrapper .tm24-catpill[aria-current="page"] { background: var(--hy-navy) !important; border-color: var(--hy-navy) !important; color: #fff !important; }
html body.is-nova #main-wrapper .tm24-catpills-wrap:not(#tm24-api-tabs) .tm24-catpill__count { display: none !important; }
html body.is-nova #main-wrapper .tm24-catpills-panel {
    background: var(--hy-ice) !important;
    border: 0 !important;
    border-radius: var(--hy-r) !important;
    margin-top: 10px;
    padding: 12px !important;
    animation: none !important;
}
html body.is-nova #main-wrapper .tm24-catpills-panel::before { content: none !important; }
html body.is-nova #main-wrapper .tm24-catpill-chip {
    border-radius: 999px !important;
    border: 1.5px solid var(--hy-line-strong) !important;
    background: #fff !important;
    color: var(--hy-ink) !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 40px;
}
html body.is-nova #main-wrapper .tm24-catpill-chip:hover { border-color: var(--hy-electric) !important; color: var(--hy-electric) !important; }
html body.is-nova #main-wrapper .tm24-catpill-chip--all { background: var(--hy-navy) !important; border-color: var(--hy-navy) !important; color: #fff !important; }

/* Listen-Ueberschrift ohne alte Akzentlinie; Pfeil nur einmal im "Alle"-Chip */
html body.is-nova #main-wrapper #result-wrapper h1,
html body.is-nova #main-wrapper .category-header h1 { border-bottom: 0 !important; padding-bottom: 0 !important; display: block; }
html body.is-nova #main-wrapper .tm24-catpill-chip--all::before,
html body.is-nova #main-wrapper .tm24-catpill-chip--all::after { content: none !important; }

/* Rechts- und Infotexte: eine lesbare Spalte. Wortlaut unveraendert (Haendlerbund-Markup bleibt). */
html body.is-nova #main-wrapper :is(#tos, #data-privacy, #revocation-instruction, #online-revocation-form) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body.is-nova #main-wrapper :is(#tos, #data-privacy, #revocation-instruction, #online-revocation-form) > .container,
html body.is-nova #main-wrapper .container.link-content,
html body.is-nova #main-wrapper .index-heading-wrapper {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
html body.is-nova #main-wrapper :is(#tos, #data-privacy, #revocation-instruction, #online-revocation-form) > .container,
html body.is-nova #main-wrapper .container.link-content {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--hy-ink) !important;
    padding-bottom: 48px !important;
}
html body.is-nova #main-wrapper [class*="Haendlerbund_Rechtstext"] { font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
html body.is-nova #main-wrapper .Haendlerbund_Rechtstext_Titel strong { font-family: var(--hy-display); font-size: 22px; letter-spacing: -.01em; }
html body.is-nova #main-wrapper :is(.Haendlerbund_Rechtstext_Paragraph, .Haendlerbund_Rechtstext_Untertitel) strong { font-size: 18px; }
html body.is-nova #main-wrapper .index-heading-wrapper h1 { margin: 24px 0 20px !important; font-size: clamp(28px, 4vw, 42px) !important; }

/* Checkout-Schrittleiste: NOVA-Gelb (#F8BF00) der Fortschrittslinie in die Hybrid-Farben; Ueberschriften ohne Altlinie */
html body.is-nova #main-wrapper .checkout-steps .step .step-content::after { background: var(--hy-line-strong) !important; }
html body.is-nova #main-wrapper .checkout-steps .step-current .step-content::after { background: var(--hy-electric) !important; height: 3px !important; }
html body.is-nova #main-wrapper h1.h2 { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* ---------- Einwilligung: drei gleichwertige Wege, keine Vorauswahl ---------- */
html body.is-nova #consent-banner {
    border: 1px solid var(--hy-line);
    border-radius: var(--hy-r) var(--hy-r) 0 0;
    box-shadow: 0 -8px 32px rgba(6, 18, 46, .12);
    color: var(--hy-ink);
    font-family: var(--hy-ui);
}
html body.is-nova #consent-banner :is(.consent-banner-title, h2, .h2) { font-family: var(--hy-display); color: var(--hy-ink); }
html body.is-nova #consent-banner .btn,
html body.is-nova #consent-settings .btn {
    background: #fff !important;
    border: 1.5px solid var(--hy-navy) !important;
    color: var(--hy-navy) !important;
    border-radius: var(--hy-r-s) !important;
    font-weight: 700;
    min-height: 48px;
}
html body.is-nova #consent-banner .btn:hover,
html body.is-nova #consent-settings .btn:hover { background: var(--hy-ice) !important; }

@media (prefers-reduced-motion: reduce) {
    html body.is-nova * { transition: none !important; animation: none !important; }
}