/* --- BicycleJack Vergleichstabelle: gekapselt fuer WordPress ---
Schriften werden bewusst NICHT gesetzt - alles erbt vom Theme.
Optional anpassbar ueber .bjv-root { --max: ...; } weiter unten. */
.bjv-root{font-family:inherit;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;text-align:left;max-width:none}
.bjv-root *,.bjv-root *:before,.bjv-root *:after{box-sizing:border-box}
.bjv-root p,.bjv-root div,.bjv-root span,.bjv-root strong,.bjv-root small,.bjv-root b,.bjv-root label,.bjv-root button,.bjv-root input,.bjv-root select,.bjv-root a,.bjv-root table,.bjv-root th,.bjv-root td,.bjv-root thead,.bjv-root tbody,.bjv-root tr{font-family:inherit}
.bjv-root p,.bjv-root table,.bjv-root th,.bjv-root td,.bjv-root .bjv-h2{margin:0;padding:0}
.bjv-root table{border:0;background:none;width:100%;display:table;table-layout:auto}
.bjv-root tr,.bjv-root th,.bjv-root td{border:0;background:none;display:table-cell}
.bjv-root tr{display:table-row}
.bjv-root thead{display:table-header-group}
.bjv-root tbody{display:table-row-group}
.bjv-root a{text-decoration:none;box-shadow:none;border:0}
.bjv-root img{max-width:100%}
.bjv-root button{-webkit-appearance:none;appearance:none;text-transform:none;letter-spacing:normal;margin:0;box-shadow:none;min-height:0}
.bjv-root input,.bjv-root select{margin:0;box-shadow:none;max-width:none}
.bjv-root .bjv-h2{font-weight:800;text-wrap:balance}
/* ---- Optionale Stellschrauben -------------------------------------------
Maximale Breite des Inhalts (Standard 1580px):
.bjv-root{--max:1200px}
Volle Fensterbreite (Full-Bleed), falls der Theme-Container zu schmal ist
- dann die folgenden zwei Zeilen einkommentieren:
.bjv-root{width:100vw;margin-left:calc(50% - 50vw);max-width:100vw}
Eigene Schrift statt Theme-Schrift (normalerweise NICHT noetig):
.bjv-root{font-family:"Deine Theme-Schrift",sans-serif}
-------------------------------------------------------------------------- */
.bjv-root{--ink:#303638;--ink2:#4d5558;--muted:#6a7477;--line:#d9dddc;--paper:#f5f6f4;--white:#fff;--cyan:#26b6c8;--cyan2:#0d8999;--cyansoft:#dff5f7;--green:#21765e;--greensoft:#e2f3ec;--amber:#8a5b0a;--ambersoft:#fff2d5;--red:#8c3a35;--redsoft:#fae6e4;--purple:#62519c;--purplesoft:#efebff;--max:1580px}
.bjv-root,.bjv-root *{box-sizing:border-box}
.bjv-root{margin:0;background:#fff;color:var(--ink);font-size:16px;line-height:1.5}
.bjv-root a{color:inherit}
.bjv-root button,.bjv-root input,.bjv-root select{font:inherit}
.bjv-root .bjv-wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.bjv-root .bjv-eyebrow{margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.15em;font-size:.71rem;font-weight:800;color:var(--cyan2)}
.bjv-root .bjv-h2{line-height:1.08;margin:0;color:var(--ink)}
.bjv-root .bjv-h2{font-size:clamp(1.7rem,3vw,2.75rem);letter-spacing:-.035em}
.bjv-root .bjv-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.bjv-root .bjv-pill{display:inline-flex;align-items:center;gap:.42rem;padding:.54rem .76rem;border-radius:999px;background:var(--paper);border:1px solid rgba(48,54,56,.14);color:var(--ink);font-size:.8rem;font-weight:700}
.bjv-root .bjv-pill:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none}
.bjv-root .bjv-section{padding:0 0 64px}
.bjv-root .bjv-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;position:relative;z-index:2}
.bjv-root .bjv-summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 19px;box-shadow:0 12px 30px rgba(48,54,56,.07)}
.bjv-root .bjv-summary-card strong{font-size:1.75rem;letter-spacing:-.04em;display:block;color:var(--cyan2)}
.bjv-root .bjv-summary-card span{font-size:.84rem;color:#677174;display:block;margin-top:.15rem}
.bjv-root .bjv-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:32px;align-items:start;margin:38px 0 26px}
.bjv-root .bjv-intro p{margin:.72rem 0 0;color:#5f696c}
.bjv-root .bjv-notice{background:var(--cyansoft);border-left:5px solid var(--cyan);padding:17px 18px;border-radius:0 13px 13px 0;color:#31545a;font-size:.88rem}
.bjv-root .bjv-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:11px;align-items:end;margin:0 0 10px}
.bjv-root .bjv-control-label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.105em;font-weight:800;color:#697275;margin:0 0 .28rem .24rem}
.bjv-root .bjv-search-wrap input,.bjv-root .bjv-sort-wrap select,.bjv-root .bjv-multi-trigger{width:100%;border:1px solid var(--line);border-radius:12px;padding:.73rem .86rem;background:#fff;color:var(--ink);min-height:47px}
.bjv-root .bjv-search-wrap input:focus,.bjv-root .bjv-sort-wrap select:focus,.bjv-root .bjv-multi-trigger:focus{outline:3px solid rgba(38,182,200,.2);border-color:var(--cyan2)}
.bjv-root .bjv-sort-wrap select{min-width:245px}
.bjv-root .bjv-multi-select{position:relative;min-width:315px}
.bjv-root .bjv-multi-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;font-weight:700;text-align:left}
.bjv-root .bjv-multi-trigger:hover{border-color:var(--cyan2)}
.bjv-root .bjv-multi-count{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--ink);color:#fff;font-size:.73rem;padding:0 7px}
.bjv-root .bjv-chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.2s}
.bjv-root .bjv-multi-trigger[aria-expanded="true"] .bjv-chevron{transform:rotate(225deg) translate(-2px,-1px)}
.bjv-root .bjv-multi-panel{position:absolute;z-index:30;right:0;top:calc(100% + 7px);width:min(420px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(30,38,40,.17);padding:8px;display:none}
.bjv-root .bjv-multi-panel.bjv-open{display:block}
.bjv-root .bjv-multi-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 9px 9px;border-bottom:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.bjv-root .bjv-link-btn{border:0;background:transparent;color:var(--cyan2);font-weight:800;cursor:pointer;padding:3px}
.bjv-root .bjv-check-list{display:grid;gap:2px;padding-top:6px;max-height:420px;overflow:auto}
.bjv-root .bjv-check-option{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;padding:9px;border-radius:9px;cursor:pointer;font-size:.83rem;font-weight:650;color:#4e585b}
.bjv-root .bjv-check-option:hover{background:var(--paper)}
.bjv-root .bjv-check-option input{position:absolute;opacity:0;pointer-events:none}
.bjv-root .bjv-check-box{width:18px;height:18px;border:1.5px solid #aeb6b8;border-radius:5px;margin-top:1px;display:grid;place-items:center;background:#fff}
.bjv-root .bjv-check-option input:checked+.bjv-check-box{background:var(--cyan2);border-color:var(--cyan2)}
.bjv-root .bjv-check-option input:checked+.bjv-check-box:after{content:'✓';color:#fff;font-size:.73rem;line-height:1}
.bjv-root .bjv-check-option input:focus-visible+.bjv-check-box{outline:3px solid rgba(38,182,200,.25)}
.bjv-root .bjv-active-filters{min-height:34px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0 10px}
.bjv-root .bjv-active-label{font-size:.74rem;color:var(--muted);font-weight:700;margin-right:2px}
.bjv-root .bjv-active-chip{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;background:var(--cyansoft);color:#255159;padding:.38rem .55rem .38rem .68rem;font-size:.75rem;font-weight:800;cursor:pointer}
.bjv-root .bjv-active-chip b{font-size:.83rem}
.bjv-root .bjv-result-row{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:0 0 11px;color:#657073;font-size:.82rem}
.bjv-root .bjv-result-row strong{color:var(--ink)}
.bjv-root .bjv-and-note{display:inline-flex;align-items:center;gap:.35rem}
.bjv-root .bjv-and-note:before{content:'UND';font-size:.58rem;letter-spacing:.06em;background:var(--ink);color:#fff;padding:.17rem .32rem;border-radius:5px}
.bjv-root .bjv-table-shell{border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 12px 35px rgba(48,54,56,.06);overflow:hidden}
.bjv-root .bjv-scroll-hint{display:none;padding:9px 13px;background:#fff6dc;color:#6f4d09;font-size:.77rem;border-bottom:1px solid #ecdca9}
.bjv-root .bjv-table-wrap{overflow:auto;max-height:78vh;scrollbar-color:var(--cyan2) #edf0ef}
.bjv-root table{border-collapse:separate;border-spacing:0;width:100%;min-width:3370px;font-size:.78rem;line-height:1.34}
.bjv-root th,.bjv-root td{padding:12px 10px;border-bottom:1px solid #e5e8e7;vertical-align:top;text-align:left}
.bjv-root thead th{position:sticky;top:0;background:var(--ink);color:#fff;z-index:4;font-size:.61rem;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap}
.bjv-root thead th:first-child{left:0;z-index:7}
.bjv-root tbody th{position:sticky;left:0;background:#fff;z-index:3;min-width:280px;max-width:280px;box-shadow:9px 0 13px -13px rgba(0,0,0,.45)}
.bjv-root tbody th strong{font-size:.9rem;display:block}
.bjv-root tbody th small{display:block;color:#748083;font-weight:500;margin-top:.25rem;font-size:.68rem}
.bjv-root .bjv-table-brand{display:block;color:var(--cyan2);text-transform:uppercase;font-size:.63rem;letter-spacing:.085em;font-weight:800;margin-bottom:.1rem}
.bjv-root .bjv-mechanism-badge{display:inline-block;margin:.38rem 0 .04rem;border-radius:999px;padding:.25rem .48rem;font-size:.56rem;line-height:1;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.bjv-root .bjv-mechanism-badge.bjv-gas{background:var(--cyansoft);color:#23616a}
.bjv-root .bjv-mechanism-badge.bjv-other{background:#eef0f0;color:#657073}
.bjv-root .bjv-spring-group-start td,.bjv-root .bjv-spring-group-start th{border-top:3px solid #cfd5d4}
.bjv-root tbody tr:hover td,.bjv-root tbody tr:hover th{background:#f8fbfa}
.bjv-root .bjv-benchmark-row td,.bjv-root .bjv-benchmark-row th{background:var(--cyansoft)!important}
.bjv-root .bjv-status{display:inline-flex;align-items:flex-start;gap:.34rem;padding:.31rem .49rem;border-radius:9px;font-size:.72rem;font-weight:680;max-width:230px}
.bjv-root .bjv-status>span{font-weight:800;line-height:1.15}
.bjv-root .bjv-status.bjv-good{background:var(--greensoft);color:var(--green)}
.bjv-root .bjv-status.bjv-no{background:var(--redsoft);color:var(--red)}
.bjv-root .bjv-status.bjv-limited{background:var(--ambersoft);color:var(--amber)}
.bjv-root .bjv-status.bjv-unknown{background:#eff1f1;color:#687174}
.bjv-root .bjv-num{white-space:nowrap}
.bjv-root .bjv-num strong{font-size:.87rem}
.bjv-root .bjv-text-cell{display:block;max-width:265px;color:#596265}
.bjv-root .bjv-product-link{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none;color:#fff;background:var(--cyan2);font-weight:800;white-space:nowrap;padding:.47rem .65rem;border-radius:9px}
.bjv-root .bjv-product-link:hover{background:#086d79}
.bjv-root .bjv-no-link{color:#a5adaf;font-weight:700}
.bjv-root .bjv-no-results{display:none;padding:42px;text-align:center;font-weight:700}
.bjv-root .bjv-no-results.bjv-show{display:block}
.bjv-root .bjv-hidden{display:none!important}
.bjv-root .bjv-legend{display:flex;flex-wrap:wrap;gap:10px 17px;margin-top:14px;font-size:.76rem;color:#657073}
.bjv-root .bjv-legend span{display:inline-flex;align-items:center;gap:.33rem}
.bjv-root .bjv-legend b{width:19px;height:19px;border-radius:6px;display:inline-grid;place-items:center}
.bjv-root .bjv-legend .bjv-lg-good b{background:var(--greensoft);color:var(--green)}
.bjv-root .bjv-legend .bjv-lg-limit b{background:var(--ambersoft);color:var(--amber)}
.bjv-root .bjv-legend .bjv-lg-no b{background:var(--redsoft);color:var(--red)}
.bjv-root .bjv-legend .bjv-lg-unknown b{background:#eff1f1;color:#687174}
.bjv-root .bjv-method{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.bjv-root .bjv-method-card{background:var(--paper);border-radius:13px;padding:15px}
.bjv-root .bjv-method-card strong{font-size:.82rem}
.bjv-root .bjv-method-card p{font-size:.77rem;color:#626c6f;margin:.45rem 0 0}
.bjv-root .bjv-footer{background:#202526;color:#d8dddd;padding:30px 0}
.bjv-root .bjv-footer strong{}
.bjv-root .bjv-footer p{font-size:.76rem;color:#aab2b3;margin:.35rem 0 0}
@media(max-width:980px){
.bjv-root .bjv-summary-grid{grid-template-columns:repeat(2,1fr)}
.bjv-root .bjv-intro{grid-template-columns:1fr}
.bjv-root .bjv-toolbar{grid-template-columns:1fr 1fr}
.bjv-root .bjv-search-wrap{grid-column:1/-1}
.bjv-root .bjv-multi-select{min-width:0}
}
@media(max-width:680px){
.bjv-root .bjv-wrap{width:min(100% - 24px,var(--max))}
.bjv-root .bjv-section{padding:0 0 52px}
.bjv-root .bjv-summary-grid{gap:9px}
.bjv-root .bjv-summary-card{padding:14px}
.bjv-root .bjv-summary-card strong{font-size:1.4rem}
.bjv-root .bjv-toolbar{grid-template-columns:1fr}
.bjv-root .bjv-search-wrap{grid-column:auto}
.bjv-root .bjv-sort-wrap select{min-width:0}
.bjv-root .bjv-multi-panel{left:0;right:auto;width:min(420px,calc(100vw - 24px))}
.bjv-root .bjv-scroll-hint{display:block}
.bjv-root .bjv-result-row{align-items:flex-start;flex-direction:column;gap:4px}
.bjv-root .bjv-method{grid-template-columns:1fr}
.bjv-root .bjv-table-wrap{max-height:72vh}
.bjv-root table{font-size:.74rem}
.bjv-root tbody th{min-width:205px;max-width:205px}
}
@media print{
.bjv-root .bjv-toolbar,.bjv-root .bjv-active-filters,.bjv-root .bjv-scroll-hint{display:none}
.bjv-root .bjv-table-wrap{overflow:visible;max-height:none}
.bjv-root table{min-width:0;font-size:5.5pt}
.bjv-root thead th,.bjv-root tbody th{position:static}
.bjv-root .bjv-section{padding:0 0 20px}
.bjv-root .bjv-method{display:none}
}
No price ratingVertical parking position onlyMultiple selection with "AND" operator
9List of Bike Lifts
6Electric Drive/Gas Spring + Circular Path First
13Filters that can be combined simultaneously
Before you compare apples to oranges, make a list · clear criteria
Technical specifications that can be directly compared
This list includes only products with a vertical parking position that are listed on a German-language product or offer page. This list is not intended to be exhaustive. This allows you to quickly compare options: “Which bike lift is suitable for heavy e-bikes?”, “Which models are swiveling?”, and “How much space do I need?”
Are both tires touching the ground?
"YES" means: The front and rear wheels are securely guided by designated mounts or rails. No tire comes into direct contact with the wall—this protects the wall from tire marks.
9 out of 9 products visibleAll selected criteria must be met
Swipe to the side to scroll through the table. The product column remains visible.
| Bicycle Lift | Made in Germany? | Lift lock? | Max. load capacity | Max. tire width | Bicycle length up to | swiveling? | Fender / taillight? | Do both tires sit flush? | Assembly | Current delivery time | Google Review | Staggered parking? | Can bikes be parked closer together with staggered spacing? | Minimum spacing in a row | View product |
|
BicycleJack
Basic
Gas Spring + Circular Path
Germany
|
✓YES |
✓YES– manually |
31 kg |
130 mm |
220 cm |
×NO |
✓YES |
×NO |
Approx. 99% pre-assembled |
✓Ready to shipin 1–3 days |
✓4.90 / 5 |
✓YES– high/low |
✓YES |
35 cm |
Back to Basics ↗ |
|
BicycleJack
Twist
Gas Spring + Circular Path
Germany
|
✓YES |
✓YES– automatically |
38 kg |
130 mm |
220 cm |
✓YES– more than 90° left/right |
✓YES |
✓YES |
Approx. 95% pre-assembled |
✓Ready to shipin 1–3 days |
✓4.90 / 5 |
✓YES– high/low |
✓YES |
35 cm |
About the Twist ↗ |
|
BicycleJack
Power
Electric Drive + Circular Track
Germany
|
✓YES |
✓YES– automatically |
50 kg |
130 mm |
220 cm |
✓YES– 90° left/right |
✓YES |
✓YES |
Approx. 99% pre-assembled |
✓Ready to shipin 14 days |
✓4.90 / 5 |
✓YES– high/low |
✓YES |
35 cm |
Go to Power ↗ |
|
VelowUp!
4.0
Gas Spring + Circular Path
Netherlands
|
×NO– Netherlands |
×NO |
35 kg |
60 mm |
220 cm |
✓YES– 90° left/right |
not specified |
×NO |
This item is shipped unassembled; full assembly is required |
✓Available immediately |
–— |
✓YES– high/low |
✓YES |
30 cm (35 cm recommended) |
— |
|
Wheely Mobility
Wheelylift / GO-UP W
Gas spring + circular track
Netherlands
|
×NO– Netherlands |
×NO |
35 kg |
not specified |
not specified |
✓YES |
not specified |
×NO |
Degree of pre-assembly not specified |
–notreported |
–— |
✓YES– high/low |
✓YES |
not specified |
— |
|
STEIN HGS
"Mailand" Wall-Mounted Bike Rack
Gas spring + circular track
Not listed
|
–notreported |
×NO |
30 kg |
not specified |
not specified |
×NO |
not specified |
×NO |
Degree of pre-assembly not specified |
◐1–3weeks |
–— |
✓YES– high/low |
✓YES |
40 cm |
— |
|
Biohort
BikeLift
Spring mechanism
Austria
|
×NO– Austria |
×NO |
30 kg |
77 mm |
195 cm |
◐OPTIONAL |
×NO |
×NO |
Degree of pre-assembly not specified |
◐within10 business days |
–— |
×NO |
×NO |
Handlebar width, at least 65 cm |
— |
|
PARKIS
MTB
Spring mechanism
Lithuania
|
×NO– Lithuania |
×NO |
30 kg |
77 mm |
not specified |
×NO |
×NO |
×NO |
Degree of pre-assembly not specified |
◐3–8days |
–— |
×NO |
×NO |
Handlebar width, at least 65 cm |
— |
|
Cranit, Handler, etc.
e.g., WS5, ABL12, and other models of the same design
Spring mechanism
China
|
×NO– China |
×NO |
32 kg |
80 mm |
not specified |
×NO |
×NO |
×NO |
This item is shipped unassembled; full assembly is required |
✓Ready to shipin 1–3 business days |
–— |
×NO |
×NO |
Handlebar width, at least 65 cm |
— |
No products were found for this combination.
✓ Confirmed / Yes◐ limited / optional× no– not clearly published
OrderThe five products featuring gas springs and circular tracks come first. Other products with simple spring mechanisms follow afterward.
Lift Safety DeviceWhere no separate safety device to prevent unintended movement of the unloaded boom is present or indicated, “NO” is consistently listed.
Minimum distanceFor bike lifts with simple spring mechanisms (up and down without a circular motion), the handlebar width is taken into account without the need for tight vertical parking: at least 65 cm.
(function () {
document.querySelectorAll('.bjv-root').forEach(function (root) {
if (root.dataset.bjvReady) return;
root.dataset.bjvReady = '1';
(() => {
const tbody = root.querySelector('#bjv-comparisonTable tbody');
const rows = [...tbody.querySelectorAll('.bjv-product-row')];
const checks = [...root.querySelectorAll('.bjv-check-option input')];
const trigger = root.querySelector('#bjv-multiTrigger');
const panel = root.querySelector('#bjv-multiPanel');
const clearBtn = root.querySelector('#bjv-clearFilters');
const search = root.querySelector('#bjv-search');
const sort = root.querySelector('#bjv-sort');
const activeBox = root.querySelector('#bjv-activeFilters');
const count = root.querySelector('#bjv-resultCount');
const selectedCount = root.querySelector('#bjv-selectedCount');
const noResults = root.querySelector('#bjv-noResults');
const labelMap = new Map(checks.map(c => [c.value, c.closest('label').innerText.trim()]));
function selected() { return checks.filter(c => c.checked).map(c => c.value); }
function rank(row) { return row.dataset.gasarc === '1' ? 0 : 1; }
function testCriterion(row, key) {
if (key === 'gasarc') return row.dataset.gasarc === '1';
if (key === 'bicyclejack') return row.dataset.bicyclejack === '1';
if (key === 'made') return row.dataset.made === '1';
if (key === 'hub') return row.dataset.hub === '1';
if (key === 'weight35') return Number(row.dataset.weight) >= 35;
if (key === 'tire100') return Number(row.dataset.tire) >= 100;
if (key === 'length220') return Number(row.dataset.length) >= 220;
if (key === 'swivel') return row.dataset.swivel === '1';
if (key === 'fender') return row.dataset.fender === '1';
if (key === 'wheelwall') return row.dataset.wheelwall === '1';
if (key === 'fast') return row.dataset.fast === '1';
if (key === 'staggerinstall') return row.dataset.staggerinstall === '1';
if (key === 'staggerpark') return row.dataset.staggerpark === '1';
return true;
}
function passes(row) {
const q = search.value.trim().toLocaleLowerCase('de');
if (q && !row.dataset.search.includes(q)) return false;
return selected().every(key => testCriterion(row, key));
}
function compareWithinGroup(a,b) {
if (sort.value === 'brand') return a.dataset.search.localeCompare(b.dataset.search, 'de');
if (sort.value === 'weight') return Number(b.dataset.weight)-Number(a.dataset.weight) || Number(a.dataset.index)-Number(b.dataset.index);
if (sort.value === 'tire') return Number(b.dataset.tire)-Number(a.dataset.tire) || Number(a.dataset.index)-Number(b.dataset.index);
if (sort.value === 'length') return Number(b.dataset.length)-Number(a.dataset.length) || Number(a.dataset.index)-Number(b.dataset.index);
return Number(a.dataset.index)-Number(b.dataset.index);
}
function sorter(a,b) { const rd = rank(a)-rank(b); return rd || compareWithinGroup(a,b); }
function renderChips(keys) {
activeBox.innerHTML = '';
if (!keys.length) { activeBox.innerHTML = '
Keine Merkmale ausgewählt – alle Produkte werden gezeigt.'; return; }
const label = document.createElement('span'); label.className='bjv-active-label'; label.textContent='Aktiv:'; activeBox.appendChild(label);
keys.forEach(key => {
const button=document.createElement('button'); button.type='button'; button.className='bjv-active-chip'; button.dataset.remove=key;
button.innerHTML=`
${labelMap.get(key)}×`; button.setAttribute('aria-label',`${labelMap.get(key)} entfernen`); activeBox.appendChild(button);
});
}
function render() {
rows.sort(sorter).forEach(r => tbody.appendChild(r));
let visible=0; rows.forEach(row => { const show=passes(row); row.classList.toggle('bjv-hidden',!show); if(show) visible++; });
const keys=selected(); count.textContent=visible; selectedCount.textContent=keys.length; selectedCount.hidden=keys.length===0; noResults.classList.toggle('bjv-show',visible===0); renderChips(keys);
}
function setPanel(open) { panel.classList.toggle('bjv-open',open); trigger.setAttribute('aria-expanded',String(open)); }
trigger.addEventListener('click',()=>setPanel(!panel.classList.contains('bjv-open')));
checks.forEach(c=>c.addEventListener('change',render));
clearBtn.addEventListener('click',()=>{ checks.forEach(c=>c.checked=false); render(); });
search.addEventListener('input',render); sort.addEventListener('change',render);
activeBox.addEventListener('click',event=>{ const button=event.target.closest('[data-remove]'); if(!button) return; const input=checks.find(c=>c.value===button.dataset.remove); if(input) input.checked=false; render(); });
document.addEventListener('click',event=>{ if(!event.target.closest('.bjv-multi-select')) setPanel(false); });
document.addEventListener('keydown',event=>{ if(event.key==='Escape'){setPanel(false);trigger.focus();} });
render();
})();
});
})();