/* 16-bikes-neu — Neuheiten und Markentexte auf /bikes/ (Kundenwunsch 21.09.2026).
   Die Neuheiten sind eine von Hand gepflegte Reihe (assets/data/bikes-neuheiten.json), kein Automatismus:
   "herstelleruebergreifende Neuheiten" heisst nicht "was zuletzt in den Shop kam". Jede Karte fuehrt auf
   eine Infoseite — Raeder ohne eine solche stehen hier nicht. */

.rad-bneu__lead{margin:0;max-width:52ch;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}
/* Grossflaechige Baender statt Produktkacheln (Kundenwunsch 21.09.2026): Traeger ist das Stimmungsbild
   des Herstellers, der Text liegt darauf. Anders als in der Vorlage steht er nicht mittig, sondern links
   unten — so wie auf allen anderen Koepfen dieser Website. */
.rad-bneu__raster{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:clamp(14px,1.6vw,22px);--rad-stagger:80ms}
.rad-bneu__band{min-width:0}
.rad-bneu__link{position:relative;display:flex;align-items:flex-end;isolation:isolate;
  min-height:clamp(280px,32vw,440px);padding:clamp(24px,3vw,44px);
  border-radius:var(--vn-radius-lg);overflow:hidden;text-decoration:none;color:var(--vn-color-on-dark);
  background:var(--vn-color-surface-darker)}
.rad-bneu__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:contain;object-position:right center;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 42%);mask-image:linear-gradient(to right,transparent,#000 42%);
  transition:transform var(--vn-d-slower) var(--vn-ease-out)}
@media(hover:hover){.rad-bneu__link:hover .rad-bneu__bg{transform:scale(1.03)}}
/* Ein Verlauf von unten traegt die Schrift, ohne das Rad in der Bildmitte abzudunkeln. */
.rad-bneu__link::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--vn-color-surface-darker) 88%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 52%,transparent) 34%,
    transparent 68%)}
.rad-bneu__inhalt{display:flex;flex-direction:column;gap:10px;max-width:54ch}
.rad-bneu__name{font:var(--rad-w-display) clamp(1.5rem,calc(40 * var(--rad-dpx)),2.5rem)/1.15 var(--vn-font-display);
  letter-spacing:var(--rad-ls-head)}
.rad-bneu__grund{max-width:46ch;font:400 max(.9375rem,calc(17 * var(--rad-dpx)))/1.6 var(--vn-font-body);
  color:var(--vn-color-on-dark-muted)}
.rad-bneu__link:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px}

@media (max-width:700px){
  /* Hochformat auf dem Telefon (Kundenwunsch 21.09.2026): quer blieb vom Bild kaum mehr als ein
     Streifen ueber dem Text. Das Seitenverhaeltnis gibt die Hoehe vor, die Untergrenze faengt lange
     Texte ab — sonst draengt der Satz das Bild wieder zusammen. */
  .rad-bneu__link{aspect-ratio:3/4;min-height:400px;padding:22px}
  .rad-bneu__bg{object-position:center 16%;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 72%);mask-image:linear-gradient(to bottom,#000 50%,transparent 72%)}
  .rad-bneu__name{font-size:clamp(1.375rem,6.4vw,1.75rem)}
  /* Jede Sektion setzt den Umbruch ihres Kopfes selbst — .rad-head bleibt sonst nebeneinander. */
  .rad-bneu .rad-head{flex-direction:column;align-items:stretch;gap:16px}
  .rad-bneu__lead{max-width:none}
}