/* GysFilter 0.9.13 – Ergebniszeile: Trefferzahl als blau gefüllter Knopf „N Form anzeigen ↓“ + kurzes Aufleuchten der Leiste nach jeder Aktualisierung (Wunsch Enrico 11./12.10.; 13.10.: Verlauf unter den Chip-Listen entfernt,
   Abschnitt „0.9.13 Ergebniszeile“ bei der Ergebnisleiste unten; Höhe der Leiste unverändert 46 / 40 px). Sonst wie 0.9.12.
   0.9.12 – „kompakter“ (Wunsch Enrico 12.10.: Chips etwas kleiner, ohne dass die Lesbarkeit leidet, um Höhe zu sparen; Vergleich alter Filter
   GysFilterWizard). NUR Maße/Abstände, keine Farben (--gys-* unverändert), keine Funktionen, kein JS: Chips Desktop 28 px (statt 32; Werkstoffgruppe 30 statt 34,
   Werkstoff-Kacheln 32 statt 38), Handy 32 px (statt 36; Kacheln 34 statt 40, Tippfläche ≥ 32 px, WCAG 2.5.8 ≥ 24 px); Schrift bleibt 13 px fett
   (Werkstoff-Nummer 13, Kurzname 12). Gruppen-Innenabstand Desktop 12 px statt 18 oben/unten (Handy 8 statt 10, Zeilenabstand 4 statt 6),
   Beschriftung 6 px statt 9 nach oben (mittig zum 28-px-Chip), Skizzen-Zelle 10 px statt 14 oben/unten, Abstand Band ↔ Karte 12 statt 16, Band 48 statt
   54 px (Knopf 32 statt 34), Knopf „Mehr anzeigen“ 28 px statt 36 (Handy 32), Abstand zur Liste 4 statt 8, Ergebnisleiste 46 statt 54 px (✕-Chips 28 statt 30).
   Höhenbegrenzung passt mit: --gys-chip 28/30/32 (Handy 32/32/34) → 2 Reihen = 62/66/70 px (Handy 70/70/74). Spalt 6 px bleibt.
   0.9.11 – nur Knopf „Mehr anzeigen ↓ / Weniger anzeigen ↑“ direkt UNTER der Chip-Liste der Gruppe (Befund Enrico 10.10. am Teststand 0.9.10:
   „unter den Bezeichnern kaum sichtbar. Besser unter den Chips.“) – wie im Ur-Filter, linksbündig zu den Chips, 13 px fett blau, Tippfläche 36 px,
   Desktop und Handy gleich; nur bei Überlauf (Logik unverändert). Der Hinweis-Verlauf hängt jetzt als ::before am Knopf (sitzt damit am Listenende).
   0.9.10 – Höhenbegrenzung je Filtergruppe wie im Ur-Filter SteelFilterUX (Wunsch Enrico 10.10.: „Funktion zum Einstellen der Höhe der
   angezeigten Chips, so dass man nicht erst aufklappen muss … in der kleinen Vorschau trotzdem reinscrollen oder ganz expandieren“). Jede Werteliste
   (.filter-multi-select-list) ist auf --gys-reihen Chip-Reihen begrenzt (Standard 2; Desktop/Handy getrennt über die Plugin-Einstellungen
   reihenDesktop/reihenHandy, Twig setzt --gys-reihen-desktop/--gys-reihen-handy an .gys-filter) und darüber scrollbar (overflow-y:auto, dünne
   Scrollleiste, unten ein leichter Verlauf als Hinweis). Höhe = Reihen × Chip + (Reihen − 1) × 6 px Spalt; Chip-Höhe je Gruppenart aus den
   bestehenden Regeln (Desktop 32 / Werkstoffgruppe 34 / Werkstoff-Kacheln 38 px → 70 / 74 / 82 px; Handy 36 / 36 / 40 px → 78 / 78 / 86 px, gemessen
   10.10. am Teststand). Knopf „Mehr anzeigen ↓ / Weniger anzeigen ↑“ (.gys-mehr, Beschriftungszelle unter Titel/Umschalter, Handy rechts neben der
   Beschriftung) setzt das Skript nur bei Überlauf; .gys-offen hebt die Begrenzung auf. Ersetzt „+ N größere Maße“ (Desktop, 0.9.2–0.9.9) und das
   Handy-Akkordeon (0.9.9, Klassen gys-auf/gys-klapp-wahl entfallen); Handy wieder Inline-Leiste wie 0.9.7 (Band einzeilig 56 px und Ergebnisleiste
   44 px aus 0.9.9 bleiben). Greift komplett vor dem Skript (Höhen aus den Shopware-Gruppennamen im data-Attribut, kein Springen beim Bildaufbau).
   0.9.9 – Handy-Akkordeon (ersetzt), Band einzeilig, Ergebnisleiste 44 px, Zeile Werkstoffbezeichnung per :has vorab versteckt.
   0.9.7 – finale Maßskizzen (final-v6, Freigabe Enrico 09.10.) und mehr Abstand Skizze ↔ Beschriftungsspalte: Skizzen-Zelle 176 px statt 150 px (22 px links + 130 px Skizze + 24 px Luft rechts; Beschriftung stieß vorher an die Buchstaben am rechten Skizzenrand, Befund Enrico 0.9.5). Handy unverändert (Skizze aus). 0.9.6 – Umschalter Werkstoff „Nummer | Kurzname“ (.gys-sicht in der Beschriftungszelle der Werkstoff-Zeile, Sicht „Kurzname“ per .gys-sicht-kurz: Kurzname fett vorn, Nummer klein; Abschnitt unten). 0.9.5 – Farben über CSS-Variablen var(--gys-*, Rückfall) nach Farbkonzept 09.10.2026 (entwuerfe/farbkonzept/gys-variablen.md): aktive Chips/gewählte Werkstoffe/Maße blau, Zurücksetzen-Link blau, Steelfinder-Band Anthrazit + oranger Knopf, Maßskizzen bleiben orange (Enrico). Vorher 0.9.2 – (Schritt 1: Auswahl-Chips). 0.9.1: Zeilenreihenfolge per order, Band-Link ohne Unterstreichung, SVG-Skizzen. Optik nach Entwurf "Filter Plugin Neu" (08.10.2026):
   Orange #e85d2a, Dunkel #2b2b2b, Hintergrund #f4f4f5/#fafafa; Zeilenraster 150 px; Chips 34/32 px; Werkstoff-Kacheln 38 px.
   Alle Regeln mit Präfix .gys-filter – spezifisch genug (teils !important), um die Regeln des bisherigen Plugins
   (gys-filter-wizard base.scss, im Theme-CSS kompiliert: .filter-multi-select-* , .steel-*) zu überstimmen.
   Schrift: Inter aus dem Theme; Zahlen mit Tabellenziffern (font-variant-numeric) statt neuer Monospace-Schrift. */

.gys-filter{display:flex;flex-direction:column;gap:12px;color:var(--gys-text,#222);margin:0 0 16px;--gys-reihen:var(--gys-reihen-desktop,2);--gys-chip:28px;--gys-spalt:6px} /* 0.9.10: Reihen (Twig/Einstellung), Chip-Höhe je Gruppenart unten, Spalt; 0.9.12: gap 12 (16), Chip 28 (32) */
.gys-filter *,.gys-filter *::before,.gys-filter *::after{box-sizing:border-box}

/* ---------- Steelfinder-Band (0.9.6 kompakt, Enrico 09.10.: etwa halbe Höhe – Kennzeile + Satz in einer Zeile, keine Unterzeile,
   Knopf 34 px, Innenabstand 10/16 px; Farben unverändert; Desktop ca. 54 px statt ca. 100 px) ---------- */
.gys-filter-band{background:var(--gys-dark,#2b2b2b);color:#fff;border-radius:6px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:48px} /* 0.9.12: 8/16 + 48 px (vorher 10/16 + 54) */
.gys-filter-band__text{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.gys-filter-band__kenn{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gys-orange,#e85d2a);white-space:nowrap}
.gys-filter-band__satz{font-size:15px;font-weight:700;color:#fff;line-height:1.3}
.gys-filter-band__unter{display:none} /* Unterzeile entfällt (Twig 0.9.6 ohne; Rückfall, solange das Server-Twig sie noch ausgibt) */
/* Knopf als a.-Selektor mit Vorfahren (0,3,1): überstimmt die Theme-Regel .content-main a:not(.btn, .product-name){text-decoration:underline} (0,2,1) */
.gys-filter .gys-filter-band a.gys-filter-band__knopf,.gys-filter .gys-filter-band a.gys-filter-band__knopf:visited{height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;background:var(--gys-orange,#e85d2a);color:#fff;font-size:13px;font-weight:700;border-radius:4px;text-decoration:none;white-space:nowrap}
.gys-filter .gys-filter-band a.gys-filter-band__knopf:hover,.gys-filter .gys-filter-band a.gys-filter-band__knopf:focus,.gys-filter .gys-filter-band a.gys-filter-band__knopf:active{background:var(--gys-orange-dark,#b8431a);color:#fff;text-decoration:none}

/* ---------- Karte mit den Filterzeilen ---------- */
.gys-filter-karte{background:var(--gys-bg-card,#fff);border:1px solid var(--gys-border,#eee);border-radius:6px}
.gys-filter .filter-panel{display:block;margin:0;padding:0;width:auto;max-width:none}
.gys-filter .filter-panel-items-container{display:grid !important;grid-template-columns:minmax(0,1fr);margin:0;width:100%}
/* Container als Raster mit einer Spalte (keine Flex-Spalte: Chrome berechnet dort die Höhe der Werkstoff-Kacheln mit unbestimmter Breite → Zeile 800 px hoch).
   Zeilenreihenfolge wie Entwurf: Werkstoffgruppe (10) → Werkstoff (20/21) → Maße inkl. Zoll (30) → Ausführung (40), unabhängig von der
   Gruppenposition im Katalog (die gilt shopweit). Vor dem Skript greifen die Gruppennamen aus dem Shopware-Attribut
   data-filter-property-select-options (Maßgruppen tragen einen Klammerbuchstaben "[D]"), danach zusätzlich data-gys-art. */
.gys-filter .filter-panel-item{order:40}
.gys-filter .filter-panel-item[data-filter-property-select-options*="["],.gys-filter .filter-panel-item[data-gys-art="mass"],.gys-filter .filter-panel-item[data-gys-art="zoll"]{order:30}
.gys-filter .filter-panel-item[data-filter-property-select-options*='"propertyName":"Werkstoffbezeichnung"'],.gys-filter .filter-panel-item[data-gys-art="bezeichnung"]{order:21}
.gys-filter .filter-panel-item[data-filter-property-select-options*='"propertyName":"Werkstoffnummer"'],.gys-filter .filter-panel-item[data-gys-art="werkstoff"]{order:20;--gys-chip:32px} /* 0.9.12: 32 (38) */
.gys-filter .filter-panel-item[data-filter-property-select-options*='"propertyName":"Material"'],.gys-filter .filter-panel-item[data-gys-art="material"]{order:10;--gys-chip:30px} /* 0.9.12: 30 (34) */
.gys-filter .filter-panel-offcanvas-header{display:none !important}
.gys-filter .filter-panel-item{display:grid !important;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:16px;row-gap:0;align-items:start;padding:12px 22px;margin:0 !important;border-bottom:1px solid var(--gys-border,#eee);width:auto !important} /* 0.9.12: 12 px oben/unten (18) */
/* 0.9.10: feste Rasterplätze – Beschriftungszelle links (Zeile 1 Titel/Unterzeile, darunter ggf. Umschalter), Werteliste rechts über alle Zeilen; 0.9.11: Knopf „Mehr anzeigen“ steht im Dropdown unter der Liste */
.gys-filter .filter-panel-item>.filter-panel-item-toggle{grid-column:1;grid-row:1}
.gys-filter .filter-panel-item>.filter-panel-item-dropdown{grid-column:2;grid-row:1 / span 2}
.gys-filter .filter-panel-item.gys-versteckt,.gys-filter .gys-versteckt{display:none !important}
/* 0.9.9: Zeile Werkstoffbezeichnung schon vor dem Skript verstecken, wenn eine Werkstoffnummer-Zeile da ist (das Skript setzt danach gys-versteckt;
   ohne diese Regel wäre die Zeile beim ersten Bildaufbau kurz sichtbar und die Seite spränge). :has – Chrome 105+, Safari 15.4+, Firefox 121+; sonst nur das Skript. */
.gys-filter .filter-panel-items-container:has(.filter-panel-item[data-filter-property-select-options*='"propertyName":"Werkstoffnummer"']) .filter-panel-item[data-filter-property-select-options*='"propertyName":"Werkstoffbezeichnung"']{display:none !important}
.gys-filter .filter-panel-item.is-loading{opacity:1}

/* Beschriftung links (Shopware-Knopf, nicht klickbar – alle Gruppen stehen offen) */
.gys-filter .filter-panel-item-toggle,.gys-filter .filter-panel-item-toggle:focus,.gys-filter .filter-panel-item-toggle:active{display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;width:auto;margin:0 !important;padding:6px 0 0 !important;background:none !important;border:0 !important;box-shadow:none !important;color:var(--gys-text,#222) !important;font-size:13px;font-weight:800;line-height:1.25;text-align:left;cursor:default;pointer-events:none;opacity:1 !important}
.gys-filter .filter-panel-item-toggle .icon,.gys-filter .filter-panel-item-toggle svg,.gys-filter .filter-multi-select-count{display:none !important}
.gys-filter .gys-titel{font-size:13px;font-weight:800;color:var(--gys-text,#222)}
.gys-filter .gys-unter{font-size:12px;font-weight:400;color:var(--gys-text-muted,#666)}

/* Maßskizze (SVG 100 × 70 aus public/bundles/gysfilter/skizzen/) */
.gys-filter .gys-skizze{position:relative;display:block;width:88px;margin:0;overflow:hidden;border-radius:4px}
/* 0.9.2: Block je Form – linke Zelle mit Skizze 130 px (vertikal mittig über alle Maß-Zeilen der Form), rechts die Zeilen; 0.9.7: Zelle 176 px = 22 px Rand + 130 px Skizze + 24 px Luft zur Beschriftung (vorher 150 px, Skizze endete bei 152 px = 2 px ÜBER der Beschriftungsspalte)
   mit Beschriftung (130 px) + Chips; Trennlinien zwischen den Zeilen bleiben (rechter Teil). Mischseiten: je Form ein Block. */
.gys-filter .gys-block{display:grid;grid-template-columns:176px minmax(0,1fr);order:30;border-bottom:1px solid var(--gys-border,#eee)}
.gys-filter .gys-block__skizze{grid-column:1;align-self:center;justify-self:start;padding:10px 24px 10px 22px} /* 0.9.12: 10 px oben/unten (14); Breite/Luft rechts unverändert (0.9.7) */
.gys-filter .gys-block .gys-skizze{width:130px}
.gys-filter .gys-block .filter-panel-item{grid-column:2;grid-template-columns:130px minmax(0,1fr);padding:12px 22px 12px 0;border-bottom:1px solid var(--gys-border,#eee)} /* 0.9.12: 12 (18) */
.gys-filter .gys-block .filter-panel-item:last-child{border-bottom:0}
.gys-filter .gys-skizze img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.gys-filter .gys-skizze__deck{position:absolute;background:#fff;display:block}

/* Werteliste rechts: Standard-Dropdown immer offen */
.gys-filter .filter-panel-item-dropdown{display:block !important;position:relative !important;transform:none !important;inset:auto !important;float:none;min-width:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0;background:transparent !important;box-shadow:none !important;overflow:visible !important}
.gys-filter .filter-list-wrapper{display:block;margin:0;padding:0}
/* 0.9.10 Höhenbegrenzung (wie Ur-Filter .filter-multi-select-list{max-height:var(--steel-filter-height,64px);overflow-y:auto}): Reihen × Chip + (Reihen − 1) × Spalt,
   darüber scrollbar im kleinen Fenster (dünne Scrollleiste); .gys-offen (Knopf „Mehr anzeigen“) hebt die Begrenzung auf. */
.gys-filter .filter-multi-select-list{display:flex !important;flex-wrap:wrap;gap:var(--gys-spalt,6px);margin:0 !important;padding:0 !important;list-style:none;max-height:calc(var(--gys-reihen,2) * var(--gys-chip,32px) + (var(--gys-reihen,2) - 1) * var(--gys-spalt,6px)) !important;overflow-y:auto !important;overflow-x:hidden !important;justify-content:flex-start !important;scrollbar-width:thin;scrollbar-color:var(--gys-border-strong,#ddd) transparent}
.gys-filter .filter-multi-select-list::-webkit-scrollbar{width:8px}
.gys-filter .filter-multi-select-list::-webkit-scrollbar-thumb{background:var(--gys-border-strong,#ddd);border-radius:4px}
.gys-filter .filter-panel-item.gys-offen .filter-multi-select-list{max-height:none !important;overflow:visible !important}
/* 0.9.13: Der 0.9.11-Verlauf (.gys-mehr::before, 14 px weiß über den letzten 14 px der Liste) ist ERSATZLOS entfernt – Befund Enrico 13.10. am Live-Stand 0.9.12:
   „weißer Schleier durch die Chips“ (mit 28-px-Chips lag er mitten in der 2. Reihe, auch bei den Werkstoff-Kacheln). Hinweis bleiben Scrollleiste + „Mehr anzeigen ↓“. */
.gys-filter .filter-multi-select-list-item{list-style:none;margin:0 !important;padding:0 !important;background:transparent !important;flex:0 0 auto !important;width:auto !important;display:block}
.gys-filter .filter-multi-select-list-item .form-check{margin:0 !important;padding:0 !important;min-height:0;display:block;background:transparent !important}
.gys-filter .filter-multi-select-checkbox{position:absolute !important;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;display:block !important}

/* Chip (Pille) – Grundform: Maße 28 px, Werkstoffgruppe 30 px (0.9.12; vorher 32/34). Schrift bleibt 13 px fett. */
.gys-filter .filter-multi-select-item-label{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:28px;min-width:40px;margin:0;padding:0 10px;border:1.5px solid var(--gys-border-strong,#ddd);border-radius:14px;background:var(--gys-bg-card,#fff);color:var(--gys-text,#222);font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;width:auto;transition:background .12s ease,border-color .12s ease,color .12s ease;transform:none !important}
.gys-filter .filter-multi-select-item-label:hover{background:var(--gys-blue-light,#eaf0f7);border-color:var(--gys-blue,#1f3c66);color:var(--gys-blue,#1f3c66);transform:none !important}
.gys-filter .filter-multi-select-checkbox:checked+.filter-multi-select-item-label,.gys-filter .filter-multi-select-list-item.gys-aktiv .filter-multi-select-item-label{background:var(--gys-blue,#1f3c66) !important;border-color:var(--gys-blue,#1f3c66) !important;color:#fff !important;font-weight:700}
.gys-filter .filter-multi-select-list-item.gys-einzig .filter-multi-select-item-label{border-color:var(--gys-blue,#1f3c66)}
.gys-filter [data-gys-art="material"] .filter-multi-select-item-label{height:30px;padding:0 12px;border-radius:15px} /* 0.9.12: 30 px, 12 px innen (34 / 14) */
.gys-filter [data-gys-art="material"] .gys-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gys-border-strong,#ddd);border:1px solid var(--gys-mat-machinable-border,#999);flex:0 0 auto}
.gys-filter [data-gys-art="zoll"] .filter-multi-select-item-label,.gys-filter [data-gys-art="iso"] .filter-multi-select-item-label,.gys-filter [data-gys-art="sonst"] .filter-multi-select-item-label,.gys-filter [data-gys-art="bezeichnung"] .filter-multi-select-item-label{padding:0 12px}

/* Nicht mögliche Werte: Shopware setzt .disabled (Standard-Ausgrauen) bzw. .disabled am Gruppenkopf (ganze Gruppe) */
.gys-filter .filter-multi-select-list-item.disabled .filter-multi-select-item-label,.gys-filter .filter-panel-item-toggle.disabled~.filter-panel-item-dropdown .filter-multi-select-checkbox:not(:checked)+.filter-multi-select-item-label{opacity:.35 !important;pointer-events:none;cursor:not-allowed;background:var(--gys-bg-card,#fff) !important;border:1.5px solid var(--gys-border-strong,#ddd) !important;color:var(--gys-text,#222) !important}
.gys-filter .filter-multi-select-list-item.disabled,.gys-filter .filter-panel-item-toggle.disabled~.filter-panel-item-dropdown .filter-multi-select-list-item{opacity:1 !important}

/* Werkstoff: Kacheln "Nummer · Kurzname · V2A/V4A" im Raster */
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-list{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-list-item,.gys-filter [data-gys-art="werkstoff"] .form-check{display:block;min-width:0}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-item-label{display:flex;justify-content:flex-start;width:100%;height:32px;padding:0 10px;gap:8px;border:1.5px solid var(--gys-border-strong,#ddd);border-radius:4px;background:var(--gys-bg-subtle,#fafafa);text-align:left;min-width:0}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-item-label:hover{background:var(--gys-blue-light,#eaf0f7);border-color:var(--gys-blue,#1f3c66)}
.gys-filter .gys-ws-nr{font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.gys-filter .gys-ws-kurz{font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8;min-width:0}
.gys-filter .gys-ws-alias{margin-left:auto;font-size:11px;font-weight:800;font-style:normal;color:var(--gys-orange-dark,#b8431a);flex:0 0 auto}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-checkbox:checked+.filter-multi-select-item-label{background:var(--gys-blue,#1f3c66) !important;border-color:var(--gys-blue,#1f3c66) !important;color:#fff !important}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-checkbox:checked+.filter-multi-select-item-label .gys-ws-alias{color:#fff}
.gys-filter [data-gys-art="werkstoff"] .filter-multi-select-list-item.disabled .filter-multi-select-item-label,.gys-filter [data-gys-art="werkstoff"] .filter-panel-item-toggle.disabled~.filter-panel-item-dropdown .filter-multi-select-checkbox:not(:checked)+.filter-multi-select-item-label{background:var(--gys-bg-subtle,#fafafa) !important;border-color:var(--gys-border-strong,#ddd) !important}

/* ---------- 0.9.6: Umschalter „Nummer | Kurzname“ (Segmented Control) in der Beschriftungszelle der Werkstoff-Zeile ----------
   Das Panel ist ein Raster 150 px + Rest; der Umschalter steht als drittes Kind unter der Beschriftung (Zeile 2, Spalte 1), die
   Kachel-Liste spannt beide Zeilen. Zwei gleich breite Felder füllen die 150 px. Aktiv blau/weiß, inaktiv Rahmen #ddd auf #fafafa. */
.gys-filter .filter-panel-item.gys-hat-sicht{row-gap:0;grid-template-rows:auto minmax(0,1fr)} /* Zeile 1 = Beschriftung, Zeile 2 Umschalter + Rest */
.gys-filter .filter-panel-item.gys-hat-sicht>.filter-panel-item-toggle{grid-column:1;grid-row:1}
.gys-filter .filter-panel-item.gys-hat-sicht>.gys-sicht{grid-column:1;grid-row:2;align-self:start}
.gys-filter .filter-panel-item.gys-hat-sicht>.filter-panel-item-dropdown{grid-column:2;grid-row:1 / span 2}
.gys-filter .gys-sicht{display:flex;width:100%;align-items:stretch;gap:2px;margin:10px 0 0;padding:2px;border:1.5px solid var(--gys-border-strong,#ddd);border-radius:17px;background:var(--gys-bg-subtle,#fafafa)}
.gys-filter .gys-sicht__knopf,.gys-filter .gys-sicht__knopf:focus{appearance:none;-webkit-appearance:none;flex:1 1 0;height:26px;min-width:0;margin:0;padding:0 6px;border:0;border-radius:13px;background:transparent;color:var(--gys-text-muted,#666);font-family:inherit;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background .12s ease,color .12s ease}
.gys-filter .gys-sicht__knopf:hover{background:var(--gys-blue-light,#eaf0f7);color:var(--gys-blue,#1f3c66)}
.gys-filter .gys-sicht__knopf:focus-visible{outline:2px solid var(--gys-blue,#1f3c66);outline-offset:1px}
.gys-filter .gys-sicht__knopf[aria-pressed="true"],.gys-filter .gys-sicht__knopf[aria-pressed="true"]:hover,.gys-filter .gys-sicht__knopf[aria-pressed="true"]:focus{background:var(--gys-blue,#1f3c66);color:#fff;cursor:default}
/* Sicht „Kurzname“: Kurzname fett vorn, Nummer klein dahinter – nur CSS-Reihenfolge in der Kachel (flex order), Alias bleibt rechts.
   Kacheln ohne bekannten Kurznamen (.gys-ohne-kurz) zeigen die Nummer weiter fett. */
.gys-filter .gys-sicht-kurz .gys-ws-nr{order:2;font-size:12px;font-weight:400;opacity:.8}
.gys-filter .gys-sicht-kurz .gys-ws-kurz{order:1;font-size:13px;font-weight:700;opacity:1}
.gys-filter .gys-sicht-kurz .gys-ws-alias{order:3}
.gys-filter .gys-sicht-kurz .gys-ohne-kurz .gys-ws-nr{order:1;font-size:13px;font-weight:700;opacity:1}

/* 0.9.11 „Mehr anzeigen ↓“ / „Weniger anzeigen ↑“ (Ur-Filter-Wortlaut) – eigene Zeile direkt unter der Chip-Liste, linksbündig zu den Chips, volle Breite
   (Tippfläche 36 px, Text links), 13 px fett blau; nur bei Überlauf (hidden sonst). position:relative für den Verlauf (::before). */
.gys-filter .gys-mehr,.gys-filter .gys-mehr:focus{position:relative;display:flex;width:100%;align-items:center;justify-content:flex-start;gap:4px;height:28px;margin:4px 0 0;padding:0;border:0;border-radius:4px;background:none;color:var(--gys-blue,#1f3c66);font-family:inherit;font-size:13px;font-weight:700;line-height:1;text-align:left;white-space:nowrap;cursor:pointer;box-shadow:none}
.gys-filter .gys-mehr:hover{color:var(--gys-blue-hover,#16304f);text-decoration:underline}
.gys-filter .gys-mehr:focus-visible{outline:2px solid var(--gys-blue,#1f3c66);outline-offset:2px}
.gys-filter .gys-mehr[hidden]{display:none !important}
.gys-filter .filter-expand-toggle{display:none !important} /* Knopf des alten Plugins (Teststand, solange GysFilterWizard aktiv ist) */

/* ---------- Ergebnisleiste ---------- */
.gys-filter .gys-filter-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 22px;background:var(--gys-bg-subtle,#fafafa);border-top:1px solid var(--gys-border,#eee);border-radius:0 0 6px 6px;min-height:46px} /* 0.9.12: 8/22 + 46 px (12/22 + 54) */
.gys-filter .filter-panel-active-container{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0;min-width:0}
.gys-filter .filter-panel-active-container:empty::before{content:"Keine Filter aktiv";font-size:13px;color:var(--gys-text-hint,#888)}
.gys-filter .filter-active{display:inline-flex !important;align-items:center;gap:6px;height:28px;max-width:none;margin:0 !important;padding:0 10px 0 12px !important;border:0 !important;border-radius:14px;background:var(--gys-blue,#1f3c66);color:#fff;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;position:relative;overflow:visible}
.gys-filter .filter-active-preview{display:none}
.gys-filter .filter-active-remove,.gys-filter .filter-active-remove:hover,.gys-filter .filter-active-remove:focus{position:static !important;display:inline-block;width:auto;height:auto;margin:0;padding:0 0 0 2px;border:0;background:transparent;color:#fff;opacity:.6;font-size:14px;font-weight:700;line-height:1;cursor:pointer;outline:0}
.gys-filter .filter-active-remove:hover{opacity:1}
.gys-filter .btn.filter-reset-all,.gys-filter .btn.filter-reset-all:hover,.gys-filter .btn.filter-reset-all:focus{display:inline-block;height:auto;margin:0;padding:0 4px;border:0 !important;border-radius:0;background:none !important;color:var(--gys-blue,#1f3c66) !important;font-size:13px;font-weight:700;line-height:28px;box-shadow:none;cursor:pointer}
.gys-filter .btn.filter-reset-all:hover{color:var(--gys-blue-hover,#16304f) !important;text-decoration:underline}
.gys-filter .gys-filter-anzahl{margin-left:auto;display:flex;align-items:center;line-height:1;font-size:14px;color:var(--gys-text,#222);white-space:nowrap;font-variant-numeric:tabular-nums}
.gys-filter .gys-filter-anzahl b{font-weight:800}
.gys-filter .filter-panel.is-loading .gys-filter-anzahl{opacity:.5}
/* 0.9.13 Ergebniszeile: Trefferzahl als Knopf „N Form anzeigen ↓“ (blau = Auswählen/Weiter, Farbkonzept), 28 px hoch (passt in die 46-px-Leiste; Handy 32 px in 40 px),
   Fokusring; 0 Treffer (.gys-null / :disabled): Text wie bisher, Zusatz „anzeigen ↓“ aus. Aufleuchten: Web-Animations-API aus dem Skript (keine Klasse);
   Rückfall .gys-blitz mit Übergang, bei prefers-reduced-motion ohne Übergang. Vorlese-Hinweis .gys-sr-only (unsichtbar, nur Screenreader). */
/* Knopf blau gefüllt (Entscheidung Enrico 12.10.): Hintergrund --gys-blue, weiße Schrift, Hover --gys-blue-hover, Radius 4 px wie Band-/Steelfinder-Knopf, Höhe 28 px (Leiste bleibt 46 px) */
.gys-filter .gys-filter-anzahl__knopf,.gys-filter .gys-filter-anzahl__knopf:focus{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:4px;height:28px;margin:0;padding:0 12px;border:0;border-radius:4px;background:var(--gys-blue,#1f3c66);color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;box-shadow:none;text-decoration:none;transition:background .12s ease}
.gys-filter .gys-filter-anzahl__knopf b{font-weight:800}
.gys-filter .gys-filter-anzahl__knopf:hover{background:var(--gys-blue-hover,#16304f);color:#fff;text-decoration:none}
.gys-filter .gys-filter-anzahl__knopf:focus-visible{outline:2px solid var(--gys-blue,#1f3c66);outline-offset:2px}
.gys-filter .gys-filter-anzahl__knopf.gys-null,.gys-filter .gys-filter-anzahl__knopf:disabled,.gys-filter .gys-filter-anzahl__knopf:disabled:hover{background:none;padding:0 4px;color:var(--gys-text,#222);cursor:default;text-decoration:none;opacity:1}
.gys-filter .gys-filter-anzahl__knopf.gys-null .gys-filter-anzahl__zusatz,.gys-filter .gys-filter-anzahl__knopf:disabled .gys-filter-anzahl__zusatz{display:none}
.gys-filter .gys-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gys-filter .gys-filter-leiste{transition:background-color .6s ease-out}
.gys-filter .gys-filter-leiste.gys-blitz{background:var(--gys-blue-light,#eaf0f7);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.gys-filter .gys-filter-leiste,.gys-filter .gys-filter-leiste.gys-blitz{transition:none}}

/* ---------- Handy / schmale Bildschirme: Filter direkt auf der Seite (kein Offcanvas), Tippflächen >= 36 px ---------- */
@media (max-width:991.98px){
  .gys-filter-inline .filter-panel-wrapper,.filter-panel-wrapper:has(.gys-filter){display:block !important}
  .gys-filter-inline .btn.filter-panel-wrapper-toggle,.cms-element-sidebar-filter:has(.gys-filter) .btn.filter-panel-wrapper-toggle{display:none !important}
  .gys-filter .filter-panel{position:static !important;transform:none !important;visibility:visible !important;background:transparent !important;height:auto !important;overflow:visible !important;width:100% !important;max-width:100% !important;padding:0 !important}
  .gys-filter{gap:8px}
  /* 0.9.9 Band am Handy einzeilig: links Kennzeile über „Werkstoff unklar?“ (zweiter Satz .gys-filter-band__satz2 entfällt am Handy, Twig 0.9.9),
     rechts der Knopf (36 px Tippfläche, eigene Breite) – ca. 56 px statt 106 px (0.9.6: Fließtext 2 Zeilen + Knopf in voller Breite darunter) */
  .gys-filter-band{padding:8px 14px;gap:10px;min-height:0;flex-wrap:nowrap} /* 0.9.12: 8 px (10) → Band ca. 50 statt 56 px */
  .gys-filter-band__text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:1 1 auto;min-width:0}
  .gys-filter-band__satz{font-size:14px;line-height:1.25}
  .gys-filter-band__satz2{display:none}
  .gys-filter .gys-filter-band a.gys-filter-band__knopf,.gys-filter .gys-filter-band a.gys-filter-band__knopf:visited{height:34px;padding:0 12px;flex:0 0 auto} /* 0.9.12: 34 (36), Tippfläche ≥ 32 */
  /* 0.9.10 Handy wieder Inline-Leiste (wie 0.9.7, Akkordeon aus 0.9.9 entfällt): Beschriftung oben (Titel + Unterzeile in einer Zeile), rechts daneben
     der Knopf „Mehr anzeigen“ (nur bei Überlauf), darunter die Werteliste – begrenzt auf --gys-reihen-handy Reihen (Chips 36 px → 78 px, Kacheln 40 px → 86 px). */
  .gys-filter{--gys-reihen:var(--gys-reihen-handy,2)}
  .gys-filter .filter-panel-item,.gys-filter .filter-panel-item[data-filter-property-select-options*='"propertyName":"Material"'],.gys-filter .filter-panel-item[data-gys-art="material"]{--gys-chip:32px} /* 0.9.12: 32 (36) */
  .gys-filter .filter-panel-item[data-filter-property-select-options*='"propertyName":"Werkstoffnummer"'],.gys-filter .filter-panel-item[data-gys-art="werkstoff"]{--gys-chip:34px} /* 0.9.12: 34 (40) */
  .gys-filter .filter-panel-item,.gys-filter .gys-block .filter-panel-item{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:4px;padding:8px 16px;border-bottom:1px solid var(--gys-border,#eee)} /* 0.9.12: 8/4 (0.9.10: 10/6; davor 12/8) – kurze Seiten behalten das erste Produktbild im ersten Bildschirm (Lighthouse-LCP, 10.10.) */
  .gys-filter .filter-panel-item-toggle,.gys-filter .filter-panel-item-toggle:focus,.gys-filter .filter-panel-item-toggle:active{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:0 !important;max-width:none !important} /* max-width:none: Theme/Shopware begrenzen den Kopf sonst auf 190 px */
  .gys-filter .filter-panel-item>.filter-panel-item-toggle{grid-column:1;grid-row:1}
  .gys-filter .filter-panel-item>.filter-panel-item-dropdown{grid-column:1;grid-row:2}
  .gys-filter .filter-panel-item.gys-hat-sicht{grid-template-rows:auto auto auto;row-gap:4px}
  .gys-filter .filter-panel-item.gys-hat-sicht>.gys-sicht{grid-column:1;grid-row:2;margin:0}
  .gys-filter .filter-panel-item.gys-hat-sicht>.filter-panel-item-dropdown{grid-column:1;grid-row:3}
  .gys-filter .gys-skizze,.gys-filter .gys-block__skizze{display:none}
  .gys-filter .gys-block{display:block;border-bottom:0}
  .gys-filter .filter-multi-select-item-label,.gys-filter [data-gys-art="material"] .filter-multi-select-item-label{height:32px;min-width:44px;border-radius:16px} /* 0.9.12: 32 px Tippfläche (36) */
  .gys-filter [data-gys-art="werkstoff"] .filter-multi-select-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gys-filter [data-gys-art="werkstoff"] .filter-multi-select-item-label{height:34px} /* 0.9.12: 34 (40) */
  /* 0.9.6 Umschalter am Handy: eigene Zeile unter der Beschriftung, volle Breite, zwei gleich breite Felder 32 px hoch (Tippfläche; 0.9.12: 32 statt 36) */
  .gys-filter .gys-sicht{width:auto;border-radius:19px}
  .gys-filter .gys-sicht__knopf,.gys-filter .gys-sicht__knopf:focus{height:32px;border-radius:16px;font-size:13px}
  .gys-filter .gys-mehr,.gys-filter .gys-mehr:focus{height:32px} /* 0.9.12: Knopf „Mehr anzeigen“ am Handy 32 px Tippfläche (Desktop 28) */
  .gys-filter .gys-filter-leiste{padding:4px 16px;min-height:40px}
  .gys-filter .filter-active{height:32px}
  .gys-filter .gys-filter-anzahl{margin-left:auto}
  /* 0.9.13 Handy: Knopf 25 px (≥ 24 px WCAG 2.5.8; Textbreite ca. 180 px) mit 13 px und Zeilenabstand der Leiste 4 px (statt 8; Spalt zwischen ✕-Chips bleibt 8),
     damit die Leiste nicht höher wird als in 0.9.12: Start 40 px, mit Filtern 106 px (= 0.9.12; Vortest 12.10.: mit 32 px/14 px → 69 bzw. 117 px, mit 28 px → 113 px).
     Der Platzhalter „Keine Filter aktiv“ entfällt am Handy – er passte mit dem Knopf „168 Rechteckrohre anzeigen ↓“ nicht in eine Zeile (zweite Zeile = +29 px); am PC bleibt er. */
  .gys-filter .gys-filter-anzahl__knopf,.gys-filter .gys-filter-anzahl__knopf:focus{height:25px;font-size:13px;padding:0 10px} /* 25 statt 26: mit 26 maß der Vortest 107 px (Sub-Pixel-Rundung), 0.9.12 = 106; blau gefüllt wie am PC */
  .gys-filter .gys-filter-anzahl__knopf.gys-null,.gys-filter .gys-filter-anzahl__knopf:disabled{padding:0 2px}
  .gys-filter .gys-filter-leiste{row-gap:4px}
  .gys-filter .filter-panel-active-container:empty::before{content:none}
}