/* Suchvorschau neu (Schalter suchvorschauNeu, Vorlage layout/header/search-suggest.html.twig).
   Ein Aufbau für alle Breiten: die Vorschau ist ein Container, ab 640 px Breite zwei Spalten
   (Artikel | Kategorien), darunter drei Artikel, dann die Kategorien als Zeilen. */

.search-suggest.ksv {
    --ksv-text: #454444;
    --ksv-stark: #222426;
    --ksv-leise: #74787c;
    --ksv-linie: #e3e6e8;
    --ksv-flaeche: #f4f6f7;
    --ksv-hover: #eef8fd;
    --ksv-blau: #69c8f3;
    --ksv-blau-hover: #4fbcec;
    --ksv-blau-tinte: #0b2a3a;
    --ksv-warn: #7a5300;
    --ksv-warn-flaeche: #fff6e0;
    --ksv-warn-linie: #f1d48a;
    container: ksv / inline-size;
    /* Das Theme legt nur .search-suggest-container über die Seite, die neue Vorschau hat keinen – darum hier */
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    z-index: 1031;
    padding: 0;
    color: var(--ksv-text);
    background: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(30, 40, 50, .16);
    overflow: hidden;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.js-overlay .search-suggest.ksv { top: calc(100% + 22px); }
.ksv ul { list-style: none; margin: 0; padding: 0; }
.ksv a { color: inherit; text-decoration: none; }
.ksv a:focus-visible { outline: 2px solid #1f7fae; outline-offset: -2px; }
.ksv .ksv-breit { display: none; }

.ksv-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.ksv-links { min-width: 0; padding: 10px 8px 4px; display: flex; flex-direction: column; gap: 4px; }
.ksv-seite { padding: 12px 16px; border-top: 1px solid var(--ksv-linie); }
.ksv-titel { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ksv-leise); margin: 6px 8px 2px; }
.ksv-seite .ksv-titel { margin: 0 0 4px; }

/* Bild: feste Box, Bild ganz sichtbar, Platzhalter statt Lücke */
.ksv-bild { flex: none; width: 48px; height: 48px; border: 1px solid var(--ksv-linie); border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ksv-bild img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.ksv-bild--leer { background: var(--ksv-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8bec3' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-9 8'/%3E%3C/svg%3E") center / 45% no-repeat; }

/* Artikelzeile */
.ksv-link { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 8px; border-radius: 8px; }
.ksv-link:hover, .ksv-link:focus-visible { background: var(--ksv-hover); }
.ksv-link .ksv-bild { grid-row: span 2; }
.ksv-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ksv-name { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ksv-hl { font-weight: 600; color: var(--ksv-stark); }
.ksv-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ksv-leise); }
.ksv-weg { color: var(--ksv-warn); }
.ksv-preis { font-weight: 600; font-size: 13.5px; color: var(--ksv-stark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ksv-preis small { font-weight: 400; font-size: .8em; color: var(--ksv-leise); }
.ksv-link .ksv-preis { grid-column: 2; }
.ksv-ab4 { display: none; }

/* Nachfolger oben */
.ksv-nf-zeile { margin: 0 2px 6px; }
.ksv-nachfolger { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ksv-warn-linie); border-radius: 8px; background: var(--ksv-warn-flaeche); color: var(--ksv-stark); }
.ksv-nachfolger:hover, .ksv-nachfolger:focus-visible { border-color: #e2b955; background: var(--ksv-warn-flaeche); }
.ksv-nachfolger .ksv-bild { width: 44px; height: 44px; }
.ksv-nachfolger > .ksv-preis { display: none; }
.ksv-nf-hinweis { font-size: 12.5px; color: var(--ksv-warn); }
.ksv-nf-name { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Baureihe (SuchSerie): wie der Nachfolger, aber weiß mit blauem Symbol */
.ksv-serie { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ksv-linie); border-radius: 8px; background: #fff; color: var(--ksv-stark); }
.ksv-serie:hover, .ksv-serie:focus-visible { border-color: var(--ksv-blau); background: var(--ksv-hover); }
.ksv-serie-symbol { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: #e1f4fd; color: #1f7fae; display: grid; place-items: center; }
.ksv-serie-symbol svg { width: 20px; height: 20px; }
.ksv-serie-art { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #1f7fae; }
.ksv-serie-text { font-size: 12.5px; color: var(--ksv-leise); }
.ksv-serie-los { grid-column: 2; font-size: 13px; font-weight: 600; color: #1f7fae; }
@container ksv (min-width: 640px) {
    .ksv-serie { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .ksv-serie-los { grid-column: 3; grid-row: 1 / span 2; }
}

/* „n weitere Artikel“ und Kategorien als Zeilen (schmal) */
.ksv-weitere a { display: block; text-align: center; font-size: 13.5px; font-weight: 500; color: #1f7fae; padding: 8px 0 4px; border-radius: 6px; }
.ksv-kategorien a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 6px; color: var(--ksv-stark); font-size: 14px; }
.ksv-kategorien li + li a { border-top: 1px solid var(--ksv-linie); }
.ksv-kategorien a:hover, .ksv-kategorien a:focus-visible { background: var(--ksv-hover); }
.ksv-kategorien small { display: block; font-size: 12px; color: var(--ksv-leise); }
.ksv-pfeil { color: var(--ksv-leise); font-size: 18px; line-height: 1; }

/* Fuß */
.ksv-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--ksv-linie); }
.ksv-alle { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 6px; background: var(--ksv-blau); color: var(--ksv-blau-tinte) !important; font-weight: 600; }
.ksv-alle:hover, .ksv-alle:focus-visible { background: var(--ksv-blau-hover); }
.ksv-tasten { font-size: 12px; color: var(--ksv-leise); }
.ksv kbd { font-family: inherit; font-size: 11px; color: var(--ksv-text); border: 1px solid var(--ksv-linie); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: #fff; box-shadow: none; }

/* Filter-Vorschlag ganz oben („R290 Verdichter Danfoss“) */
.ksv-filter-zeile { padding: 10px 10px 4px; }
.ksv-filter { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid #c3e9fa; border-radius: 8px; background: #e1f4fd; color: var(--ksv-stark); }
.ksv-filter:hover, .ksv-filter:focus-visible { border-color: var(--ksv-blau); background: #d4effc; }
.ksv-filter-symbol { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1f7fae; display: grid; place-items: center; }
.ksv-filter-symbol svg { width: 18px; height: 18px; }
.ksv-filter-hinweis { font-size: 12px; color: #1f7fae; font-weight: 500; }
.ksv-filter-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ksv-chip { font-size: 13px; font-weight: 600; background: #fff; border-radius: 999px; padding: 2px 10px; color: var(--ksv-stark); }
.ksv-chip small { font-weight: 400; font-size: 11.5px; color: var(--ksv-leise); }
.ksv-filter-anzahl { grid-column: 2; font-weight: 600; font-size: 13.5px; color: #1f7fae; white-space: nowrap; }
.ksv-keine { font-size: 13px; color: var(--ksv-leise); }

/* Kopf der Ergebnisseite (page/search/kse-kopf.html.twig, Entwurf Variante A „Gruppiert“): Überschrift und eine Zeile,
   darunter die Vorschläge als gleich hohe Karten nebeneinander (Filter blau, Nachfolger gelb, Kategorie weiß) */
.kse { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; color: #454444; }
.kse-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kse-titel { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: #222426; text-wrap: balance; }
.kse-unter { margin: 0; font-size: 14px; color: #74787c; }
.kse-unter b { color: #222426; font-weight: 600; }
.kse-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kse-karte { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-auto-rows: min-content; gap: 3px 12px; align-content: start; padding: 14px 16px; border: 1px solid #e3e6e8; border-radius: 10px; background: #fff; color: #222426 !important; text-decoration: none !important; }
.kse-karte:hover, .kse-karte:focus-visible { border-color: #69c8f3; box-shadow: 0 4px 14px rgba(30, 40, 50, .07); }
.kse-karte:focus-visible { outline: 2px solid #1f7fae; outline-offset: 2px; }
.kse-karte > :not(.kse-sym) { grid-column: 2; min-width: 0; }
.kse-sym { grid-row: 1 / span 4; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1f7fae; display: grid; place-items: center; overflow: hidden; }
.kse-sym svg { width: 20px; height: 20px; }
.kse-sym--bild { border: 1px solid #e3e6e8; }
.kse-sym--bild img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.kse-art { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #1f7fae; }
.kse-k-titel { font-size: 15px; font-weight: 600; line-height: 1.35; }
.kse-text { font-size: 13px; color: #74787c; line-height: 1.45; }
.kse-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.kse-chips span { background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; }
.kse-chips small { color: #74787c; font-weight: 400; font-size: 11.5px; }
.kse-los { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #1f7fae; }
.kse-karte--filter { border-color: #c3e9fa; background: #e1f4fd; }
.kse-karte--nf { border-color: #f1d48a; background: #fff6e0; }
.kse-karte--nf .kse-art, .kse-karte--nf .kse-los { color: #7a5300; }
.kse-karte--nf:hover { border-color: #e2b955; }
.kse-karte--serie .kse-sym { background: #e1f4fd; }
@media (max-width: 767.98px) {
    .kse-titel { font-size: 20px; }
    .kse-karten { grid-template-columns: minmax(0, 1fr); }
}

/* Abschnitte der Liste (component/product/listing.html.twig, Extension kaelteSuchGruppen): ein Kopf je Kategorie über
   die volle Breite, Teiltreffer eingeklappt am Ende */
.cms-listing-row > .cms-listing-col.ksg-kopf { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 12px 16px; background: #f4f6f7; border-bottom: 1px solid #e0e4e8; }
.cms-listing-row > .cms-listing-col.ksg-kopf:first-child { border-radius: 8px 8px 0 0; }
.cms-listing-row > .kvl-col + .ksg-kopf { border-top: 1px solid #e0e4e8; }
.ksg-titel { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #222426; }
.ksg-titel span { margin-left: 8px; font-size: 13px; font-weight: 400; color: #74787c; }
.ksg-titel span + span::before { content: "· "; }
.ksg-alle { font-size: 13px; font-weight: 500; color: #1f7fae; text-decoration: none; white-space: nowrap; }
.ksg-alle:hover { text-decoration: underline; }
.cms-listing-row > .cms-listing-col.ksg-kopf--teil { align-items: center; background: #fff; border-top: 1px dashed #c9d0d5; border-bottom: 0; border-radius: 0 0 8px 8px; }
.ksg-kopf--teil .ksg-titel { font-weight: 400; font-size: 14px; color: #454444; }
.ksg-teil-knopf { border: 1px solid #e3e6e8; background: #fff; color: #222426; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.ksg-teil-knopf:hover { border-color: #69c8f3; }
.ksg-teil-knopf:focus-visible { outline: 2px solid #1f7fae; outline-offset: 2px; }
.cms-listing-row > .cms-listing-col.ksg-teil { display: none; }
.cms-listing-row.ksg-offen > .cms-listing-col.ksg-teil { display: block; }
.cms-listing-row.ksg-offen > .cms-listing-col.ksg-kopf--teil { border-radius: 0; border-bottom: 1px solid #e0e4e8; }
/* Kachelansicht: Köpfe über alle Spalten, als eigene Leiste */
html.kvl-kacheln .cms-listing-row > .cms-listing-col.ksg-kopf { grid-column: 1 / -1; border: 1px solid #e0e4e8; border-radius: 8px; }

/* Hinweis auf der Liste: „Aus Ihrer Suche … haben wir diese Filter gesetzt“ (ks-suchvorschau.js) */
.ksv-gesetzt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #c3e9fa; border-left: 4px solid #69c8f3; border-radius: 8px; background: #e1f4fd; color: #222426; scroll-margin-top: 150px; }
.ksv-gesetzt-symbol { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1f7fae; display: grid; place-items: center; }
.ksv-gesetzt-symbol svg { width: 18px; height: 18px; }
.ksv-gesetzt-inhalt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ksv-gesetzt-titel { margin: 0; font-size: 14px; font-weight: 600; }
.ksv-gesetzt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ksv-gesetzt-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #69c8f3; border-radius: 999px; background: #fff; color: #222426; font-size: 13.5px; font-weight: 500; padding: 4px 8px 4px 12px; cursor: pointer; }
.ksv-gesetzt-chip span { font-size: 16px; line-height: 1; color: #74787c; }
.ksv-gesetzt-chip:hover span, .ksv-gesetzt-chip:focus-visible span { color: #b42318; }
.ksv-gesetzt-chip:focus-visible, .ksv-gesetzt-alle:focus-visible { outline: 2px solid #1f7fae; outline-offset: 2px; }
.ksv-gesetzt-alle { flex: none; font-size: 13.5px; font-weight: 500; color: #1f7fae; text-decoration: underline; }

/* Breit: zwei Spalten, alle Artikel, Preis rechts */
@container ksv (min-width: 640px) {
    .ksv .ksv-breit { display: revert; }
    .ksv .ksv-schmal { display: none; }
    .ksv-raster { grid-template-columns: minmax(0, 1fr) 220px; }
    .ksv-seite { border-top: 0; border-left: 1px solid var(--ksv-linie); background: var(--ksv-flaeche); padding: 16px 18px; }
    .ksv-ab4 { display: list-item; }
    .ksv-link { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 8px 10px; }
    .ksv-link .ksv-bild { grid-row: auto; width: 56px; height: 56px; }
    .ksv-link .ksv-preis { grid-column: auto; text-align: right; font-size: 15px; }
    .ksv-name { font-size: 14px; }
    .ksv-nachfolger { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px; }
    .ksv-nachfolger .ksv-bild { width: 52px; height: 52px; }
    .ksv-nachfolger > .ksv-preis { display: inline; font-size: 15px; }
    .ksv-kategorien a { padding: 7px 10px; margin: 0 -10px; font-size: 13.5px; }
    .ksv-kategorien li + li a { border-top: 0; }
    .ksv-kategorien a:hover, .ksv-kategorien a:focus-visible { background: #fff; }
    .ksv-kategorien small { font-size: 11.5px; }
    .ksv-alle { flex: none; }
    .ksv-filter-zeile { padding: 12px 12px 2px; }
    .ksv-filter { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px 14px; }
    .ksv-filter-anzahl { grid-column: 3; grid-row: 1 / span 2; font-size: 14px; }
}