/*
 * KaelteRechnerSW6 – Verdichter-Listen im Zielbild (Verdichter-UX Stufe 1: E1 Listenzeile,
 * E2 Kopfbereich, E3 „Nur ab Lager lieferbar“, E4 ohne „Tipp“).
 * Nur eingebunden bei verdichterListeAktiv = true UND nur auf Seiten, deren Produktliste die
 * Extension "kaelteVerdichterListe" trägt (base.html.twig, Block kaelte_verdichter_liste_assets).
 *
 * Geltungsbereich – nie global, alles mit Präfix kvl-:
 *   .kvl-col / .kvl-row …   Listenzeile (Spalte und Inhalt, component/kaelte-verdichter-liste/zeile)
 *   .kvl-head …             Kopfbereich über der Filterkarte (kopf.html.twig)
 *   .kvl-instock …          Schalter in der Filterkarte (ab-lager.html.twig)
 *   .kvl-note               Hinweis zur Lieferaussage unter der Liste
 * Spezifität: zenit/Core/Loyxx stehen bei (0,1,0)–(0,4,1); unsere Regeln liegen jeweils darüber
 * (meist .kvl-col/.kvl-row + zwei Klassen) und stehen zudem später im Dokument.
 *
 * Raster der Zeile über Container Queries auf der Karte (.kvl-col .product-box):
 *   ≥ 900 px  Bild | Info | Kennzahl + Lieferaussage | Preis + Kauf
 *   576–899   Bild | Info (oben), Kennzahl + Lieferaussage | Preis + Kauf (unten)
 *   < 576     72-px-Bild links, rechts untereinander: Name, Nummern, Merkmale als Textzeile,
 *             Lieferaussage, Preis + Warenkorb (Menge und Kennzahl ausgeblendet, Konzept §12)
 * Ohne Container Queries bleibt das Desktop-Raster (akzeptiert, Zielbild-Spez §2.2).
 *
 * Design-Tokens wie das Filterpanel 1.53.0. WCAG 2.1 AA (Zielbild-Spez §9, gerechnet):
 * #2E2E2E/#FFF 13,6:1 · #454444/#FFF 9,7:1 · #6B7480/#FFF 4,7:1 (nie auf grauem Grund) ·
 * #156F94/#FFF 5,6:1 · #1C6B35/#FFF 6,6:1 · A3 #7A2E00/#FFE0CC 7,6:1 · A2L #4D3900/#FFF1C2 9,8:1 ·
 * A1 #2E2E2E/#EEF1F4 12:1 · Mengenrand #878F9A 3,3:1. Zustände nie nur über Farbe
 * (Lager: gefüllter Punkt vs. Ring; gedrückt: Rahmen + Haken; Klasse: Text + Symbol).
 */

.kvl-col,
.kvl-head,
.kvl-instock,
.kvl-note,
.kvl-leer,
.kvl-hilfe {
    --kvl-primary: #156f94;
    --kvl-primary-hover: #0e4f6b;
    --kvl-primary-soft: #e3f5fd;
    --kvl-border: #c8cdd4;
    --kvl-border-ui: #878f9a;
    --kvl-card-border: #e0e4e8;
    --kvl-text: #2e2e2e;
    --kvl-text-2: #454444;
    --kvl-muted: #6b7480;
    --kvl-ok: #1c6b35;
    --kvl-a3-bg: #ffe0cc;
    --kvl-a3-fg: #7a2e00;
    --kvl-a2l-bg: #fff1c2;
    --kvl-a2l-fg: #4d3900;
    --kvl-a1-bg: #eef1f4;
    --kvl-focus: 0 0 0 2px #fff, 0 0 0 4px #156f94;
}

/* ================= Liste als eine Karte mit Trennlinien ================= */

/* Normalfall :has() – Zeilen in EINER weißen Karte. Getrennte Regeln, siehe unten (@supports). */
.cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0 0 1.5rem;
    border: 1px solid var(--kvl-card-border, #e0e4e8);
    border-radius: 8px;
    background: #fff;
}

.cms-element-product-listing .cms-listing-row:has(> .kvl-col):has(+ .kvl-note) {
    margin-bottom: 10px;
}

.cms-element-product-listing .cms-listing-row > .cms-listing-col.kvl-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Karte (Core-div .product-box, auf Live ggf. im Quickview-Wrapper) → Zeile ohne eigene Optik */
.cms-listing-col.kvl-col .card.product-box {
    container: kvl / inline-size;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--kvl-card-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
}

.cms-listing-col.kvl-col .card.product-box:hover,
.cms-listing-col.kvl-col .card.product-box:focus-within {
    border-color: var(--kvl-card-border);
    box-shadow: none;
    transform: none;
}

.cms-listing-row > .cms-listing-col.kvl-col:last-child .card.product-box {
    border-bottom: 0;
}

/* Ohne :has(): jede Zeile eine eigene Karte */
@supports not selector(:has(a)) {
    .cms-listing-col.kvl-col .card.product-box {
        margin-bottom: 8px;
        border: 1px solid var(--kvl-card-border);
        border-radius: 8px;
        background: #fff;
    }

    .cms-listing-row > .cms-listing-col.kvl-col:last-child .card.product-box {
        border-bottom: 1px solid var(--kvl-card-border);
    }
}

/* ================= E1 Zeile (Desktop ≥ 900 px Container) ================= */

.kvl-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(240px, 1.4fr);
    grid-template-areas: "img a b c";
    gap: 16px;
    align-items: start;
    padding: 16px;
    color: var(--kvl-text);
    font-size: .875rem;
    line-height: 1.4;
    text-align: left;
}

.kvl-row .kvl-img {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--kvl-card-border);
    border-radius: 6px;
    background: #fff;
}

.kvl-row .kvl-img img,
.kvl-row .kvl-img .kvl-img__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kvl-row .kvl-img__ph {
    display: block;
    width: 60%;
    color: var(--kvl-muted);
}

.kvl-row .kvl-a {
    grid-area: a;
    min-width: 0;
}

.kvl-row .kvl-h {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Name: 2 Zeilen, voller Name im title. Theme-Regeln für .product-name (Höhe, Clamp) neutralisieren */
.kvl-row .kvl-a .kvl-name.product-name {
    display: -webkit-box;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: var(--kvl-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.kvl-row .kvl-a .kvl-name.product-name:hover {
    color: var(--kvl-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kvl-row .kvl-a .kvl-name.product-name:focus-visible {
    outline: 2px solid transparent;
    border-radius: 2px;
    box-shadow: var(--kvl-focus);
}

.kvl-row .kvl-nums {
    margin-top: 2px;
    color: var(--kvl-muted);
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kvl-row .kvl-na {
    color: var(--kvl-muted);
}

/* ---------- Chips (max. 3) ---------- */

.kvl-row .kvl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kvl-row .kvl-sep {
    display: none;
}

.kvl-row .kvl-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--kvl-a1-bg);
    color: var(--kvl-text);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.kvl-row .kvl-chip__v {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.kvl-row .kvl-chip--ref {
    font-weight: 600;
}

.kvl-row .kvl-chip__code {
    font-weight: 700;
}

.kvl-row .kvl-chip__cls,
.kvl-row .kvl-chip__more {
    font-weight: 600;
}

.kvl-row .kvl-chip--a3,
.kvl-row .kvl-chip--b {
    background: var(--kvl-a3-bg);
    color: var(--kvl-a3-fg);
}

.kvl-row .kvl-chip--a2l,
.kvl-row .kvl-chip--warn {
    background: var(--kvl-a2l-bg);
    color: var(--kvl-a2l-fg);
}

.kvl-row .kvl-chip--missing {
    padding: 2px 7px;
    border: 1px dashed var(--kvl-border-ui);
    background: #fff;
    color: var(--kvl-text-2);
    font-weight: 500;
}

/* Symbole (Klasse, 60 Hz, gesperrt): Form trägt die Bedeutung zusammen mit dem Text */
.kvl-row .kvl-ico,
.kvl-head .kvl-ico {
    flex: none;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.kvl-row .kvl-ico--outline,
.kvl-head .kvl-ico--outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.kvl-row .kvl-ico--tri,
.kvl-head .kvl-ico--tri {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kvl-row .kvl-ico--lock {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* ---------- Spalte B: Kennzahl + Lieferaussage ---------- */

.kvl-row .kvl-b {
    grid-area: b;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--kvl-text-2);
    font-size: .8125rem;
    line-height: 1.4;
}

.kvl-row .kvl-fig b {
    color: var(--kvl-text);
    font-weight: 600;
}

.kvl-row .kvl-stock {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--kvl-text-2);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.35;
}

.kvl-row .kvl-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: .38em;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
}

/* auf Lager / lieferbar: gefüllter Punkt; Lieferzeit: Ring; ohne Termin: Ring gedämpft */
.kvl-row .kvl-stock--ok {
    color: var(--kvl-ok);
    font-weight: 600;
}

.kvl-row .kvl-stock--ok .kvl-dot {
    background: currentColor;
}

.kvl-row .kvl-stock--wait {
    color: var(--kvl-text-2);
}

.kvl-row .kvl-stock--muted {
    color: var(--kvl-muted);
}

.kvl-row .kvl-stock--off {
    align-items: center;
    color: var(--kvl-text-2);
    font-weight: 600;
}

.kvl-row .kvl-succ {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--kvl-primary);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.kvl-row .kvl-succ:hover {
    color: var(--kvl-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kvl-row .kvl-succ:focus-visible {
    outline: 2px solid transparent;
    border-radius: 2px;
    box-shadow: var(--kvl-focus);
}

/* ---------- Spalte C: Preis + Kauf ---------- */

.kvl-row .kvl-c {
    grid-area: c;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    text-align: right;
}

.kvl-row .kvl-pricebox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.kvl-row .kvl-price {
    color: var(--kvl-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Theme färbt .product-price hellblau (--price-color) – in der Zeile Textfarbe */
.kvl-row .kvl-price .product-price {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.kvl-row .kvl-price__from {
    font-size: .875rem;
    font-weight: 600;
}

.kvl-row .kvl-price--req {
    font-size: 1rem;
    font-weight: 600;
    white-space: normal;
}

.kvl-row .kvl-listprice {
    color: var(--kvl-text-2);
    font-size: .8125rem;
    line-height: 1.2;
}

.kvl-row .kvl-reg,
.kvl-row .kvl-meta {
    color: var(--kvl-text-2);
    font-size: .75rem;
    line-height: 1.35;
}

.kvl-row .kvl-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.kvl-row .kvl-meta .kvl-tax.product-price-tax-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kvl-text-2);
    font: inherit;
    font-size: .75rem;
    line-height: 1.35;
    text-align: right;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
    cursor: pointer;
}

.kvl-row .kvl-meta .kvl-tax.product-price-tax-link:hover {
    color: var(--kvl-text);
}

.kvl-row .kvl-meta .kvl-tax.product-price-tax-link:focus-visible {
    outline: 2px solid transparent;
    border-radius: 2px;
    box-shadow: var(--kvl-focus);
}

.kvl-row .kvl-buy.buy-widget {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.kvl-row .kvl-buy .kvl-qty {
    width: 56px;
    min-height: 40px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid var(--kvl-border-ui);
    border-radius: 5px;
    background: #fff;
    color: var(--kvl-text);
    font: inherit;
    font-size: 1rem; /* iOS: kein Auto-Zoom unter 16px */
    text-align: center;
    -moz-appearance: textfield;
}

.kvl-row .kvl-buy .kvl-qty:focus {
    border-color: var(--kvl-primary);
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

.kvl-row .kvl-buy .btn.btn-buy.kvl-cart {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kvl-primary);
    --bs-btn-border-color: var(--kvl-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kvl-primary-hover);
    --bs-btn-hover-border-color: var(--kvl-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kvl-primary-hover);
    --bs-btn-active-border-color: var(--kvl-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--kvl-muted);
    --bs-btn-disabled-border-color: var(--kvl-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    height: auto;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--kvl-primary);
    border-radius: 5px;
    background-color: var(--kvl-primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

.kvl-row .kvl-buy .btn.btn-buy.kvl-cart:hover,
.kvl-row .kvl-buy .btn.btn-buy.kvl-cart:active {
    border-color: var(--kvl-primary-hover);
    background-color: var(--kvl-primary-hover);
    color: #fff;
}

.kvl-row .kvl-buy .btn.btn-buy.kvl-cart:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

.kvl-row .kvl-linkbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--kvl-primary);
    border-radius: 5px;
    background: #fff;
    color: var(--kvl-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.kvl-row .kvl-linkbtn:hover {
    background: var(--kvl-primary-soft);
    color: var(--kvl-primary);
    text-decoration: none;
}

.kvl-row .kvl-linkbtn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

/* ---------- nicht bestellbar / ausgelaufen (Zielbild-Spez §8): grau, Grund bleibt weiß ---------- */

.kvl-row.kvl-row--off .kvl-img img {
    filter: grayscale(1);
    opacity: .55;
}

.kvl-row.kvl-row--off .kvl-a .kvl-name.product-name {
    color: var(--kvl-text-2);
}

/* ---------- Tablet: 576–899 px Container ---------- */

@container kvl (max-width: 899.98px) {
    .kvl-row {
        grid-template-columns: 92px minmax(0, 1fr) auto;
        grid-template-areas:
            "img a a"
            "img b c";
        gap: 12px 16px;
    }

    .kvl-row .kvl-c {
        max-width: 280px;
    }
}

/* ---------- Merkzettel / B2B-Merkliste / Trusted Shops (aus der Blockkette) ----------
   Markup kommt aus zenit/Core (wishlist.html.twig), SwagCommercial (B2B-Dropdown, trägt
   position-absolute z-2; der runde Merkzettel-Knopf ist im Core selbst absolut oben rechts in der
   Kachel) und der Trusted-Shops-App (.ts-rating). Hier nur die Lage in der Zeile.

   Merk-Knopf oben links auf der Bildecke, in Zeile, Kachel und mobil gleich (Ararat 29.10.: unter
   „In den Warenkorb" machte er die Zeile höher und stand abseits; mobil bekommt der Name die volle
   Breite). Im DOM bleibt er nach dem Kaufknopf: für Screenreader und Tab-Reihenfolge gehört er so
   zur eigenen Zeile und nicht zum Produkt davor. */
.kvl-row {
    position: relative;
}

.kvl-row .kvl-merken {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kvl-row .kvl-merken .product-wishlist,
.kvl-row .kvl-merken .product-wishlist-action-circle,
.kvl-row .kvl-merken .dropdown {
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

/* Der Core vergrößert die Klickfläche des Herz-Knopfs per ::before (absolut, 120 %). Bezugsrahmen
   muss der Knopf selbst sein: mit position: static oben rechnete das ::before gegen die ganze
   Produktkarte und lag als unsichtbare Fläche über „In den Warenkorb“ (Klick kam nie an,
   Rückmeldung Ararat 15.10.). */
.kvl-row .kvl-merken .product-wishlist-action-circle {
    position: relative !important;
}

.kvl-row .kvl-merken .b2b-shopping-list-button-add {
    min-width: 40px;
    min-height: 40px;
}

/* runde, helle Plakette über dem Bild; Klickfläche 40 px über das ::before des Core (mittig gesetzt,
   der Core rechnet es aus der Knopfgröße und schöbe es bei 32 px nach links oben) */
.kvl-row .kvl-merken .product-wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--kvl-card-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
}

.kvl-row .kvl-merken .product-wishlist-btn:hover {
    border-color: var(--kvl-primary);
}

.kvl-row .kvl-merken .product-wishlist-btn::before {
    inset: -4px;
    width: auto;
    height: auto;
}

/* Touch: Tippfläche 44 px (Projektvorgabe) */
@media (pointer: coarse) {
    .kvl-row .kvl-merken .product-wishlist-btn::before {
        inset: -6px;
    }
}

.kvl-row .ts-rating {
    margin-top: 4px;
}

/* Raster/Liste-Umschalter aus .customTemplate (listView()/gridView()): Die Verdichter-Listen
   zeigen immer Zeilen, der Umschalter bewirkt dort nichts (Rückmeldung Oumayma 14.10.). Diese
   Datei lädt nur auf Verdichter-Listen, andere Listen behalten ihn. */
#btnGridListContainer.custom-grid-list-view {
    display: none !important;
}

/* ---------- Mobil: < 576 px Container (MobileListe-Mockup, Konzept §12) ---------- */

@container kvl (max-width: 575.98px) {
    /* Kaufzeile (c) über die VOLLE Kartenbreite unter Bild und Text (Hendrik 08.10.: statt
       Knopf-Umbruch bei vierstelligen Preisen): bei 375 px ~310 px statt ~230 px, damit passen
       Preis (auch fünfstellig/„Ab …“) und „In den Warenkorb“ in eine Zeile. */
    .kvl-row {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "img a"
            "img b"
            "c c";
        gap: 4px 12px;
        padding: 14px 16px;
    }

    .kvl-row .kvl-img {
        width: 72px;
        height: 72px;
    }

    .kvl-row .kvl-a .kvl-name.product-name {
        font-size: .9375rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* Merkmale als eine Textzeile; Kältemittel fett in Klassenfarbe auf Weiß, mit Symbol */
    .kvl-row .kvl-chips {
        display: block;
        margin-top: 2px;
        font-size: .75rem;
        line-height: 1.45;
    }

    .kvl-row .kvl-chip,
    .kvl-row .kvl-chip--missing {
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        white-space: normal;
    }

    .kvl-row .kvl-chip__v {
        display: inline;
    }

    .kvl-row .kvl-chip .kvl-ico {
        display: inline-block;
        margin-right: 3px;
        vertical-align: -1px;
    }

    .kvl-row .kvl-chip--ref .kvl-chip__v {
        font-weight: 700;
    }

    .kvl-row .kvl-chip--a1,
    .kvl-row .kvl-chip--unknown,
    .kvl-row .kvl-chip--band,
    .kvl-row .kvl-chip--net {
        color: var(--kvl-text);
    }

    .kvl-row .kvl-chip--net.kvl-chip--warn {
        color: var(--kvl-a2l-fg);
        font-weight: 600;
    }

    .kvl-row .kvl-chip__long {
        display: none;
    }

    .kvl-row .kvl-sep {
        display: inline;
        color: var(--kvl-text-2);
    }

    .kvl-row .kvl-fig {
        display: none;
    }

    .kvl-row .kvl-b {
        gap: 2px;
    }

    /* Preis links, Warenkorb rechts in einer Zeile; Streichpreis darüber, Zuvor-/Steuer-/
       Staffelhinweis darunter über die volle Breite. Die Preisbox gibt ihre Kinder an die
       Flex-Zeile ab (display: contents an einem div ohne Rolle – keine Semantik geht verloren).
       Der Preis hat Vorrang (Pflichtangabe, WCAG 1.4.10): er schrumpft nie und wird nie
       überdeckt. Passen Preis und Knopf trotz voller Breite nicht nebeneinander (nur noch bei
       320 px mit langen Knopftexten in EN/FR), rutscht der Knopf in eine eigene Zeile, rechts;
       ist er selbst breiter als die Spalte, bricht sein Text um. */
    .kvl-row .kvl-c {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 8px;
        max-width: none;
        margin-top: 4px;
        text-align: left;
    }

    .kvl-row .kvl-pricebox {
        display: contents;
    }

    .kvl-row .kvl-listprice {
        flex: 0 0 100%;
        order: 0;
    }

    .kvl-row .kvl-price {
        flex: 0 0 auto;
        order: 1;
        max-width: 100%;
    }

    .kvl-row .kvl-price--req {
        flex: 0 1 auto;
        min-width: 0;
    }

    .kvl-row .kvl-c > .kvl-buy,
    .kvl-row .kvl-c > .kvl-linkbtn {
        flex: 0 1 auto;
        order: 2;
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
    }

    .kvl-row .kvl-reg {
        flex: 0 0 100%;
        order: 3;
    }

    /* 20 px: Preis ist mobil das wichtigste Kaufsignal (Rückmeldung Ararat 15.10.); die Kaufzeile
       läuft über die volle Breite, fünfstellig + Knopf passen bei 375 px noch in eine Zeile. */
    .kvl-row .kvl-price {
        font-size: 1.25rem;
    }

    .kvl-row .kvl-meta {
        flex: 0 0 100%;
        order: 4;
        align-items: flex-start;
    }

    /* 12 px statt 14 px Innenabstand: dreistellige Preise passen bei 375 px (Rubik) noch
       neben „In den Warenkorb“; ab vierstellig rutscht der Knopf in die nächste Zeile. */
    .kvl-row .kvl-buy .btn.btn-buy.kvl-cart,
    .kvl-row .kvl-linkbtn {
        max-width: 100%;
        padding: 0 12px;
        white-space: normal;
    }

    .kvl-row .kvl-meta .kvl-tax.product-price-tax-link {
        text-align: left;
    }

    /* Menge mobil ausgeblendet – das Feld wird trotzdem mit minPurchase übermittelt */
    .kvl-row .kvl-buy .kvl-qty {
        display: none;
    }

    .kvl-row .kvl-buy .btn.btn-buy.kvl-cart,
    .kvl-row .kvl-linkbtn {
        min-height: 44px;
    }

    .kvl-row .kvl-succ {
        min-height: 44px;
    }
}

/* ================= E2 Kopfbereich ================= */

.kvl-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--kvl-text);
}

/* ---------- Hermetik-Umschalter: Links in <nav>, aktuelle Seite aria-current ---------- */

.kvl-head .kvl-herm {
    max-width: 100%;
}

.kvl-head .kvl-herm__list {
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kvl-head .kvl-herm__item {
    margin: 0;
    padding: 0;
}

.kvl-head .kvl-herm__item + .kvl-herm__item {
    margin-left: -1px;
}

/* bewusst kein overflow:hidden auf der Liste – er schnitte den Fokusring ab */
.kvl-head .kvl-herm__seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--kvl-border);
    border-radius: 0;
    background: #fff;
    color: var(--kvl-text);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.kvl-head .kvl-herm__item:first-child .kvl-herm__seg {
    border-radius: 6px 0 0 6px;
}

.kvl-head .kvl-herm__item:last-child .kvl-herm__seg {
    border-radius: 0 6px 6px 0;
}

.kvl-head .kvl-herm__seg:hover {
    z-index: 1;
    border-color: var(--kvl-primary);
    background: var(--kvl-primary-soft);
    color: var(--kvl-text);
    text-decoration: none;
}

.kvl-head .kvl-herm__seg[aria-current="page"] {
    z-index: 1;
    border-color: var(--kvl-primary);
    background: var(--kvl-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.kvl-head .kvl-herm__seg:focus-visible {
    z-index: 2;
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

/* ---------- Kältemittel-Schnellchips ---------- */

.kvl-head .kvl-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.kvl-head .kvl-ref__label {
    margin-right: 4px;
    color: var(--kvl-text-2);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.kvl-head .kvl-ref__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.kvl-head .kvl-rchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--kvl-a1-bg);
    color: var(--kvl-text);
    font: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease;
}

.kvl-head .kvl-rchip--a3,
.kvl-head .kvl-rchip--b {
    background: var(--kvl-a3-bg);
    color: var(--kvl-a3-fg);
}

.kvl-head .kvl-rchip--a2l {
    background: var(--kvl-a2l-bg);
    color: var(--kvl-a2l-fg);
}

.kvl-head .kvl-rchip__v {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kvl-head .kvl-rchip__code {
    font-size: .875rem;
    font-weight: 700;
}

.kvl-head .kvl-rchip__cls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 500;
}

.kvl-head .kvl-rchip__check {
    display: none;
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--kvl-primary);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kvl-head .kvl-rchip:hover {
    border-color: var(--kvl-muted);
}

/* gedrückt: Rahmen + Haken (Form UND Farbe); teilweise (mixed): gestrichelter Rahmen + Haken */
.kvl-head .kvl-rchip[aria-pressed="true"],
.kvl-head .kvl-rchip[aria-pressed="mixed"] {
    border-color: var(--kvl-primary);
}

.kvl-head .kvl-rchip[aria-pressed="mixed"] {
    border-style: dashed;
}

.kvl-head .kvl-rchip[aria-pressed="true"] .kvl-rchip__check,
.kvl-head .kvl-rchip[aria-pressed="mixed"] .kvl-rchip__check {
    display: block;
}

.kvl-head .kvl-rchip[aria-pressed="true"]:hover,
.kvl-head .kvl-rchip[aria-pressed="mixed"]:hover {
    border-color: var(--kvl-primary-hover);
}

.kvl-head .kvl-rchip:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

/* gesperrt: nur ungedrückt, wenn die Panel-Checkbox keine Treffer mehr hätte. Inaktive
   Bedienelemente sind von der Kontrastregel ausgenommen; der Text hält trotzdem 5,1:1
   (#616975 auf #F4F5F7 – #6B7480 hätte dort nur 4,3:1) */
.kvl-head .kvl-rchip[aria-disabled="true"] {
    border-color: transparent;
    background: #f4f5f7;
    color: #616975;
    cursor: not-allowed;
}

.kvl-head .kvl-rchip[aria-disabled="true"] .kvl-ico {
    display: none;
}

.kvl-head .kvl-rchip[hidden],
.kvl-head .kvl-ref[hidden] {
    display: none !important;
}

@media (pointer: coarse) {
    .kvl-head .kvl-herm__seg,
    .kvl-head .kvl-rchip {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .kvl-head {
        align-items: stretch;
    }

    .kvl-head .kvl-herm__list {
        display: flex;
        width: 100%;
    }

    .kvl-head .kvl-herm__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .kvl-head .kvl-herm__seg {
        width: 100%;
        min-height: 44px;
        padding: 0 8px;
        white-space: normal;
    }

    .kvl-head .kvl-ref {
        display: block;
    }

    .kvl-head .kvl-ref__label {
        display: block;
        margin: 0 0 2px;
        font-size: .75rem;
    }

    /* Zwei gleich breite Spalten statt einer abgeschnittenen Scroll-Zeile (Ararat 30.10.); bei ungerader
       Zahl nimmt der letzte Chip die ganze Breite (jede Reihe voll). 2 px Polster für den Fokusring. */
    .kvl-head .kvl-ref__chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 2px 0;
    }

    .kvl-head .kvl-ref__chips > .kvl-rchip:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .kvl-head .kvl-rchip {
        justify-content: center;
        min-width: 0;
        min-height: 44px;
        padding: 0 8px;
        white-space: normal;
    }
}

@media (forced-colors: active) {
    .kvl-head .kvl-herm__seg[aria-current="page"] {
        outline: 2px solid CanvasText;
        text-decoration: underline;
    }

    .kvl-head .kvl-rchip[aria-pressed="true"],
    .kvl-head .kvl-rchip[aria-pressed="mixed"] {
        outline: 2px solid CanvasText;
    }
}

/* ================= E3 „Nur ab Lager lieferbar“ ================= */

.kvl-instock {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    color: var(--kvl-text);
    font-size: .875rem;
    line-height: 1.3;
}

.kvl-instock .kvl-instock__input.form-check-input {
    flex: none;
    float: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--kvl-muted);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}

.kvl-instock .kvl-instock__input.form-check-input:checked {
    border-color: var(--kvl-primary);
    background-color: var(--kvl-primary);
}

.kvl-instock .kvl-instock__input.form-check-input:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

.kvl-instock .kvl-instock__label {
    margin: 0;
    color: var(--kvl-text);
    font-weight: 400;
    cursor: pointer;
}

.kvl-instock .kvl-instock__input.form-check-input:disabled {
    opacity: 1;
    border-color: var(--kvl-border-ui);
    background-color: #f4f5f7;
    cursor: not-allowed;
}

.kvl-instock .kvl-instock__input:disabled + .kvl-instock__label {
    opacity: 1;
    color: var(--kvl-muted);
    cursor: not-allowed;
}

/* Desktop: Filterkarte wird eine Zeile mit Umbruch – Filterknöpfe links, Schalter oben rechts,
   Aktiv-Chips darunter über die volle Breite. (0,5,0) schlägt die Kartenregeln des Panels. */
.filter-panel-wrapper > .filter-panel:not(.is--sidebar):has(> .kfp):has(> .kvl-instock) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 16px;
}

.filter-panel-wrapper > .filter-panel:not(.is--sidebar):has(> .kvl-instock) > .kfp {
    flex: 1 1 0;
    min-width: 0;
}

.filter-panel-wrapper > .filter-panel:not(.is--sidebar):has(> .kvl-instock) > .kvl-instock {
    flex: none;
    align-self: flex-start;
}

.filter-panel-wrapper > .filter-panel:not(.is--sidebar):has(> .kvl-instock) > .filter-panel-active-container {
    flex: 1 1 100%;
}

/* Mobil im Filterblatt: eigene Zeile nach den Gruppen (DOM-Reihenfolge = Fokusreihenfolge) */
.offcanvas-filter .kvl-instock {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    padding: 0 4px;
    border-bottom: 1px solid #e0e4e8;
    font-size: .9375rem;
    font-weight: 600;
}

.offcanvas-filter .kvl-instock .kvl-instock__label {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 4px 0;
    font-weight: 600;
}

/* Trefferfläche = die ganze Zeile: Das Label selbst ist mindestens so hoch wie die Zeile
   (44 px bei Touch, 48 px im Blatt), und sein ::after legt sich über den Wrapper, damit auch
   ein Tipp neben bzw. über/unter der 20-px-Checkbox umschaltet (ein Klick auf das
   Pseudo-Element zählt als Klick aufs Label). Der Wrapper selbst hat keinen Klick-Handler. */
.kvl-instock {
    position: relative;
}

.kvl-instock .kvl-instock__label {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.kvl-instock .kvl-instock__label::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (pointer: coarse) {
    .kvl-instock,
    .kvl-instock .kvl-instock__label {
        min-height: 44px;
    }

    .offcanvas-filter .kvl-instock,
    .offcanvas-filter .kvl-instock .kvl-instock__label {
        min-height: 48px;
    }
}

/* ================= Hinweis zur Lieferaussage ================= */

.kvl-note {
    max-width: 75ch;
    margin: 0 0 1.5rem;
    color: #454444;
    font-size: .75rem;
    line-height: 1.45;
}

/* ================= Hilfe-Wege (Entwurf Lukas „Verdichter Kategorieseiten v2“, 20.10.) =================
   .kvl-leer   Kasten bei 0 Treffern: Anfrage statt Sackgasse
   .kvl-hilfe  Band unter der Liste: Ersatz | Projekt | Beratung (dunkel), mobil untereinander */

.kvl-leer {
    margin: 0 0 1.25rem;
    padding: 20px 22px;
    border: 1px solid var(--kvl-card-border);
    border-top: 3px solid var(--kvl-primary);
    border-radius: 5px;
    background: #fff;
    text-align: center;
}

.kvl-leer .kvl-leer__t {
    margin: 0 0 6px;
    color: var(--kvl-text);
    font-size: 1.0625rem;
    font-weight: 700;
}

.kvl-leer .kvl-leer__p {
    max-width: 60ch;
    margin: 0 auto 14px;
    color: var(--kvl-text-2);
    font-size: .875rem;
    line-height: 1.5;
}

.kvl-leer .kvl-leer__a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 5px;
    background: var(--kvl-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.kvl-leer .kvl-leer__a:hover {
    background: var(--kvl-primary-hover);
    color: #fff;
}

/* Band nach der Seitennavigation wie im Entwurf: Die Navigation folgt im DOM nach dem Band (anderer
   Block), deshalb ordnet der Listing-Container per Flex-Spalte um. Nur wenn das Band da ist. */
.cms-element-product-listing:has(> .kvl-hilfe) {
    display: flex;
    flex-direction: column;
}

.cms-element-product-listing > .kvl-hilfe {
    order: 1;
}

.kvl-hilfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    margin: .5rem 0 1.5rem;
    border: 1px solid var(--kvl-card-border);
    border-radius: 5px;
    background: var(--kvl-card-border);
    overflow: hidden;
}

.kvl-hilfe .kvl-hilfe__k {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: #f7f9fb;
}

.kvl-hilfe .kvl-hilfe__t {
    margin: 0;
    color: var(--kvl-text);
    font-size: .9375rem;
    font-weight: 700;
}

.kvl-hilfe .kvl-hilfe__p {
    flex: 1;
    margin: 0;
    color: var(--kvl-text-2);
    font-size: .875rem;
    line-height: 1.5;
}

.kvl-hilfe .kvl-hilfe__a {
    color: var(--kvl-primary);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.kvl-hilfe .kvl-hilfe__a:hover {
    color: var(--kvl-primary-hover);
    text-decoration: underline;
}

.kvl-hilfe .kvl-hilfe__k--dunkel {
    background: #2e2e2e;
}

.kvl-hilfe .kvl-hilfe__k--dunkel .kvl-hilfe__t,
.kvl-hilfe .kvl-hilfe__k--dunkel .kvl-hilfe__tel {
    color: #fff;
}

.kvl-hilfe .kvl-hilfe__k--dunkel .kvl-hilfe__p {
    color: #d5dade;
}

.kvl-hilfe .kvl-hilfe__tel {
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.kvl-hilfe .kvl-hilfe__k--dunkel .kvl-hilfe__a {
    color: #8fd3f5;
}

.kvl-hilfe a:focus-visible,
.kvl-leer a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kvl-focus);
}

/* ================= Bewegung ================= */

@media (prefers-reduced-motion: reduce) {
    .kvl-head .kvl-herm__seg,
    .kvl-head .kvl-rchip {
        transition: none;
    }
}



/* ================= Ansicht Liste | Kacheln (Rückmeldung Lukas 20.10.) =================
   Umschalter im Kopf neben dem Hermetik-Umschalter. html.kvl-kacheln setzt das Inline-Skript im Kopf
   (vor dem Zeichnen der Liste) bzw. kaelte-verdichter-liste.js beim Klick. Die Kachel ist dieselbe
   Zeile (gleiches Markup, gleiche Kaufform), nur anders angeordnet: Bild oben, Text, Kaufzeile unten. */

.kvl-head .kvl-head__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    width: 100%;
}

.kvl-head .kvl-ansicht {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--kvl-border-ui);
    border-radius: 6px;
    overflow: hidden;
}

.kvl-head .kvl-ansicht__b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    background: #fff;
    color: var(--kvl-text);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.kvl-head .kvl-ansicht__b + .kvl-ansicht__b {
    border-left: 1px solid var(--kvl-border-ui);
}

.kvl-head .kvl-ansicht__b svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.kvl-head .kvl-ansicht__b[aria-pressed="true"] {
    background: var(--kvl-primary);
    color: #fff;
}

.kvl-head .kvl-ansicht__b:focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--kvl-primary);
}

@media (max-width: 767.98px), (pointer: coarse) {
    .kvl-head .kvl-ansicht__b {
        min-height: 44px;
    }
}

/* ---------- Kachelansicht ---------- */

html.kvl-kacheln .cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html.kvl-kacheln .cms-element-product-listing .cms-listing-row > .cms-listing-col.kvl-col {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
}

html.kvl-kacheln .cms-listing-col.kvl-col .card.product-box,
html.kvl-kacheln .cms-listing-row > .cms-listing-col.kvl-col:last-child .card.product-box {
    height: 100%;
    border: 1px solid var(--kvl-card-border);
    border-radius: 8px;
    background: #fff;
}

html.kvl-kacheln .cms-listing-col.kvl-col .card.product-box:hover {
    border-color: var(--kvl-border);
}

/* Spezifität (0,2,1) und mehr: schlägt die Zeilen-Raster aus den Container Queries (0,1,0). */
html.kvl-kacheln .kvl-row {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "img"
        "a"
        "b"
        "c";
    gap: 8px;
    padding: 12px;
}

html.kvl-kacheln .kvl-row .kvl-img {
    width: 100%;
    height: 160px;
    padding: 8px;
    border: 0;
}

html.kvl-kacheln .kvl-row .kvl-c {
    align-self: end;
}

/* Kaufknopf über die volle Kachelbreite unter dem Preis */
html.kvl-kacheln .kvl-row .kvl-c > .kvl-buy,
html.kvl-kacheln .kvl-row .kvl-c > .kvl-linkbtn {
    flex: 1 1 100%;
    margin-left: 0;
}

html.kvl-kacheln .kvl-row .kvl-buy .btn.btn-buy.kvl-cart {
    flex: 1 1 auto;
    width: 100%;
}

/* Hinweis unter dem Knopf („Preise inkl. MwSt. …“, „Staffelpreise ab …“) ist mal ein-, mal zweizeilig; weil die
   Kaufzeile unten bündig sitzt, standen die Knöpfe sonst versetzt (Rückmeldung Ararat 30.10.: min-height 35px). */
html.kvl-kacheln .kvl-row .kvl-meta {
    min-height: 35px;
}

/* Ohne Hinweis (nicht lieferbar, nur „Zum Produkt“) denselben Platz frei lassen (35 px + 4 px Zeilenabstand der
   Kaufzeile), sonst steht dieser Knopf tiefer */
html.kvl-kacheln .kvl-row .kvl-c:not(:has(.kvl-meta)) {
    padding-bottom: 39px;
}

/* Mobil zwei Kacheln nebeneinander (wie die bisherige Kachelliste) */
@media (max-width: 575.98px) {
    html.kvl-kacheln .cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html.kvl-kacheln .kvl-row {
        padding: 10px;
    }

    html.kvl-kacheln .kvl-row .kvl-img {
        height: 120px;
        padding: 4px;
    }

    html.kvl-kacheln .kvl-row .kvl-price {
        font-size: 1.0625rem;
    }

    /* Zubehör-Hinweis passt in die schmale Kachel nicht (abgeschnitten); die Produktseite zeigt den
       Abschnitt „Passendes Zubehör“ ohnehin. */
    html.kvl-kacheln .kvl-row .kvl-a .kvzb-zeile {
        display: none;
    }

    html.kvl-kacheln .kvl-row .kvl-buy .btn.btn-buy.kvl-cart,
    html.kvl-kacheln .kvl-row .kvl-linkbtn {
        padding: 0 8px;
        font-size: .8125rem;
    }
}

/* ================= Übrige Kategorielisten (KategorieZeileSubscriber, .kvl-row--allg) =================
   Lukas 30.10.2026: „zu einfach“ – statt grauer Pillen eine Kennzahlen-Leiste mit Bezeichnung über dem Wert und
   den Symbolen der Produktseite, darüber die Marke, rechts der konkrete Staffelvorteil. Die Verdichter-Zeile
   trägt weder .kvl-row--allg noch Marke, Leiste oder Staffelvorteil und bleibt unverändert. */

.kvl-row .kvl-brand {
    margin: 0 0 2px;
    color: var(--kvl-primary);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.kvl-row .kvl-specs {
    grid-area: s;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    justify-self: start;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--kvl-card-border);
    border-radius: 8px;
    background: var(--kvl-card-border);
}

.kvl-row .kvl-specs--n1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 240px;
}

.kvl-row .kvl-specs--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
}

.kvl-row .kvl-spec {
    min-width: 0;
    padding: 8px 12px 9px;
    background: #f7f9fb;
}

.kvl-row .kvl-spec__l {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--kvl-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
}

.kvl-row .kvl-spec__t {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kvl-row .kvl-spec__l .kpdp-sicon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--kvl-primary);
}

.kvl-row .kvl-spec__v {
    margin: 3px 0 0;
    color: var(--kvl-text);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Konkreter Staffelvorteil unter dem Preis: „ab 10 Stück: 29,50 € −8 %“ */
.kvl-row .kvl-meta .kvl-tier {
    color: var(--kvl-ok);
    font-weight: 600;
}

/* Mindestabnahme > 1: „Mindestmenge 100 · 1.779,00 €“ – was der Knopf wirklich in den Korb legt */
.kvl-row .kvl-meta .kvl-min {
    color: var(--kvl-text);
    font-weight: 600;
}

.kvl-row .kvl-tier__pct {
    display: inline-block;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 4px;
    background: #e3f4e8;
    color: var(--kvl-ok);
    font-weight: 700;
}

.cms-listing-col.kvl-col .card.product-box:has(.kvl-row--allg) {
    transition: background-color .15s ease;
}

.cms-listing-col.kvl-col .card.product-box:has(.kvl-row--allg):hover {
    background: #fbfcfd;
}

/* Desktop: Leiste unter Name und Lieferaussage über beide Spalten, größeres Bild */
@container kvl (min-width: 900px) {
    .kvl-row.kvl-row--allg {
        grid-template-columns: 112px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(240px, 1.4fr);
        grid-template-areas:
            "img a b c"
            "img s s c";
        row-gap: 12px;
    }

    .kvl-row.kvl-row--allg .kvl-img {
        width: 112px;
        height: 112px;
    }
}

/* Tablet */
@container kvl (min-width: 576px) and (max-width: 899.98px) {
    .kvl-row.kvl-row--allg {
        grid-template-areas:
            "img a a"
            "img s s"
            "img b c";
    }
}

/* Mobil: Leiste über die volle Breite zwischen Lieferaussage und Kaufzeile */
@container kvl (max-width: 575.98px) {
    .kvl-row.kvl-row--allg {
        grid-template-areas:
            "img a"
            "img b"
            "s s"
            "c c";
    }

    /* Schmal (Handy und jede Kachel): Leiste als Liste „Bezeichnung … Wert“ – drei Zellen à ~100 px schnitten
       „Ausgangsleistung“ ab, Silbentrennung ist nicht in jedem Browser verfügbar */
    .kvl-row .kvl-specs,
    .kvl-row .kvl-specs--n1,
    .kvl-row .kvl-specs--n2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
        margin-top: 8px;
    }

    .kvl-row .kvl-spec {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 5px 8px;
    }

    .kvl-row .kvl-spec__l {
        flex: 1 1 auto;
        min-width: 0;
        align-self: center;
    }

    .kvl-row .kvl-spec__l .kpdp-sicon {
        width: 13px;
        height: 13px;
    }

    .kvl-row .kvl-spec__v {
        flex: 0 1 auto;
        margin: 0;
        font-size: .8125rem;
        text-align: right;
    }
}

/* Kacheln: Leiste unter dem Namen (Darstellung als Liste kommt aus der Regel für schmale Zeilen oben) */
html.kvl-kacheln .kvl-row.kvl-row--allg {
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
        "img"
        "a"
        "s"
        "b"
        "c";
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-specs {
    margin-top: 0;
}

@media (forced-colors: active) {
    .kvl-row .kvl-specs,
    .kvl-row .kvl-spec {
        border: 1px solid CanvasText;
    }

    .kvl-row .kvl-tier__pct {
        border: 1px solid CanvasText;
    }
}

/* ---------- Übrige Kategorielisten: ansprechender (Lukas 30.10.2026, „nah am Standard“) ----------
   Bild auf hellem Grund (weiße Produktfotos gehen per multiply im Grund auf), Lagerzustand als Plakette,
   größerer Preis, Kachel hebt sich beim Überfahren leicht ab. Nur .kvl-row--allg, Verdichter unverändert. */

.kvl-row.kvl-row--allg .kvl-img {
    border: 0;
    border-radius: 10px;
    background: #f3f6f8;
}

.kvl-row.kvl-row--allg .kvl-img img,
.kvl-row.kvl-row--allg .kvl-img .kvl-img__img {
    mix-blend-mode: multiply;
}

.kvl-row.kvl-row--allg .kvl-stock {
    align-self: flex-start;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: #eef1f4;
    font-size: .8125rem;
    line-height: 1.35;
}

.kvl-row.kvl-row--allg .kvl-stock--ok {
    background: #e6f4ea;
}

.kvl-row.kvl-row--allg .kvl-stock .kvl-dot {
    margin-top: .32em;
}

@container kvl (min-width: 576px) {
    .kvl-row.kvl-row--allg .kvl-price {
        font-size: 1.375rem;
        letter-spacing: -.01em;
    }
}

html.kvl-kacheln .cms-listing-col.kvl-col .card.product-box:has(.kvl-row--allg) {
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html.kvl-kacheln .cms-listing-col.kvl-col .card.product-box:has(.kvl-row--allg):hover {
    border-color: #c9d6df;
    box-shadow: 0 8px 24px rgba(16, 42, 60, .1);
}

@media (prefers-reduced-motion: no-preference) {
    html.kvl-kacheln .cms-listing-col.kvl-col .card.product-box:has(.kvl-row--allg):hover {
        transform: translateY(-2px);
    }
}

@media (min-width: 576px) {
    html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-img {
        height: 180px;
        padding: 14px;
    }
}

/* Handy, zwei Kacheln nebeneinander (~165 px): Bezeichnung über dem Wert, sonst „Pumpv… 102 L/Min“ und „A 3“ */
@media (max-width: 575.98px) {
    html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-spec {
        display: block;
        padding: 5px 7px;
    }

    html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-spec__v {
        margin-top: 1px;
        text-align: left;
    }
}

/* ---------- Kacheln ohne Ausreißer (Lukas 31.10.2026, Screenshot Chemie) ----------
   Vorher: leere Bildrahmen (Vorschaubild fehlt), Preise und Knöpfe je Kachel auf anderer Höhe (Hinweise unter dem
   Knopf ein- bis dreizeilig), Lieferaussage mal oben, mal unten, Kacheln ohne Marke rutschten nach oben.
   Jetzt: Knopf immer ganz unten, darüber Preis und Hinweise mit fester Mindesthöhe, darüber die Lieferaussage;
   oben Marke (auch leer), Name und Nummern mit fester Zeilenzahl. Die Liste bleibt unverändert. */

.kvl-row .kvl-brand--leer {
    display: none;
}

.kvl-row .kvl-img--leer img {
    display: none;
}

/* Platzhalter, wenn auch das Originalbild fehlt (Bildsymbol in Grau) */
.kvl-row .kvl-img--leer::after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: auto;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3adb7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5.5-5.5L6 20'/%3E%3C/svg%3E");
}

html.kvl-kacheln .kvl-row.kvl-row--allg {
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
        "img"
        "a"
        "s"
        "."
        "b"
        "c";
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-brand {
    min-height: 1.3em;
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-brand--leer {
    display: block;
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-a .kvl-name.product-name {
    min-height: calc(3 * 1.3em);
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-nums {
    display: -webkit-box;
    min-height: calc(2 * 1.4em);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Lieferaussage direkt über dem Preis, Platz auch ohne Aussage */
/* Kennzahlen untereinander: Bezeichnung über dem Wert – nebeneinander schnitt die Kachel „Anschluss“ und
   „Kältemittel“ ab, sobald der Wert lang ist („1/4" (6,4 mm) SAE“) */
html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-spec {
    display: block;
    padding: 5px 8px;
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-spec__v {
    margin-top: 1px;
    text-align: left;
}

html.kvl-kacheln .kvl-row.kvl-row--allg .kvl-b {
    justify-content: flex-end;
    min-height: 26px;
}

/* Preis, Staffel, Grundpreis und Steuerhinweis über dem Knopf; der Knopf schließt jede Kachel unten ab */
html.kvl-kacheln .kvl-row .kvl-c {
    align-self: end;
}

html.kvl-kacheln .kvl-row .kvl-reg {
    order: 2;
}

html.kvl-kacheln .kvl-row .kvl-meta {
    order: 3;
    justify-content: flex-start;
    min-height: calc(3 * 1.35em + 3px);
}

html.kvl-kacheln .kvl-row .kvl-c > .kvl-buy,
html.kvl-kacheln .kvl-row .kvl-c > .kvl-linkbtn {
    order: 5;
}

html.kvl-kacheln .kvl-row .kvl-c:not(:has(.kvl-meta)) {
    padding-bottom: 0;
}

/* Zwei Kacheln nebeneinander: Hinweise brechen öfter um */
@media (max-width: 575.98px) {
    html.kvl-kacheln .kvl-row .kvl-meta {
        min-height: calc(4 * 1.35em + 4px);
    }
}

/* Kacheln der übrigen Listen: feste Spaltenzahl statt auto-fill (bei breiter Liste entstanden 5 Spalten, 24 Artikel
   = 4 volle Reihen + 4). 4 / 3 / 2 nach Breite der Liste – 24 je Seite gehen in jeder Stufe auf (Raster-Regel). Der
   Container „ksliste“ kommt aus kaelte-ansicht.css (html.ks-ansicht-an); Verdichter-Kacheln bleiben, wie sie sind. */
html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container ksliste (max-width: 939.98px) {
    html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container ksliste (max-width: 699.98px) {
    html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row:has(> .kvl-col) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Kälteleistung (Verflüssigungssätze, Verdampfer, Aggregate) auch in Kachel und schmaler Zeile: sie stand nur rechts
   in der breiten Zeile und fehlte damit ausgerechnet dort, wo der Platz knapp ist (Befund 30.10.). */
@container kvl (max-width: 575.98px) {
    .kvl-row.kvl-row--allg .kvl-fig {
        display: block;
        color: var(--kvl-text-2);
        font-size: .8125rem;
    }

    .kvl-row.kvl-row--allg .kvl-fig b {
        color: var(--kvl-text);
    }
}