/* HP-Suche im Shop (Plugin HpSuche 0.2.1): Vorschlagsbox, Ergebnisseite /search, KI-Suchhilfe.
   Präfix hpsuche- (NICHT hps-: das nutzt die Startseite). Namensräume: hpsuche-erg-* = Ergebnisseite,
   hpsuche-ki-* = KI-Suchhilfe; die kurzen Namen (hpsuche-kopf, -aktiv, -kat …) gehören der Vorschlagsbox.
   Farben aus dem H+P-Design (HpShopDesign-Variablen --hpd-*), jede mit Rückfall: im Live-Kanal ist das
   Design-Plugin aus. Nur die Gewichte 400/700/800 (600 ist nicht geladen).
   Offcanvas-Falle: Shopware kopiert das Filter-Panel per innerHTML ins Offcanvas (außerhalb von .hpsuche-erg),
   deshalb hängen alle Panel-Regeln an .hpsuche-erg-panel bzw. an den Blockklassen, nie an .hpsuche-erg. */

:root{--hpsuche-text:#111417;--hpsuche-text-2:#5f6468;--hpsuche-grau:var(--hpd-grau-600,#6e6f6e);--hpsuche-linie:#dfe3e6;
 --hpsuche-linie-2:var(--hpd-grau-200,#e6e7e7);--hpsuche-chip-rand:#c9d0d5;--hpsuche-flaeche:#f3f5f6;--hpsuche-hell:#e7f4fb;
 --hpsuche-blau:var(--hpd-blau,#009ee3);--hpsuche-blau-700:var(--hpd-blau-700,#00719f);--hpsuche-dunkel:var(--hpd-dunkelblau,#00618a);
 --hpsuche-tief:var(--hpd-tief,#00374f);--hpsuche-tinte:#0b1922;--hpsuche-gruen:var(--hpd-gruen,#1d7a3e);
 --hpsuche-schatten:var(--hpd-schatten,0 1px 2px rgb(0 0 0/.06),0 8px 24px rgb(0 0 0/.08));
 --hpsuche-schatten-hoch:var(--hpd-schatten-hoch,0 4px 8px rgb(0 0 0/.08),0 18px 40px rgb(0 0 0/.14));--hpsuche-tempo:.2s cubic-bezier(.22,.61,.36,1)}

/* ─── Vorschlagsbox (beim Tippen) ─── */
.hpsuche-box{position:absolute;z-index:1060;background:#fff;border:1px solid var(--hpsuche-linie-2);border-radius:4px;
  box-shadow:var(--hpsuche-schatten-hoch);overflow:hidden auto;
  font-family:var(--hpd-schrift,inherit);font-size:15px;line-height:1.45;color:var(--hpd-text,#16181a)}
.hpsuche-kopf{padding:10px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hpsuche-grau)}
.hpsuche-begriff{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:#2b3440}
.hpsuche-begriff svg{flex:0 0 auto;opacity:.5}
.hpsuche-begriff b{font-weight:700;color:#000}
.hpsuche-begriff.hpsuche-aktiv,.hpsuche-begriff:hover{background:var(--hpsuche-hell)}
.hpsuche-artikel{display:flex;gap:12px;align-items:center;padding:10px 16px;cursor:pointer}
.hpsuche-artikel.hpsuche-aktiv,.hpsuche-artikel:hover{background:var(--hpsuche-hell)}
.hpsuche-artikel img,.hpsuche-ph{width:52px;height:52px;flex:0 0 52px;border-radius:4px;background:var(--hpsuche-flaeche);border:1px solid var(--hpd-grau-100,#f4f5f5)}
.hpsuche-artikel img{object-fit:contain}
/* 0.2.10: Begriff-, Artikel- und Fuß-Zeilen sind echte Links (Strg-/Mittelklick = neuer Tab) — Linkfarbe und Unterstreichung
   des Themes gelten hier nicht, auch nicht bei hover/focus/visited (höhere Spezifität als a:hover des Themes) */
.hpsuche-box a.hpsuche-begriff,.hpsuche-box a.hpsuche-begriff:hover,.hpsuche-box a.hpsuche-begriff:focus,.hpsuche-box a.hpsuche-begriff:visited{color:#2b3440;text-decoration:none}
.hpsuche-box a.hpsuche-artikel,.hpsuche-box a.hpsuche-artikel:hover,.hpsuche-box a.hpsuche-artikel:focus,.hpsuche-box a.hpsuche-artikel:visited{color:inherit;text-decoration:none}
.hpsuche-box a.hpsuche-foot,.hpsuche-box a.hpsuche-foot:hover,.hpsuche-box a.hpsuche-foot:focus,.hpsuche-box a.hpsuche-foot:visited{color:var(--hpsuche-dunkel);text-decoration:none}
.hpsuche-t{flex:1;min-width:0}
.hpsuche-titel{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpsuche-meta{font-size:13px;color:var(--hpsuche-grau);margin-top:2px}
.hpsuche-lager{color:var(--hpsuche-gruen);font-weight:700}
.hpsuche-var{color:var(--hpsuche-dunkel);font-weight:700}
.hpsuche-fuss{padding:9px 16px;border-top:1px solid var(--hpd-grau-100,#f4f5f5);font-size:12px;color:var(--hpsuche-grau)}
.hpsuche-grid{display:grid;grid-template-columns:230px 1fr}
.hpsuche-grid.hpsuche-solo{grid-template-columns:1fr}
.hpsuche-rail{border-right:1px solid var(--hpd-grau-100,#f4f5f5);padding:4px 0;background:#fafbfc}
.hpsuche-main{padding:4px 0;min-width:0}
.hpsuche-kat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;color:#2b3440;font-size:14px;text-decoration:none}
.hpsuche-kat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpsuche-kat span:last-child{color:var(--hpsuche-grau);font-size:12px;font-variant-numeric:tabular-nums}
.hpsuche-kat:hover,.hpsuche-kat.hpsuche-aktiv{background:var(--hpsuche-hell);color:#000;text-decoration:none}
.hpsuche-leer{padding:12px 16px;color:var(--hpsuche-grau)}
.hpsuche-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--hpd-grau-100,#f4f5f5);
  cursor:pointer;color:var(--hpsuche-dunkel);font-weight:700;font-size:14px;text-decoration:none}
.hpsuche-foot:hover{background:var(--hpsuche-hell);color:var(--hpsuche-dunkel);text-decoration:none}
.hpsuche-frage{padding:10px 16px;background:#f3fafe;border-bottom:1px solid #d7ecf7;color:var(--hpsuche-dunkel);cursor:pointer;font-weight:700}
.hpsuche-frage:hover,.hpsuche-frage.hpsuche-aktiv{background:#e3f3fb}
.hpsuche-box.hpsuche-alt .hpsuche-main,.hpsuche-box.hpsuche-alt .hpsuche-rail{opacity:.6;transition:opacity .1s}
/* 0.2.7: Absenden wartet kurz (Ziel bestätigen, Vorwärmen der Seite abwarten) — sichtbar am Suchknopf */
form.hpsuche-sendet,form.hpsuche-sendet button{cursor:progress}
form.hpsuche-sendet button[type=submit]{opacity:.55;transition:opacity .15s .1s}
/* Shopwares/ThemeWares eigene Vorschlagsliste unterdrücken — nur die Box der HP-Suche.
   0.3.3: Nicht für Kreis-Kunden (layout/meta setzt dort <meta name="hpsuche-kreis">): Sie bekommen kein hp-suche.js und damit keine
   HP-Box; ihnen zeigt Shopwares Liste (vom Kreis-Schutz gefiltert) die Vorschläge. Browser ohne :has() blenden wie bisher immer aus. */
@supports selector(:has(*)){
 html:not(:has(meta[name=hpsuche-kreis])) :is(.search-suggest-container,.js-search-result,[class*='search-suggest']:not(.hpsuche-box),[class*='ajax-search-suggest']){display:none!important}
}
@supports not selector(:has(*)){
 .search-suggest-container,.js-search-result,[class*='search-suggest']:not(.hpsuche-box),[class*='ajax-search-suggest']{display:none!important}
}

/* ─── Ergebnisseite: Seite ─── */
body.is-ctl-search .cms-page.search-page:has(.hpsuche-erg){border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.hpsuche-erg-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:8px 0 24px}
body.is-ctl-search h1.search-headline.hpsuche-erg-h1{position:relative;flex:1 1 420px;min-width:0;margin:0!important;padding-top:18px;text-align:left!important;color:var(--hpsuche-text)!important;
 font-weight:800!important;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)!important;line-height:1.15!important;text-wrap:balance;overflow-wrap:anywhere}
body.is-ctl-search h1.hpsuche-erg-h1::before{content:"";position:absolute;top:0;left:0;width:44px;height:4px;background:var(--hpsuche-blau)}
@media(max-width:575.98px){body.is-ctl-search h1.search-headline.hpsuche-erg-h1{font-size:26px!important;flex-basis:100%}}
.hpsuche-erg-hinweis{margin:0 0 16px;padding:14px 16px;border-left:4px solid var(--hpsuche-blau-700);border-radius:0 4px 4px 0;background:#eef7fc;color:var(--hpd-text,#16181a);font-size:15px;line-height:1.5}
.hpsuche-erg-hinweis [data-hpsuche-erg-reset]{color:var(--hpsuche-blau-700)!important;font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;vertical-align:baseline}
.hpsuche-erg>.visually-hidden-focusable:focus{justify-self:start;margin:0 0 12px;padding:8px 12px;border-radius:4px;background:#fff;color:var(--hpsuche-dunkel);font-weight:700;outline:2px solid var(--hpsuche-dunkel)}

/* ─── Raster: Seitenleiste 280 px + Treffer (ab 992 px) ─── */
@media(min-width:992px){
 .hpsuche-erg{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:32px;align-items:start}
 .hpsuche-erg>*{grid-column:2;min-width:0}
 .hpsuche-erg>.cms-element-sidebar-filter{grid-column:1;grid-row:1/-1}
 .hpsuche-erg.is-leer{grid-template-columns:minmax(0,1fr)}.hpsuche-erg.is-leer>*{grid-column:1}
 .hpsuche-erg .hpsuche-erg-panel .filter-panel{padding:4px 0;background:#fff;border:1px solid var(--hpsuche-linie);border-radius:4px}
}
.hpsuche-erg.is-leer>.cms-element-sidebar-filter,.hpsuche-erg .filter-panel-wrapper-toggle{display:none!important}

/* ─── Panel (Seitenleiste und Offcanvas-Kopie) ─── */
.hpsuche-erg-panel .filter-panel{display:block;margin:0}
.hpsuche-erg-panel .filter-panel-items-container{display:block;margin:0}
.hpsuche-erg-panel .filter-panel-item{width:100%;margin:0!important;border-bottom:1px solid var(--hpsuche-linie-2);border-radius:0}
.hpsuche-erg-panel .filter-panel-item:last-child{border-bottom:0}
/* kein Preis, keine Bewertung, kein „versandkostenfrei“ (Spezifikation B) — Netz, falls ein Block doch gezeichnet wird */
.hpsuche-erg-panel :is(.filter-range,.filter-boolean,.filter-rating-select){display:none!important}
.hpsuche-erg-block{padding:14px 0 10px}
.hpsuche-erg-block>.hpsuche-erg-titel,.hpsuche-erg-zwischentitel{display:block!important;min-height:0!important;margin:0 16px 6px!important;padding:0!important;border:0!important;border-radius:0!important;
 background:none!important;box-shadow:none!important;color:var(--hpsuche-text-2)!important;font-size:12px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:.12em;text-transform:uppercase}
.hpsuche-erg-zwischentitel{margin:0!important;padding:16px 16px 4px!important}
/* Zwischentitel (h3) und „Weitere Filter“ (details) stehen je in einem eigenen Listeneintrag div.filter-panel-item:
   dieser Rahmen zieht keine Trennlinie (Titel gehört zu den Eigenschaften darunter, details hat selbst keine) */
.hpsuche-erg-panel .filter-panel-item:has(>.hpsuche-erg-zwischentitel),.hpsuche-erg-panel .filter-panel-item:has(>.hpsuche-erg-weitere){border-bottom:0}
.hpsuche-erg-titel .filter-multi-select-count{display:none}
.hpsuche-erg-panel .hpsuche-erg-block>.filter-panel-item-dropdown{min-width:0;max-height:none;overflow:visible;margin:0;padding:0;border:0!important;border-radius:0!important;box-shadow:none!important;background:none}
.hpsuche-erg-panel .filter-panel .filter-multi-select-list{margin:0;padding:0;list-style:none}
.hpsuche-erg-panel .filter-multi-select-list-item{padding:0}
/* Listenzeilen: offene Blöcke (Kategorie, Verfügbarkeit, Hersteller) und Werte der Eigenschaften */
.hpsuche-erg-block .form-check,.hpsuche-erg-panel .filter-multi-select-properties .form-check{position:relative;display:flex;align-items:center;min-height:36px;margin:0;padding:0 16px}
.hpsuche-erg-panel .filter-multi-select-properties .form-check{padding:0 8px;border-radius:4px}
.hpsuche-erg-block .form-check:hover,.hpsuche-erg-panel .filter-multi-select-properties .form-check:hover{background:var(--hpsuche-flaeche)}
.hpsuche-erg-block .form-check:has(:focus-visible),.hpsuche-erg-panel .filter-multi-select-properties .form-check:has(:focus-visible){outline:2px solid var(--hpsuche-dunkel);outline-offset:-2px}
.hpsuche-erg-block .form-check-input,.hpsuche-erg-panel .filter-multi-select-properties .form-check-input{--bs-form-check-bg:#fff;float:none;flex:0 0 18px;width:18px;height:18px;margin:0;
 border:1px solid var(--hpd-grau-300,#cdcecd);border-radius:4px}
.hpsuche-erg-block .form-check-input:checked,.hpsuche-erg-panel .filter-multi-select-properties .form-check-input:checked{background-color:var(--hpsuche-blau-700);border-color:var(--hpsuche-blau-700)}
.hpsuche-erg-block .form-check-label,.hpsuche-erg-panel .filter-multi-select-properties .form-check-label{display:flex;flex:1;align-items:center;gap:10px;min-width:0;margin:0;padding:8px 0 8px 10px;
 color:var(--hpsuche-text);font-size:14.5px;line-height:1.3;cursor:pointer}
.hpsuche-erg-zahl{margin-left:auto;color:var(--hpsuche-grau);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
/* 0 Treffer (is-null setzt hp-suche.js): die Zeile bleibt bedienbar, deshalb Farbe statt Deckkraft (#5f6468 = 5,98:1,
   die Zahl bleibt #6e6f6e = 5,05:1). Deckkraft nur für Shopwares echte Sperre (.disabled, Checkbox gesperrt). */
.hpsuche-erg-panel .filter-multi-select-list-item.disabled{opacity:.45}
.hpsuche-erg-panel .is-null .form-check-label{color:var(--hpsuche-text-2)!important}
.hpsuche-erg-panel .form-check-input:disabled~.form-check-label{opacity:1}
.filter-multi-select-hp-lager .form-check-label::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--hpsuche-gruen)}
/* Kategorie im Navigationsstil (.category-navigation-box): Häkchen unsichtbar (bleibt für Shopware, aus der Tab-Folge).
   Bedient wird der Link a[data-hpsuche-erg-kat] im label (Kategorie = Seitenwechsel, WCAG 3.2.2): er füllt die ganze
   Zeile samt Innenabstand des labels, damit kein Klick daneben die Checkbox umschaltet; Aussehen wie ein Listeneintrag. */
.filter-multi-select-hp-kategorie .form-check{padding-left:0;border-left:3px solid transparent}
.filter-multi-select-hp-kategorie .form-check-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.filter-multi-select-hp-kategorie .form-check-label{align-self:stretch;padding-left:13px}
.filter-multi-select-hp-kategorie .form-check-label>a[data-hpsuche-erg-kat]{display:flex;flex:1;align-self:stretch;align-items:center;gap:10px;min-width:0;
 margin:-8px 0 -8px -13px;padding:8px 0 8px 13px;color:inherit!important;font-weight:inherit;text-decoration:none!important}
@supports selector(:has(*)){.filter-multi-select-hp-kategorie .form-check-label>a[data-hpsuche-erg-kat]:focus-visible{outline:0}}  /* Rahmen zeigt die Zeile (:has) */
.filter-multi-select-hp-kategorie .form-check:has(:checked){border-left-color:var(--hpsuche-blau);background:var(--hpsuche-hell)}
.filter-multi-select-hp-kategorie .form-check:has(:checked) .form-check-label{color:var(--hpsuche-dunkel);font-weight:700}
.hpsuche-erg-alle{display:flex;align-items:center;min-height:36px;padding:0 16px;color:var(--hpsuche-dunkel)!important;font-size:14.5px;font-weight:700;text-decoration:none!important}
.hpsuche-erg-alle:hover{background:var(--hpsuche-flaeche)}
.hpsuche-erg-kurz-5:not(.is-alle) .filter-multi-select-list-item:nth-child(n+6):not(:has(:checked)),
.hpsuche-erg-kurz-8:not(.is-alle) .filter-multi-select-list-item:nth-child(n+9):not(:has(:checked)){display:none}
.hpsuche-erg-mehr{display:inline-flex;align-items:center;justify-self:start;min-height:36px;margin:2px 16px 0;padding:0;border:0;background:none;color:var(--hpsuche-blau-700);font-size:14px;font-weight:700;cursor:pointer}
.hpsuche-erg-mehr:hover{text-decoration:underline;text-underline-offset:3px}
.hpsuche-erg-block .wf-wrapper{display:none!important}
.hpsuche-erg-block.hpsuche-erg-lang.is-alle .wf-wrapper{display:block!important;margin:0 16px 8px;padding:0}
/* Eigenschaften: Akkordeon (Klapp-Modus, sidebar = true); der Kern dreht den Pfeil selbst (svg) */
.hpsuche-erg-panel .filter-multi-select-properties>.filter-panel-item-toggle.btn{--bs-btn-active-color:var(--hpsuche-dunkel);--bs-btn-active-bg:#fff;--bs-btn-active-border-color:transparent;
 display:flex!important;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;padding:0 16px!important;
 border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:var(--hpsuche-text)!important;font-size:14.5px!important;font-weight:700!important;line-height:1.3;text-align:left}
.hpsuche-erg-panel .filter-multi-select-properties>.filter-panel-item-toggle.btn:hover{background:var(--hpsuche-flaeche)!important}
.hpsuche-erg-panel .filter-multi-select-properties>.filter-panel-item-toggle.btn:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:-2px}
.hpsuche-erg-panel .filter-multi-select-properties>.filter-panel-item-toggle[aria-expanded="true"]{color:var(--hpsuche-dunkel)!important}
.hpsuche-erg-panel .filter-multi-select-properties>.filter-panel-item-toggle .icon{margin-left:0}
.hpsuche-erg-panel .filter-multi-select-properties .filter-multi-select-count{margin:0 8px 0 auto;color:var(--hpsuche-blau-700)}
.hpsuche-erg-panel .filter-multi-select-properties .filter-panel-item-dropdown{min-width:0;max-height:288px;overflow:auto;margin:0;padding:0 8px 10px;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff}
.hpsuche-erg-panel .filter-multi-select-properties .wf-wrapper{padding:0 0 8px}
.hpsuche-erg-panel .filter-multi-select-properties .filter-panel-item-dropdown:not(:has(.filter-multi-select-list-item:nth-child(9))) .wf-wrapper{display:none!important}
.hpsuche-erg-panel .filter-multi-select-properties:has(>.filter-panel-item-toggle.disabled){display:none}
.hpsuche-erg-weitere{border-bottom:0!important}
.hpsuche-erg-weitere>summary{display:flex;align-items:center;gap:8px;min-height:44px;margin:12px 16px;padding:0 16px;list-style:none;cursor:pointer;border:1px dashed #7fc4e8;border-radius:4px;
 background:var(--hpsuche-hell);color:var(--hpsuche-dunkel);font-size:14.5px;font-weight:700}
.hpsuche-erg-weitere>summary:hover{border-color:var(--hpsuche-dunkel)}
.hpsuche-erg-weitere>summary::-webkit-details-marker{display:none}
/* „+“/„–“ nur Zeichen, nicht Teil des Namens: CSS-Alternativtext leer („/ ""“); die erste Angabe ist der Rückfall für
   Browser ohne diese Schreibweise (Safari < 17.4, Firefox < 128), sie verwerfen die zweite */
.hpsuche-erg-weitere>summary::before{content:"+";content:"+" / "";font-size:19px;font-weight:400}
.hpsuche-erg-weitere[open]>summary::before{content:"\2013";content:"\2013" / ""}
.hpsuche-erg-weitere>summary:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}

/* ─── Aktive Filter (genau ein Container, vor dem Panel; Shopware füllt ihn) ─── */
.hpsuche-erg-aktiv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.hpsuche-erg-aktiv:not(:has(*)){display:none!important}
.hpsuche-erg-aktiv .filter-active{display:inline-flex;align-items:center;gap:6px;height:34px;min-height:0;margin:0;padding:0 10px 0 14px;border:0!important;border-radius:4px!important;
 background:var(--hpsuche-hell)!important;color:var(--hpsuche-tief)!important;font-size:13.5px;font-weight:700;line-height:1}
.hpsuche-erg-aktiv .filter-active:hover{background:#d4ebf8!important}
.hpsuche-erg-aktiv .filter-active>[aria-hidden]{margin:0!important;font-size:18px!important;font-weight:400;line-height:1}
.hpsuche-erg-aktiv .filter-reset-all{height:34px;min-height:0;padding:0 8px;border:0!important;background:none!important;color:var(--hpsuche-blau-700)!important;font-size:13.5px;font-weight:700;
 text-decoration:underline;text-underline-offset:3px}
.hpsuche-erg-aktiv .filter-reset-all:hover{color:var(--hpsuche-dunkel)!important}
.hpsuche-erg-aktiv .filter-active:focus-visible,.hpsuche-erg-aktiv .filter-reset-all:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}

/* ─── Kategorie-Chips (Handy, wischbar; Rand = Innenabstand des Containers, kein Überlauf) ───
   position:relative an Leiste UND Chip: die Zusätze span.visually-hidden („ Treffer“) sind absolut positioniert; ohne
   Bezugsrahmen hängen sie am BODY, entkommen dem overflow-x der Leiste und machen die Seite 1.554 px breit (die Maske
   bildet keinen Bezugsrahmen). Gilt auch für weitere Zusätze im Chip. */
.hpsuche-erg-chips{position:relative;display:flex;gap:8px;margin:0 calc(var(--bs-gutter-x,32px) * -.5) 12px;padding:2px calc(var(--bs-gutter-x,32px) * .5);overflow-x:auto;
 scroll-snap-type:x proximity;scroll-padding-inline:calc(var(--bs-gutter-x,32px) * .5);scrollbar-width:none;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.hpsuche-erg-chips::-webkit-scrollbar{display:none}
@media(min-width:992px){.hpsuche-erg-chips{display:none}}
.hpsuche-erg-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:44px;margin:0;padding:0 16px;border:1px solid var(--hpsuche-chip-rand);border-radius:4px;background:#fff;
 color:var(--hpsuche-text)!important;font-size:14.5px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none!important;scroll-snap-align:start;cursor:pointer}
.hpsuche-erg-chip:hover{border-color:var(--hpsuche-text)}
.hpsuche-erg-chip:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:-2px}
.hpsuche-erg-chip.is-aktiv{border-color:var(--hpsuche-dunkel);background:var(--hpsuche-hell);color:var(--hpsuche-tief)!important}
.hpsuche-erg-chip.is-null{color:var(--hpsuche-text-2)!important}  /* 0 Treffer: Farbe statt Deckkraft (wie im Panel) */

/* ─── Kopfleiste (im Ajax-Teil) ─── */
.hpsuche-erg-leiste{display:grid;grid-template-columns:1fr auto;grid-template-areas:"zahl sort" "deckel deckel";align-items:center;gap:8px 12px;margin:0 0 16px;scroll-margin-top:120px}
.hpsuche-erg-leiste:focus{outline:0}
.hpsuche-erg-zaehler{grid-area:zahl;margin:0;color:var(--hpsuche-text-2);font-size:15px}.hpsuche-erg-zaehler strong{color:var(--hpsuche-text);font-weight:800}
.hpsuche-erg-sortierung{grid-area:sort}.hpsuche-erg-deckel{grid-area:deckel;margin:0;color:var(--hpsuche-grau);font-size:13px;line-height:1.45}
.hpsuche-erg-sortierung>.sorting{display:block;width:auto;margin:0}
.hpsuche-erg-filterknopf{display:none;position:relative}  /* relative: Bezugsrahmen für den visually-hidden-Zusatz „, n Filter aktiv“ */
.hpsuche-erg-leiste .sorting.form-select{width:auto;min-width:220px;min-height:44px;padding:0 40px 0 16px;border:1px solid var(--hpd-grau-300,#cdcecd);border-radius:4px;background-color:#fff;
 color:var(--hpsuche-text);font-size:14.5px;font-weight:700}
@media(max-width:991.98px){
 .hpsuche-erg-leiste{grid-template-columns:1fr 1fr;grid-template-areas:"filter sort" "zahl zahl" "deckel deckel"}
 .hpsuche-erg-filterknopf{grid-area:filter;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;margin:0;padding:0 12px;border:1px solid var(--hpsuche-chip-rand);border-radius:4px;background:#fff;
  color:var(--hpsuche-text);font-size:15px;font-weight:700;cursor:pointer}
 .hpsuche-erg-filterknopf:hover{border-color:var(--hpsuche-text)}
 .hpsuche-erg-filterknopf:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}
 .hpsuche-erg-filterknopf b{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--hpsuche-dunkel);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
 .hpsuche-erg-leiste .sorting.form-select{width:100%;min-width:0;min-height:48px;padding:0 34px 0 12px;background-position:right 10px center}.hpsuche-erg-zaehler{font-size:13.5px}
}

/* ─── Kacheln, Blättern ─── */
.hpsuche-erg .cms-listing-col:not(.col-12){flex:0 0 auto;width:50%;max-width:none}
@media(min-width:768px){.hpsuche-erg .cms-listing-col:not(.col-12){width:33.3333%}}
@media(min-width:1280px){.hpsuche-erg .cms-listing-col:not(.col-12){width:25%}}
.hpsuche-erg .cms-listing-row{margin-bottom:0}
.hpsuche-erg .cms-listing-col .product-box{border:1px solid var(--hpsuche-linie);border-radius:4px;box-shadow:none;
 transition:box-shadow var(--hpsuche-tempo),transform var(--hpsuche-tempo),border-color var(--hpsuche-tempo)}
.hpsuche-erg .cms-listing-col .product-box:hover{border-color:transparent;box-shadow:var(--hpsuche-schatten-hoch);transform:translateY(-3px)}
.hpsuche-ausfuehrungen{display:inline-flex;align-self:flex-start;margin:6px 0 0;padding:3px 8px;border-radius:4px;background:#e8f3f9;color:var(--hpsuche-dunkel);font-size:12px;font-weight:700;line-height:1.35}
.product-box:has(.pflbase-product-listing-variant-info) .hpsuche-ausfuehrungen{display:none}
/* 0.2.5: Lager-Zeile in der Kachel (grüner Punkt wie im Filter „Verfügbarkeit"; Trier kräftig, sonst ruhiger) */
.hpsuche-kachel-lager{display:flex;align-items:center;gap:7px;margin:8px 0 4px;font-size:13px;line-height:1.35;color:var(--hpsuche-text);font-weight:600}
.hpsuche-kachel-lager::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--hpsuche-gruen)}
.hpsuche-kachel-lager-sofort{color:var(--hpsuche-gruen);font-weight:700}
.hpsuche-erg-waehlen{display:flex;align-items:center;justify-content:center;min-height:44px;border:0!important;background:var(--hpd-grau-100,#f4f5f5)!important;color:var(--hpsuche-text)!important;font-weight:700}
.hpsuche-erg-waehlen:hover{background:var(--hpd-grau-200,#e6e7e7)!important}
.hpsuche-erg-waehlen:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}
.hpsuche-erg .pagination{justify-content:center;gap:4px;margin:32px 0 0}
@media(max-width:575.98px){
 .hpsuche-erg .cms-listing-row{--bs-gutter-x:10px;--bs-gutter-y:10px;row-gap:0}
 .hpsuche-erg .product-box .card-body{padding:10px}
 .hpsuche-erg .product-image-wrapper{flex:0 0 140px!important;height:140px!important;margin-bottom:8px}
 .hpsuche-erg .product-image-wrapper .product-image{height:100%!important;max-height:140px!important;object-fit:contain}
 .hpsuche-erg .product-box .stretched-link::after{height:150px}
 .hpsuche-erg .product-name{font-size:14px;line-height:1.25}
 .hpsuche-erg .btn-buy,.hpsuche-erg .btn-detail{min-height:40px;font-size:13px}
 .hpsuche-erg .pagination .page-first,.hpsuche-erg .pagination .page-last{display:none}
}

/* ─── Offcanvas „Filter“ (Kopie des Panels, von unten) ─── */
.hpsuche-erg-fertig{display:none}
.offcanvas .hpsuche-erg-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}
.offcanvas .hpsuche-erg-panel>.filter-panel-offcanvas-header{position:sticky;top:0;z-index:2;flex:0 0 auto;height:64px;padding:0 8px 0 16px;background:#fff;border-bottom:1px solid var(--hpsuche-linie-2)}
.offcanvas .hpsuche-erg-panel .filter-panel-offcanvas-title{font-size:20px;font-weight:800}
.offcanvas .hpsuche-erg-panel .filter-panel-offcanvas-close{width:44px;height:44px;padding:0}
.offcanvas .hpsuche-erg-panel>.filter-panel{flex:1 1 auto;height:auto;min-height:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
.offcanvas .hpsuche-erg-fertig{display:block;position:sticky;bottom:0;z-index:2;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -8px 18px rgb(0 0 0/.07)}
.offcanvas .hpsuche-erg-fertig .btn{width:100%;min-height:52px;border:0;border-radius:4px;background:var(--hpsuche-blau-700)!important;color:#fff!important;font-size:16px;font-weight:700}
.offcanvas .hpsuche-erg-fertig .btn:hover{background:var(--hpsuche-dunkel)!important}
.offcanvas .hpsuche-erg-block .form-check,.offcanvas .hpsuche-erg-panel .filter-multi-select-properties .form-check,.offcanvas .hpsuche-erg-alle{min-height:44px}

/* ─── KI-Suchhilfe (nur mit config assistent UND Edge assistent = 'an') ─── */
.hpsuche-ki-knopf{display:inline-flex;align-items:center;gap:10px;height:44px;margin:0;padding:0 16px 0 12px;border:0;border-radius:4px;background:var(--hpsuche-tinte);color:#fff;font-size:14.5px;font-weight:700;line-height:1;
 white-space:nowrap;cursor:pointer;transition:background-color var(--hpsuche-tempo),box-shadow var(--hpsuche-tempo)}
.hpsuche-ki-knopf:hover,.hpsuche-ki-knopf[aria-expanded="true"]{background:#12303f;box-shadow:var(--hpsuche-schatten)}
.hpsuche-ki-knopf:focus-visible,.hpsuche-ki-form input:focus-visible,.hpsuche-ki-senden:focus-visible,.hpsuche-ki-vorlage:focus-visible,.hpsuche-ki-zu:focus-visible,.hpsuche-ki-band-knopf:focus-visible{outline:3px solid var(--hpsuche-blau);outline-offset:2px}
.hpsuche-ki-icon{flex:0 0 20px;width:20px;height:20px;color:var(--hpsuche-blau)}
.hpsuche-ki-knopf small{padding:3px 6px;border-radius:3px;background:rgb(0 158 227/.18);color:#7fd0f2;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.hpsuche-ki{margin:0 0 20px;overflow:hidden;border:1px solid var(--hpsuche-linie);border-radius:4px;background:#fff;box-shadow:var(--hpsuche-schatten);color:var(--hpd-text,#16181a)}
.hpsuche-ki[hidden]{display:none}
.hpsuche-ki-kopf{position:relative;isolation:isolate;overflow:hidden;padding:20px 64px 22px 24px;background:linear-gradient(115deg,#07131a 0%,#0c212c 55%,#0a1820 100%);color:#fff}
.hpsuche-ki-kopf::after{content:"";position:absolute;top:0;right:-110px;bottom:0;z-index:-1;width:190px;background:linear-gradient(135deg,rgb(0 158 227/.3),rgb(0 158 227/0));transform:skewX(-18deg);pointer-events:none}
.hpsuche-ki-kicker{display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--hpsuche-blau);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.hpsuche-ki-kicker::before{content:"";flex:0 0 28px;width:28px;height:3px;background:currentColor}
.hpsuche-ki-titel,#hpsuche-ki-titel{margin:0 0 14px!important;color:#fff!important;font-size:clamp(20px,1.1rem + .6vw,24px)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:0}
.hpsuche-ki-form{display:flex;gap:8px;max-width:760px;margin:0}
.hpsuche-ki-form input{flex:1;min-width:0;height:48px;margin:0;padding:0 16px;border:0;border-radius:4px;background:#fff;box-shadow:none;color:#16181a;font-size:16px}
.hpsuche-ki-form input::placeholder{color:var(--hpsuche-grau);opacity:1}
.hpsuche-ki-senden{flex:0 0 auto;height:48px;margin:0;padding:0 20px;border:0;border-radius:4px;background:var(--hpsuche-blau);color:var(--hpsuche-tinte);font-size:15px;font-weight:800;white-space:nowrap;cursor:pointer}
.hpsuche-ki-senden:hover{background:#fff}
/* Gesperrt: aria-disabled (bleibt fokussierbar, der Submit-Handler sperrt das Absenden) wie :disabled */
.hpsuche-ki-senden:is(:disabled,[aria-disabled="true"]){opacity:.6;cursor:not-allowed}
.hpsuche-ki-senden:is(:disabled,[aria-disabled="true"]):hover{background:var(--hpsuche-blau)}
.hpsuche-ki-hilfe{margin:10px 0 0;color:rgb(255 255 255/.78);font-size:13px}.hpsuche-ki-hilfe.is-hervor{color:#fff;font-weight:700}
.hpsuche-ki-vorlagen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.hpsuche-ki-vorlage{height:36px;margin:0;padding:0 12px;border:1px solid rgb(255 255 255/.35);border-radius:4px;background:transparent;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer}
.hpsuche-ki-vorlage:hover{border-color:#fff;background:rgb(255 255 255/.08)}
.hpsuche-ki-zu{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:4px;background:none;
 color:rgb(255 255 255/.85);font-size:24px;line-height:1;cursor:pointer}
.hpsuche-ki-zu:hover{background:rgb(255 255 255/.08);color:#fff}
/* Nach dem Fragen (laedt, antwort, leer, fehler) bleiben im Kopf nur Kicker und ×: die Antwort beginnt oben, am Handy im
   ersten Bildschirm. Zurück zur Eingabe über „Andere Frage“ im Inhalt (kiNeu → eingabe). pause und bremse behalten
   Formular bzw. Countdown. Ausnahme: Steht der Fokus im Formular (eben per Tastatur oder Klick gefragt), bleibt es sichtbar,
   bis der Fokus weitergeht (kiZeige setzt ihn auf den Text) — sonst fiele er beim Laden auf BODY. */
.hpsuche-ki:is([data-zustand="laedt"],[data-zustand="antwort"],[data-zustand="leer"],[data-zustand="fehler"]) :is(.hpsuche-ki-titel,.hpsuche-ki-hilfe,.hpsuche-ki-vorlagen,.hpsuche-ki-form:not(:focus-within)){display:none}
.hpsuche-ki-inhalt{padding:20px 24px}.hpsuche-ki-inhalt:empty,.hpsuche-ki-inhalt:not(:has(*)){display:none}
.hpsuche-ki[data-zustand="laedt"] .hpsuche-ki-inhalt{display:block;min-height:220px}
.hpsuche-ki-frage{margin:0 0 8px;color:var(--hpsuche-grau);font-size:14px}
.hpsuche-ki-frage button,.hpsuche-ki-frage .hpsuche-ki-neu{margin:0 0 0 6px;padding:0;border:0;background:none;color:var(--hpsuche-blau-700);font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;vertical-align:baseline;cursor:pointer}
.hpsuche-ki-text{max-width:72ch;margin:0 0 16px;color:#16181a;font-size:16px;line-height:1.6;white-space:pre-line}
.hpsuche-ki-text:focus{outline:0}
/* auto-fit: die Karten füllen die Breite (auto-fill ließ bei 3 Karten die 4. Spalte leer); am Handy Wischreihe (unten) */
.hpsuche-ki-produkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 16px;padding:0;list-style:none}
.hpsuche-ki-karte{display:grid;grid-template-columns:64px minmax(0,1fr);align-content:center;align-items:center;column-gap:12px;min-height:84px;height:100%;padding:10px;
 border:1px solid var(--hpsuche-linie-2);border-radius:4px;background:#fff;color:inherit!important;text-decoration:none!important;
 transition:box-shadow var(--hpsuche-tempo),transform var(--hpsuche-tempo),border-color var(--hpsuche-tempo)}
.hpsuche-ki-karte:hover{border-color:transparent;box-shadow:var(--hpsuche-schatten-hoch);transform:translateY(-2px)}
.hpsuche-ki-karte:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}
.hpsuche-ki-karte img,.hpsuche-ki-bild-leer{display:block;width:64px;height:64px;flex:none;border:0;border-radius:4px;object-fit:contain}
.hpsuche-ki-bild-leer{background:var(--hpsuche-flaeche)}
.hpsuche-ki-karte>img,.hpsuche-ki-karte>.hpsuche-ki-bild-leer{grid-row:1/3}
.hpsuche-ki-karte-titel{grid-column:2;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:700;line-height:1.35}
.hpsuche-ki-karte-meta{grid-column:2;display:block;margin-top:4px;color:var(--hpsuche-grau);font-size:12.5px}
.hpsuche-ki-weiter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.hpsuche-ki-weiter-titel{margin:0 4px 0 0;color:var(--hpsuche-text-2);font-size:14px}
/* „Weiter mit der Suche:“ als p vor der Linkliste (Screenreader: kein Listeneintrag): der gemeinsame Rahmen und eine
   innere Liste laufen wie bisher in einer Zeile. Greift für jeden Rahmen um den Titel, gleich wie er heißt. */
.hpsuche-ki-inhalt :has(>.hpsuche-ki-weiter-titel){display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.hpsuche-ki-weiter ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.hpsuche-ki-weiter a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid var(--hpsuche-chip-rand);border-radius:4px;background:#fff;color:var(--hpsuche-text)!important;
 font-size:14px;font-weight:700;text-decoration:none!important}
.hpsuche-ki-weiter a:hover{border-color:var(--hpsuche-text)}
.hpsuche-ki-weiter a:focus-visible{outline:2px solid var(--hpsuche-dunkel);outline-offset:2px}
.hpsuche-ki-beratung{margin:16px 0 0;color:var(--hpsuche-text-2);font-size:14px}
.hpsuche-ki-text a,.hpsuche-ki-beratung a{color:var(--hpsuche-blau-700)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hpsuche-ki-fuss{margin:0;padding:12px 24px 16px;border-top:1px solid var(--hpsuche-linie-2);color:var(--hpsuche-grau);font-size:12.5px;line-height:1.5}
.hpsuche-ki-fuss a{color:var(--hpsuche-blau-700)!important;text-decoration:underline}
/* Laden: 3 Balken (Breiten 100/92/60 % inline) und 3 Kartenplätze li.hpsuche-ki-karte.hpsuche-ki-platz (Bild-<i> + Zeilen-<i>) */
.hpsuche-ki-skelett i{display:block;height:12px;margin:0 0 10px;border-radius:4px;background:linear-gradient(90deg,#f4f5f5 0,#e6e7e7 50%,#f4f5f5 100%) 0 0/200% 100%;
 animation:hpsuche-schimmer 1.2s linear infinite}
.hpsuche-ki-platz{pointer-events:none}.hpsuche-ki-platz i{margin:0}
@keyframes hpsuche-schimmer{to{background-position:-200% 0}}
.hpsuche-ki-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:32px 0 0;padding:20px 24px;border-radius:4px;background:var(--hpsuche-tinte);color:#fff}
.hpsuche-ki-band .hpsuche-ki-kicker{margin:0 0 4px}.hpsuche-ki-band-text{margin:0;color:#fff;font-size:16px;font-weight:700;line-height:1.4}
.hpsuche-ki-band-knopf{height:44px;margin:0;padding:0 20px;border:2px solid rgb(255 255 255/.5);border-radius:4px;background:transparent;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.hpsuche-ki-band-knopf:hover{border-color:#fff;background:rgb(255 255 255/.08)}
@media(max-width:679px){
 .hpsuche-ki-kopf{padding:18px 56px 18px 16px}.hpsuche-ki-inhalt{padding:16px}.hpsuche-ki-fuss{padding:12px 16px 14px}
 .hpsuche-ki-form{flex-direction:column}.hpsuche-ki-form input{flex:0 0 auto;width:100%}.hpsuche-ki-senden,.hpsuche-ki-band-knopf{width:100%}.hpsuche-ki-band{padding:18px 16px}
 .hpsuche-ki-produkte{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory}
 .hpsuche-ki-karte{scroll-snap-align:start}
}

/* ─── Reduzierte Bewegung ─── */
@media(prefers-reduced-motion:reduce){
 .hpsuche-erg .cms-listing-col .product-box,.hpsuche-ki-karte,.hpsuche-ki-knopf{transition:none}
 .hpsuche-erg .cms-listing-col .product-box:hover,.hpsuche-ki-karte:hover{transform:none}
 .hpsuche-ki-skelett i{animation:none}
}