/* --- 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} } (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(); })(); }); })();