Your partner for smart RFID system solutions.

/* ============================================ LOGO SLIDER – Modern, Accessible, Production CSS Custom Properties + Container Queries ============================================ */ .partner-slider { --slider-gap: clamp(3rem, 6vw, 5rem); --slider-height: clamp(48px, 7vw, 72px); --slider-duration: 30s; --slider-easing: linear; --btn-size: 42px; --btn-radius: 15px; --focus-ring: 3px solid currentColor; --focus-offset: 6px; container-type: inline-size; width: 100%; padding-block: 1.5rem; } /* Pause control */ .partner-slider__controls { display: flex; justify-content: left; margin: 1.25rem; } .partner-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--btn-size); height: var(--btn-size); padding: 5px; border: none; border-radius: var(--btn-radius); background-image: linear-gradient( 180deg, var(--gcid-primary-color, #1a6fc4) 0%, var(--gcid-vqsc10226h, #0d4a8a) 50%, var(--gcid-primary-color, #1a6fc4) 100% ); color: #ffffff; cursor: pointer; transition: opacity 0.2s ease, scale 0.2s ease; } .partner-slider__btn:hover { opacity: 0.85; scale: 1.05; } .partner-slider__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--btn-radius); } /* Viewport – padding damit Fokus-Ring nicht abgeschnitten wird */ .partner-slider__viewport { overflow: hidden; position: relative; padding-block: 8px; margin-block: -8px; mask-image: linear-gradient( to right, transparent 0%, black 10%, black 90%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black 10%, black 90%, transparent 100% ); } /* Scrolling track */ .partner-slider__track { display: flex; align-items: center; gap: var(--slider-gap); width: max-content; will-change: transform; animation: partner-scroll var(--slider-duration) var(--slider-easing) infinite; padding-block: 8px; padding-inline: 4px; } /* Pause state */ .partner-slider[data-paused="true"] .partner-slider__track { animation-play-state: paused; } /* Individual logos – alle grau */ .partner-slider__logo { display: block; height: var(--slider-height); width: auto; max-width: 180px; object-fit: contain; flex-shrink: 0; border-radius: 4px; filter: grayscale(1) opacity(0.5); transition: filter 0.4s ease, scale 0.3s ease; } /* Nur bei Hover / Fokus farbig */ .partner-slider__logo:hover, .partner-slider__logo:focus-visible { filter: grayscale(0) opacity(1); scale: 1.06; outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; } /* Keyframe */ @keyframes partner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .partner-slider__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 2rem; } .partner-slider__track[aria-hidden="true"] { display: none; } .partner-slider__controls { display: none; } .partner-slider__logo { filter: grayscale(0) opacity(1); } } /* Container queries */ @container (max-width: 600px) { .partner-slider { --slider-gap: 2rem; --slider-height: 40px; --slider-duration: 20s; } } @container (max-width: 400px) { .partner-slider { --slider-gap: 1.5rem; --slider-height: 32px; --slider-duration: 15s; } }

(function() { 'use strict'; var slider = document.querySelector('.partner-slider'); var btn = document.getElementById('partner-slider-btn'); var icon = document.getElementById('partner-slider-icon'); if (!slider || !btn) return; var ICONS = { pause: '', play: '' }; function setPaused(paused) { slider.dataset.paused = paused; btn.setAttribute('aria-pressed', String(paused)); btn.setAttribute('aria-label', paused ? 'Partner-Slider fortsetzen' : 'Partner-Slider pausieren'); btn.innerHTML = paused ? ICONS.play : ICONS.pause; } var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)'); if (prefersReduced.matches) setPaused(true); prefersReduced.addEventListener('change', function(e) { setPaused(e.matches); }); btn.addEventListener('click', function() { setPaused(slider.dataset.paused !== 'true'); }); slider.addEventListener('focusin', function() { setPaused(true); }); slider.addEventListener('focusout', function() { if (btn.getAttribute('aria-pressed') === 'false') setPaused(false); }); })();