/* 02-brands — Marken-Marquee (Besitzer: Brands-Agent). Mechanik: 2 Sets, Track = 2×Set, translate3d(-50%). */
.rad-brands{padding:32px 0 0}   /* 28.09.2026 (Kundenwunsch): näher an den Hero, vorher 44 */
.rad-brands .rad-brands__eyebrow{font:600 var(--vn-text-xs)/1.4 var(--vn-font-body);letter-spacing:var(--rad-ls-eyebrow);text-transform:uppercase;color:var(--vn-color-muted);text-align:center;filter:none}
.rad-brands__viewport{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rad-brands__track{display:flex;width:max-content;animation:rad-brands-drift var(--rad-brands-duration,46s) linear infinite}
.rad-brands.is-live .rad-brands__track{will-change:transform}
.rad-brands:focus-within .rad-brands__track{animation-play-state:paused}
@media(hover:hover){.rad-brands:hover .rad-brands__track{animation-play-state:paused}}
.rad-brands__set{display:flex;align-items:center;gap:var(--rad-brands-gap,64px);padding:0 var(--rad-brands-gap,64px) 0 0;margin:0;list-style:none;
  --rad-logo-scale:1.25}   /* Kundenwunsch 30.09.2026: im Band ohne Kachel, nur die ausgeglichenen Groessen (Tabelle unten) */
.rad-brands__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0;height:calc(56px * var(--rad-logo-scale,1))}
/* Logo = maskierte Fläche: Form aus der SVG (--logo), Farbe aus dem Hintergrund. Beim Hover legt sich der Holo-Verlauf des
   Wappens (site.css --vn-gradient-holo) als Pseudo-Element darüber — dieselbe Maske gilt für das ganze Element samt ::after.
   Kundenwunsch 17.09.2026; bewusste Ausnahme von der CI-Regel „Holo nur als Hairline“. */
.rad-brands__logo{position:relative;display:block;flex:0 0 auto;max-width:100%;
  width:calc(var(--rad-logo-b,110px) * var(--rad-logo-scale,1));height:calc(var(--rad-logo-h,24px) * var(--rad-logo-scale,1));
  background:var(--vn-color-muted);opacity:.72;
  -webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat;
  transition:opacity .35s ease,transform .6s var(--vn-ease-out)}
.rad-brands__logo::after{content:"";position:absolute;inset:0;background:var(--vn-gradient-holo);opacity:0;transition:opacity .45s var(--vn-ease-out)}
.rad-brands__item:focus-within .rad-brands__logo{opacity:1;transform:translateY(-2px)}
@media(hover:hover){.rad-brands__item:hover .rad-brands__logo{opacity:1;transform:translateY(-2px)}}
.rad-brands__item:focus-within .rad-brands__logo::after{opacity:1}
@media(hover:hover){.rad-brands__item:hover .rad-brands__logo::after{opacity:1}}
/* Logogroessen (30.09.2026) gemessen statt geschaetzt: gleiche optische Flaeche je Logo. Breite ~ Wurzel aus dem Seitenverhaeltnis,
   dazu ein Ausgleich nach Tintendichte (Deckung^-0,3) — duenne Wortmarken wie Centurion oder Loeffler werden dadurch
   groesser, sehr breite wie Riese & Mueller flacher. Hoechstens 160 x 52 px, damit alles in die Kachel passt.
   Gilt fuer Band, Markenreihen und das Raster auf /bikes/ (alle tragen data-brand). */
[data-brand=trek]{--rad-logo-b:115px;--rad-logo-h:17.5px}
[data-brand=cube]{--rad-logo-b:96px;--rad-logo-h:31.5px}
[data-brand=wilier]{--rad-logo-b:128px;--rad-logo-h:21px}
[data-brand=woom]{--rad-logo-b:97px;--rad-logo-h:21.5px}
[data-brand=flyer]{--rad-logo-b:134px;--rad-logo-h:17px}
[data-brand=centurion]{--rad-logo-b:100px;--rad-logo-h:47px}
[data-brand=ghost]{--rad-logo-b:122px;--rad-logo-h:18.5px}
[data-brand=diamant]{--rad-logo-b:104px;--rad-logo-h:26px}
[data-brand=velo-de-ville]{--rad-logo-b:158px;--rad-logo-h:13px}
[data-brand=riese-mueller]{--rad-logo-b:160px;--rad-logo-h:13.5px}
[data-brand=giant]{--rad-logo-b:115px;--rad-logo-h:26px}
[data-brand=liv]{--rad-logo-b:73px;--rad-logo-h:30.5px}
[data-brand=look]{--rad-logo-b:66px;--rad-logo-h:25px}
[data-brand=schindelhauer]{--rad-logo-b:150px;--rad-logo-h:22px}
[data-brand=poc]{--rad-logo-b:75px;--rad-logo-h:26px}
[data-brand=oakley]{--rad-logo-b:85px;--rad-logo-h:31.5px}
[data-brand=uvex]{--rad-logo-b:82px;--rad-logo-h:20.5px}
[data-brand=casco]{--rad-logo-b:116px;--rad-logo-h:24.5px}
[data-brand=cratoni]{--rad-logo-b:147px;--rad-logo-h:11.5px}
[data-brand=martini]{--rad-logo-b:103px;--rad-logo-h:23px}
[data-brand=loeffler]{--rad-logo-b:58px;--rad-logo-h:51.5px}
[data-brand=roeckl]{--rad-logo-b:108px;--rad-logo-h:28.5px}
[data-brand=pop-eyes]{--rad-logo-b:114px;--rad-logo-h:20.5px}
[data-brand=schwalbe]{--rad-logo-b:89px;--rad-logo-h:29px}
[data-brand=sqlab]{--rad-logo-b:78px;--rad-logo-h:25px}

/* Greifbares Band (22.09.2026, Kundenwunsch „steuerbar"): .is-greifbar setzt 02-brands.js erst, wenn es die
   Bewegung selbst uebernimmt. Ab da laeuft keine CSS-Animation mehr — sonst wuerden sich Keyframe-Transform und
   der per JS gesetzte Transform gegenseitig ueberschreiben. touch-action:pan-y laesst das Seitenscrollen nach oben
   und unten weiterhin durch, faengt aber die waagrechte Geste ab. */
.rad-brands.is-greifbar .rad-brands__track{animation:none}
.rad-brands.is-greifbar .rad-brands__viewport{cursor:grab;touch-action:pan-y}
.rad-brands.is-greifbar .rad-brands__viewport.is-greift{cursor:grabbing}
.rad-brands.is-greifbar .rad-brands__item,.rad-brands.is-greifbar .rad-brands__logo{user-select:none;-webkit-user-select:none}

/* Abschluss-Hairline 40 px unter dem Viewport, in der Shell */
.rad-brands .rad-hairline{margin-top:40px}
@keyframes rad-brands-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:1000px){
  .rad-brands__set{--rad-brands-gap:52px;--rad-logo-scale:1.15}
  .rad-brands__track{--rad-brands-duration:40s}
}
@media(max-width:650px){
  .rad-brands{padding-top:32px}
  .rad-brands__set{--rad-brands-gap:40px;--rad-logo-scale:1.03}
  .rad-brands__track{--rad-brands-duration:36s}
}
/* reduced-motion: statisch, ein Set, umbrechend, ohne Maske */
@media(prefers-reduced-motion:reduce){
  .rad-brands__track,.rad-brands.is-live .rad-brands__track{animation:none;width:100%;will-change:auto}
  .rad-brands__set[aria-hidden=true]{display:none}
  .rad-brands__set{flex-wrap:wrap;justify-content:center;row-gap:26px;padding-right:0;width:100%}
  .rad-brands__viewport{-webkit-mask-image:none;mask-image:none;width:min(1280px,calc(100% - 2*var(--vn-gutter)));margin-inline:auto}
}