/*
 * KaelteRechnerSW6 – eigenes Filterpanel ("Filter-Diät").
 * Nur eingebunden bei KaelteRechnerSW6.config.filterPanelAktiv = true (base.html.twig).
 *
 * Optik nach dem vereinbarten Zielbild (Claude-Design-Mockup Listing / MobileFilter /
 * MobileListe): weiße Filterkarte, helle Filterknöpfe mit Zähler, Werte-Dropdown mit
 * sichtbarer Suche, Chips "Gruppe: Wert", mobil Akkordeon + Fuß mit zwei Knöpfen.
 * Schrift bleibt die Theme-Schrift (nichts gesetzt).
 *
 * Geltungsbereich – nie global:
 *   .kfp …                         Panel-Inhalt (Server-Markup, auch ohne JS)
 *   .filter-panel-wrapper …        nur die Seite (Desktop); ins Blatt wird nur das innere HTML kopiert
 *   .offcanvas-filter …            nur das mobile Blatt
 *   .kfp-host                      .filter-panel mit unserem Panel (setzt das JS); alternativ :has(> .kfp)
 *   .kfp-toggle                    "Produkte filtern" (setzt das JS nur, wenn unser Panel auf der Seite ist)
 * Spezifität: zenit/Core stehen bei (0,2,0)–(0,4,1); unsere Regeln liegen jeweils darüber und
 * stehen zudem später im Dokument. !important nur gegen Popper-Inline-Styles im Blatt, für
 * Ausblend-Zustände und gegen das Inline-z-index des Trusted-Shops-Badges.
 *
 * WCAG 2.1 AA (Kontraste gerechnet): Text #2E2E2E/#FFF 13,6:1, #156F94/#FFF 5,6:1,
 * #FFF/#156F94 5,6:1, #6B7480/#FFF 4,7:1 (nie auf Hellblau), Eingabe-/Checkbox-Ränder
 * #878F9A 3,3:1 bzw. #6B7480 4,7:1 (1.4.11), Fokus sichtbar, Touch-Ziele >= 44px.
 */

.kfp-host,
.kfp,
.kfp-sheet-footer,
.kfp-toggle {
    --kfp-primary: #156f94;
    --kfp-primary-hover: #0e4f6b;
    --kfp-primary-soft: #e3f5fd;
    --kfp-chip-hover: #cfeaf7;
    --kfp-row-hover: #f3f8fb;
    --kfp-border: #c8cdd4;
    --kfp-border-ui: #878f9a;
    --kfp-card-border: #e0e4e8;
    --kfp-text: #2e2e2e;
    --kfp-text-2: #454444;
    --kfp-muted: #6b7480;
    --kfp-card: #fff;
    --kfp-radius: 5px;
    --kfp-focus: 0 0 0 2px #fff, 0 0 0 4px #156f94;
    --kfp-focus-inset: inset 0 0 0 2px #156f94;
}

/* ================= Grundgerüst (alle Kontexte) ================= */

.kfp {
    display: block;
    width: 100%;
}

.kfp-list {
    width: 100%;
}

.kfp-list > .kfp-item {
    display: block;
    min-width: 0;
}

.kfp-is-sidebar .kfp-list > .kfp-item,
.offcanvas-filter .kfp-list > .kfp-item {
    width: 100%;
}

/* Unter 992 px macht zenit jede .filter-panel-item zu einer Zeile über die volle Breite;
   die Hülle .kfp-item muss mitziehen, sonst stünden die Gruppen nebeneinander. */
@media (max-width: 991.98px) {
    .filter-panel:not(.is--sidebar) .kfp-list > .kfp-item {
        width: 100%;
    }
}

/* R7: Gruppen ohne Treffer ausblenden. Nur die KLASSE .disabled zählt (6.7.14 setzt das
   Attribut disabled schon vor der JS-Initialisierung). Gruppen mit Auswahl bleiben.
   Bewusst getrennte Regeln: Browser ohne :has() verwerfen sonst die GANZE Selektorliste. */
.kfp .kfp-item.kfp-empty {
    display: none !important;
}

.kfp .kfp-item:has(.filter-panel-item-toggle.disabled):not(:has(input:checked)),
.kfp .kfp-item:has(.filter-boolean.disabled):not(:has(input:checked)) {
    display: none !important;
}

.kfp .kfp-more[hidden] {
    display: none !important;
}

/* Gruppen-Abstände von Core/zenit neutralisieren (INL setzt (0,4,0) margin-right:0) */
.kfp .kfp-list > .kfp-item > .filter-panel-item {
    margin: 0;
}

/* ================= D2 Filterknopf ================= */

.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle {
    --bs-btn-color: var(--kfp-text);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--kfp-border);
    --bs-btn-hover-color: var(--kfp-text);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--kfp-primary);
    --bs-btn-active-color: var(--kfp-text);
    --bs-btn-active-bg: var(--kfp-primary-soft);
    --bs-btn-active-border-color: var(--kfp-primary);
    --bs-btn-focus-box-shadow: var(--kfp-focus);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--kfp-border);
    border-radius: var(--kfp-radius);
    background-color: #fff;
    color: var(--kfp-text);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle:hover {
    border-color: var(--kfp-primary);
    background-color: #fff;
    color: var(--kfp-text);
}

/* mit Auswahl: Rahmen Primär (+ Badge) */
.kfp .kfp-item.kfp-has-sel .filter-panel-item .filter-panel-item-toggle {
    border-color: var(--kfp-primary);
}

/* offen */
.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle.show,
.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle[aria-expanded="true"] {
    border-color: var(--kfp-primary);
    background-color: var(--kfp-primary-soft);
    color: var(--kfp-text);
}

.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

/* Pfeil: vorhandenes Icon; zenit färbt weiß bzw. #69C8F3 und dreht bei .show selbst */
.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle .icon-filter-panel-item-toggle {
    margin: 0 0 0 2px;
    color: var(--kfp-text);
}

.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle.show .icon-filter-panel-item-toggle,
.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle:hover .icon-filter-panel-item-toggle {
    color: var(--kfp-primary);
}

/* zenit färbt im offenen Zustand das <svg> selbst ((0,4,1)) → Farbe vom Icon erben */
.kfp .kfp-item .filter-panel-item .filter-panel-item-toggle .icon-filter-panel-item-toggle svg {
    color: inherit;
}

/* Zähler-Badge (JS, aria-hidden; Screenreader bekommen die Zahl über das aria-label) */
.kfp .filter-panel-item-toggle .kfp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--kfp-primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
}

/* Core-Zähler "(2)" nur ausblenden, wenn unser Badge davorsteht (JS lief) */
.kfp .filter-panel-item-toggle .kfp-count ~ .filter-multi-select-count {
    display: none;
}

/* Auswahltext "· R290" nur im Blatt */
.kfp .filter-panel-item-toggle .kfp-sel {
    display: none;
}

/* ================= D3 "Weitere Filter (n)" ================= */

.kfp-more {
    width: 100%;
    margin: 0;
}

.kfp .kfp-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px dashed var(--kfp-border);
    border-radius: var(--kfp-radius);
    background: #fff;
    color: var(--kfp-text);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* getrennt: Firefox kennt ::-webkit-details-marker nicht und verwürfe sonst beide */
.kfp-more-toggle::-webkit-details-marker {
    display: none;
}

.kfp-more-toggle::marker {
    content: "";
}

.kfp .kfp-more-toggle:hover {
    border-color: var(--kfp-primary);
}

.kfp .kfp-more-toggle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp-more-toggle .icon {
    color: currentColor;
    transition: transform .2s ease;
}

.kfp-more-toggle .icon svg {
    top: 0;
}

.kfp-more[open] > .kfp-more-toggle .icon {
    transform: rotate(180deg);
}

.kfp-more-label-open,
.kfp-more[open] > .kfp-more-toggle .kfp-more-label-closed {
    display: none;
}

.kfp-more[open] > .kfp-more-toggle .kfp-more-label-open {
    display: inline;
}

.kfp-is-sidebar .kfp-more-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* ================= D1 Filterkarte + Knopfzeile (Seite, nicht Sidebar) ================= */

/* :has() ist der Normalfall (kein Layoutsprung beim Laden); .kfp-host die JS-Rückfallebene
   für Browser ohne :has(). Getrennte Regeln, siehe oben. */
.filter-panel-wrapper > .filter-panel:not(.is--sidebar):has(> .kfp) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--kfp-card-border, #e0e4e8);
    border-radius: 8px;
    background: #fff;
}

.filter-panel-wrapper > .filter-panel.kfp-host:not(.is--sidebar) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--kfp-card-border);
    border-radius: 8px;
    background: #fff;
}

/* Zeile a: Knöpfe fließen inline und brechen um; "Weitere Filter" steht direkt dahinter.
   Inline statt Flex, weil die Knöpfe in zwei Containern liegen (role=list sichtbar und in
   <details>) – display:contents wäre für role=list und <details> riskant.
   font-size:0 schluckt die Leerzeichen zwischen den Inline-Blöcken. */
.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) {
    margin: 0 0 -8px;
    font-size: 0;
}

.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) > .kfp-list-main {
    display: inline;
    width: auto;
    margin: 0;
}

.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) > .kfp-list-main > .kfp-item {
    display: inline-block;
    width: auto;
    margin: 0 8px 8px 0;
    vertical-align: top;
    font-size: .875rem;
    line-height: 1.5;
}

.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) > .kfp-more {
    display: inline-block;
    width: auto;
    margin: 0 0 8px;
    vertical-align: top;
    font-size: .875rem;
    line-height: 1.5;
}

/* aufgeklappt: "Weniger Filter" beginnt eine eigene Zeile, darunter die weiteren Gruppen */
.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) > .kfp-more[open] {
    display: block;
}

.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) .kfp-list-more {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 8px 0 0;
}

.filter-panel-wrapper .kfp:not(.kfp-is-sidebar) .kfp-list-more > .kfp-item {
    width: auto;
}

/* ================= D4 Werte-Dropdown (Seite) ================= */

.filter-panel-wrapper .kfp .filter-panel-item .filter-panel-item-dropdown.dropdown-menu {
    width: 340px;
    min-width: 0;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    /* Fokus nie unter der klebenden Suche (ca. 81px hoch): beim Rückwärts-Tabben scrollt
       der Browser die Checkbox sonst nicht nach, weil sie formal im Scrollbereich liegt */
    scroll-padding-top: 88px;
    padding: 14px;
    border: 1px solid var(--kfp-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(46, 46, 46, .16);
    color: var(--kfp-text);
    font-size: .875rem;
}

/* Suche bleibt beim Scrollen im Dropdown oben. Sticky bezieht sich auf die Inhaltskante
   (innerhalb des 14px-Paddings) → top:-14px; das eigene Padding ersetzt das des Menüs. */
.filter-panel-wrapper .kfp .filter-panel-item-dropdown .kfp-search {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin: -14px -14px 6px;
    padding: 14px 14px 6px;
    background: #fff;
}

/* ================= Werte (Seite und Blatt) ================= */

.kfp .filter-panel-item .filter-multi-select-list {
    min-width: 0;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kfp .filter-multi-select-list .filter-multi-select-list-item {
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    opacity: 1;
}

.kfp .filter-multi-select-list .filter-multi-select-list-item:hover {
    background: var(--kfp-row-hover);
}

.kfp .filter-multi-select-list .filter-multi-select-list-item .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin: 0;
    padding: 0;
}

.kfp .filter-multi-select-list-item .form-check .form-check-input {
    flex: none;
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--kfp-muted);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}

.kfp .filter-multi-select-list-item .form-check .form-check-input:checked {
    border-color: var(--kfp-primary);
    background-color: var(--kfp-primary);
}

.kfp .filter-multi-select-list-item .form-check .form-check-input:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp .filter-multi-select-list-item .form-check .form-check-label {
    flex: 1 1 auto;
    width: auto;
    padding: 6px 0;
    color: var(--kfp-text);
    font-size: .875rem;
    line-height: 1.3;
    cursor: pointer;
}

/* Werte ohne Treffer (Core li.disabled): gedämpft statt halbtransparent */
.kfp .filter-multi-select-list .filter-multi-select-list-item.disabled .form-check-label,
.kfp .filter-multi-select-list-item .form-check .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
    color: var(--kfp-muted);
    cursor: not-allowed;
}

/* Abschnitte nach Sicherheitsklasse (nur Kältemittel, JS aus data-kfp-safety) */
.kfp .filter-multi-select-list > .kfp-sec {
    margin: 10px 0 4px;
    padding: 0 4px;
    color: var(--kfp-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.kfp .filter-multi-select-list > .kfp-sec:first-child {
    margin-top: 0;
}

/* Versorgungsspannung als Netzklassen (JS aus data-kfp-netz, Lukas 29.10.2026): je Klasse eine Zeile;
   ihre Einzelwerte bleiben für den Core im DOM, sichtbar ist nur die Zeile. */
.kfp .filter-multi-select-list > .kfp-netz-member {
    display: none !important;
}

.kfp .kfp-netz-row .form-check-label {
    font-weight: 600;
}

/* Chips: eine Netzklasse = ein Chip, die Chips ihrer übrigen Werte ausgeblendet */
.filter-panel-active-container .kfp-chip-hidden {
    display: none !important;
}

/* ---------- Wertesuche (R8), Label sichtbar ---------- */

.kfp-search {
    min-width: 0;
}

.kfp .kfp-search .kfp-search-label {
    display: block;
    margin: 0 0 4px;
    color: var(--kfp-text);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.kfp .kfp-search .kfp-search-input.form-control {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--kfp-border-ui);
    border-radius: var(--kfp-radius);
    background-color: #fff;
    color: var(--kfp-text);
    font-size: 1rem; /* iOS: kein Auto-Zoom unter 16px */
    box-shadow: none;
}

.kfp .kfp-search .kfp-search-input.form-control:focus {
    border-color: var(--kfp-primary);
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp-search-empty {
    margin: .375rem 0 0;
    color: var(--kfp-text);
    font-size: .875rem;
}

.kfp-search-empty:empty {
    display: none;
}

.kfp .filter-multi-select-list-item.kfp-nomatch {
    display: none !important;
}

/* R7: bei mehr als 10 Werten nicht zutreffende Werte ausblenden statt nur ausgrauen */
.kfp-item.kfp-many .filter-multi-select-list-item.disabled:not(:has(input:checked)) {
    display: none !important;
}

/* ---------- Preis ---------- */

.kfp .filter-range-dropdown .filter-range-container {
    gap: 8px;
    align-items: flex-end;
    padding: 0;
}

.kfp .filter-range-container .filter-range-min,
.kfp .filter-range-container .filter-range-max {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    color: var(--kfp-text);
    font-size: .8125rem;
    font-weight: 500;
}

.kfp .filter-range-container .min-input,
.kfp .filter-range-container .max-input {
    height: 40px;
    margin-top: 4px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--kfp-border-ui);
    border-radius: var(--kfp-radius);
    color: var(--kfp-text);
    font-size: 1rem;
}

.kfp .filter-range-container .min-input:focus,
.kfp .filter-range-container .max-input:focus {
    border-color: var(--kfp-primary);
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp .filter-range-container .filter-range-unit {
    height: 38px;
    color: var(--kfp-text-2);
    line-height: 38px;
}

.kfp .filter-range-container .filter-range-divider {
    width: auto;
    height: 40px;
    padding: 0 2px;
    line-height: 40px;
}

/* ---------- versandkostenfrei (Boolean ohne Dropdown) wie D2 ---------- */

.kfp .kfp-item .filter-boolean {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    height: auto;
    padding: 0 12px;
    border: 1px solid var(--kfp-border);
    border-radius: var(--kfp-radius);
    background-color: #fff;
    color: var(--kfp-text);
    font-size: .875rem;
    font-weight: 500;
    text-transform: none;
}

.kfp .kfp-item .filter-boolean:hover,
.kfp .kfp-item .filter-boolean.is-active {
    border-color: var(--kfp-primary);
    background-color: #fff;
    color: var(--kfp-text);
}

.kfp .kfp-item .filter-boolean .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.kfp .kfp-item .filter-boolean .form-check-input {
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--kfp-muted);
    background-color: #fff;
}

.kfp .kfp-item .filter-boolean .form-check-input:checked {
    border-color: var(--kfp-primary);
    background-color: var(--kfp-primary);
}

/* ================= D5 Aktive Chips + "Alle entfernen" ================= */

/* Core-Container liegt neben .kfp, nicht darin → über .kfp-host gescopt */
.kfp-host .filter-panel-active-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
}

.kfp-host .filter-panel-active-container:not(:has(.filter-active)) {
    display: none;
}

/* "Aktiv:" ohne eigenen Kindknoten (Core schreibt den Container per innerHTML neu) */
.kfp-host .filter-panel-active-container.kfp-has-chips[data-kfp-active-label]::before {
    content: attr(data-kfp-active-label);
    margin-right: 2px;
    color: var(--kfp-text-2);
}

.kfp-host .filter-panel-active-container .filter-active.btn {
    --bs-btn-color: var(--kfp-text);
    --bs-btn-bg: var(--kfp-primary-soft);
    --bs-btn-border-color: var(--kfp-primary);
    --bs-btn-hover-color: var(--kfp-text);
    --bs-btn-hover-bg: var(--kfp-chip-hover);
    --bs-btn-hover-border-color: var(--kfp-primary);
    --bs-btn-active-color: var(--kfp-text);
    --bs-btn-active-bg: var(--kfp-chip-hover);
    --bs-btn-active-border-color: var(--kfp-primary);
    --bs-btn-padding-x: 10px;
    --bs-btn-border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--kfp-primary);
    border-radius: 999px;
    background-color: var(--kfp-primary-soft);
    color: var(--kfp-text);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

.kfp-host .filter-panel-active-container .filter-active.btn:hover {
    background-color: var(--kfp-chip-hover);
    color: var(--kfp-text);
}

.kfp-host .filter-panel-active-container .filter-active.btn:focus-visible,
.kfp-host .filter-panel-active-container .filter-reset-all.btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp-host .filter-panel-active-container .filter-active .fs-4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
}

.kfp-host .filter-panel-active-container .filter-reset-all.btn {
    --bs-btn-color: var(--kfp-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--kfp-primary-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--kfp-primary-hover);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    min-height: 32px;
    height: auto;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: var(--kfp-radius);
    background: none;
    color: var(--kfp-primary);
    font-size: .8125rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
}

.kfp-host .filter-panel-active-container .filter-reset-all.btn:hover {
    color: var(--kfp-primary-hover);
}

/* ================= Touch: Ziele >= 44px ================= */

@media (pointer: coarse) {
    .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle,
    .kfp .kfp-more-toggle,
    .kfp .kfp-item .filter-boolean {
        min-height: 44px;
    }

    .kfp .filter-multi-select-list .filter-multi-select-list-item .form-check {
        min-height: 44px;
    }

    .kfp-host .filter-panel-active-container .filter-active.btn,
    .kfp-host .filter-panel-active-container .filter-reset-all.btn {
        min-height: 44px;
    }
}

/* ================= M1 Mobil: Blatt mit Akkordeon ================= */

/* Blatt als Spalte: Fuß sitzt immer am Blattende (margin-top:auto), sticky bei Überlauf.
   scroll-padding: fokussierte Elemente nie unter der klebenden Suche (ca. 77px) oder dem
   klebenden Fuß (ca. 83px + Safe-Area) – sonst verliert man beim Tabben den Fokus. */
.offcanvas-filter > .filter-panel:has(> .kfp) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: normal;
    padding-bottom: 0;
    scroll-padding-top: 84px;
    scroll-padding-bottom: 92px;
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.offcanvas-filter > .filter-panel.kfp-host {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: normal;
    padding-bottom: 0;
    scroll-padding-top: 84px;
    scroll-padding-bottom: 92px;
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.offcanvas-filter > .filter-panel > .kfp,
.offcanvas-filter > .filter-panel.kfp-host > .filter-panel-active-container {
    flex: 0 0 auto;
}

.offcanvas-filter .kfp .kfp-list {
    margin: 0;
}

.offcanvas-filter .kfp .kfp-list > .kfp-item {
    display: block;
    width: 100%;
    margin: 0;
}

.offcanvas-filter .kfp .kfp-list > .kfp-item > .filter-panel-item {
    display: block;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--kfp-card-border);
}

.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    color: var(--kfp-text);
    font-size: .9375rem;
    font-weight: 600;
}

.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle:hover,
.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle.show,
.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle[aria-expanded="true"],
.offcanvas-filter .kfp .kfp-item.kfp-has-sel .filter-panel-item .filter-panel-item-toggle {
    border: 0;
    background-color: #fff;
    color: var(--kfp-text);
}

.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus-inset);
}

.offcanvas-filter .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle .icon-filter-panel-item-toggle {
    margin-left: auto;
}

/* Blatt: Auswahl "· R290, R600a" statt Badge */
.offcanvas-filter .kfp .filter-panel-item-toggle .kfp-sel {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 4px;
    overflow: hidden;
    color: var(--kfp-primary);
    font-size: .8125rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offcanvas-filter .kfp .filter-panel-item-toggle .kfp-count {
    display: none;
}

/* Werte inline unter der Zeile. !important nur gegen Poppers Inline-Styles, falls eine
   Gruppe doch eine Popper-Instanz hat (das JS stellt Kopien auf display:static). */
.offcanvas-filter .kfp .filter-panel-item .filter-panel-item-dropdown.dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0 4px 10px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: var(--kfp-text);
}

.offcanvas-filter .kfp .filter-multi-select-list .filter-multi-select-list-item .form-check {
    min-height: 44px;
}

.offcanvas-filter .kfp .filter-multi-select-list-item .form-check .form-check-input {
    width: 20px;
    height: 20px;
}

.offcanvas-filter .kfp .filter-multi-select-list-item .form-check .form-check-label {
    font-size: .9375rem;
}

/* Touch-Ziele im Blatt >= 44px auch für Eingabefelder */
.offcanvas-filter .kfp .kfp-search .kfp-search-input.form-control {
    min-height: 44px;
}

.offcanvas-filter .kfp .filter-range-container .min-input,
.offcanvas-filter .kfp .filter-range-container .max-input {
    height: 44px;
}

.offcanvas-filter .kfp .filter-range-container .filter-range-unit {
    height: 42px;
    line-height: 42px;
}

.offcanvas-filter .kfp .filter-panel-item-dropdown .kfp-search {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 6px;
    padding: 6px 0;
    background: #fff;
}

/* "Weitere Filter" im Blatt als Zeile */
.offcanvas-filter .kfp .kfp-more {
    display: block;
    width: 100%;
    margin: 0;
}

.offcanvas-filter .kfp .kfp-more-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--kfp-card-border);
    border-radius: 0;
    color: var(--kfp-primary);
    font-size: .9375rem;
    font-weight: 600;
}

.offcanvas-filter .kfp .kfp-more-toggle:hover {
    border-color: var(--kfp-card-border);
    background: var(--kfp-row-hover);
}

.offcanvas-filter .kfp .kfp-more-toggle:focus-visible {
    box-shadow: var(--kfp-focus-inset);
}

.offcanvas-filter .kfp .kfp-item .filter-boolean {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--kfp-card-border);
    border-radius: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.offcanvas-filter > .filter-panel.kfp-host > .filter-panel-active-container {
    margin-top: 12px;
}

.offcanvas-filter .kfp-host .filter-panel-active-container .filter-active.btn,
.offcanvas-filter .kfp-host .filter-panel-active-container .filter-reset-all.btn {
    min-height: 44px;
}

/* ================= M2 Fuß des Blatts ================= */

/* ohne Offcanvas (Desktop) und ohne diese CSS-Datei bleibt der Fuß per [hidden] verborgen */
.kfp-sheet-footer {
    display: none;
}

.offcanvas-filter .kfp-sheet-footer,
.offcanvas-filter .kfp-sheet-footer[hidden] {
    display: block !important;
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
    width: calc(100% + 50px);
    margin: auto -25px 0; /* bündig über das Panel-Padding von zenit (25px) */
    padding: 12px 25px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--kfp-card-border);
    background: #fff;
    box-shadow: none;
}

.kfp-sheet-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.kfp-sheet-footer .kfp-sheet-reset.btn,
.kfp-sheet-footer .kfp-show-results.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    white-space: normal;
}

.kfp-sheet-footer .kfp-sheet-reset.btn {
    flex: 1 1 0;
    border: 1px solid var(--kfp-border);
    background: #fff;
    color: var(--kfp-text);
    font-weight: 500;
}

.kfp-sheet-footer .kfp-sheet-reset.btn:hover {
    border-color: var(--kfp-primary);
    background: #fff;
    color: var(--kfp-text);
}

.kfp-sheet-footer .kfp-sheet-reset.btn[aria-disabled="true"] {
    border-color: var(--kfp-card-border);
    color: var(--kfp-muted);
    cursor: default;
}

.kfp-sheet-footer .kfp-show-results.btn {
    flex: 1.6 1 0;
    border: 1px solid var(--kfp-primary);
    background: var(--kfp-primary);
    color: #fff;
    font-weight: 600;
}

.kfp-sheet-footer .kfp-show-results.btn:hover,
.kfp-sheet-footer .kfp-show-results.btn:active {
    border-color: var(--kfp-primary-hover);
    background: var(--kfp-primary-hover);
    color: #fff;
}

.kfp-sheet-footer .kfp-sheet-reset.btn:focus-visible,
.kfp-sheet-footer .kfp-show-results.btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--kfp-focus);
}

.kfp-show-results[aria-busy="true"] {
    cursor: progress;
}

/* Trusted-Shops-Badge (z-index 2147483647, von zenit um 40px angehoben) läge genau auf dem
   Primärknopf. Wie zenits eigene Regel für Modals (.modal-open [id*=trustbadge-container])
   nur ausblenden, solange UNSER Blatt offen ist; Offcanvas setzt kein .modal-open. */
body:has(.offcanvas-filter.show .kfp) [id^="trustbadge-container"] {
    display: none !important;
}

/* Ohne :has(): Platz rechts für das Badge freihalten */
@supports not selector(:has(a)) {
    .offcanvas-filter .kfp-sheet-footer {
        padding-right: 96px;
    }
}

/* ================= M3 "Produkte filtern" ================= */

.kfp-toggle-sentinel {
    display: block;
    width: 100%;
    height: 0;
}

@media (max-width: 991.98px) {
    .btn.filter-panel-wrapper-toggle.kfp-toggle {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--kfp-primary);
        --bs-btn-border-color: var(--kfp-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--kfp-primary-hover);
        --bs-btn-hover-border-color: var(--kfp-primary-hover);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--kfp-primary-hover);
        --bs-btn-active-border-color: var(--kfp-primary-hover);
        --bs-btn-focus-box-shadow: var(--kfp-focus);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid var(--kfp-primary);
        border-radius: var(--kfp-radius);
        background-color: var(--kfp-primary);
        color: #fff;
        font-weight: 600;
        line-height: 1.2;
        text-transform: none;
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle:hover,
    .btn.filter-panel-wrapper-toggle.kfp-toggle:active {
        border-color: var(--kfp-primary-hover);
        background-color: var(--kfp-primary-hover);
        color: #fff;
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle:focus-visible {
        outline: 2px solid transparent;
        box-shadow: var(--kfp-focus);
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle .icon {
        margin: 0;
        color: currentColor;
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle .kfp-toggle-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #fff;
        color: var(--kfp-primary);
        font-size: .6875rem;
        font-weight: 600;
        line-height: 1;
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle.kfp-toggle-fixed {
        position: fixed;
        left: 50%;
        /* über der Lieferland-Pille von HhIntlSuite (unten links, bis ~45 px) und dem
           Nach-oben-Knopf (unten rechts, bis ~48 px) – Staging-Messung 07.10. */
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 1030; /* unter Offcanvas-Backdrop (1040) */
        width: auto;
        max-width: calc(100vw - 10rem); /* Platz für Trusted-Shops-Badge und Nach-oben-Knopf rechts unten */
        margin: 0;
        white-space: nowrap;
        box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25);
    }

    .btn.filter-panel-wrapper-toggle.kfp-toggle.kfp-toggle-fixed:focus-visible {
        outline: 2px solid transparent;
        box-shadow: var(--kfp-focus), 0 .25rem 1rem rgba(0, 0, 0, .25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kfp-more-toggle .icon,
    .kfp .kfp-item .filter-panel-item .filter-panel-item-toggle {
        transition: none;
    }
}