/* 12-bikes — Fahrradwelten-Unterseiten (/bikes/ und /bikes/<welt>/), erzeugt von tools/build-bike-pages.py.
   Bausteine kommen aus 10-seiten.css (Hero, Intro, Checkliste, Roadmap) und 03-leistungen.css (Karten). Hier nur, was neu ist:
   Spielarten-Raster mit 2/3/4 Karten, Markenreihe (statische Logos in der Maskentechnik des Marquees), Zehn-Welten-Raster. */

/* Spielarten: Karten je nach Anzahl 2 (flacher), 3 oder 4 Spalten */
.rad-barten{--rad-services-pad:max(20px,calc(24 * var(--rad-dpx)))}
.rad-barten__head{margin-bottom:40px}
.rad-barten__lead{max-width:34em;line-height:1.65}
.rad-barten--4 .rad-services__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.rad-barten--4 .rad-services__card{aspect-ratio:.92}
.rad-barten--2 .rad-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rad-barten--2 .rad-services__card{aspect-ratio:1.9}
.rad-barten .rad-services__card:nth-child(n) .rad-services__img{object-position:50% 50%}   /* Bildausschnitte der Startseite gelten hier nicht */

/* Marken in dieser Welt: Text links, Logos rechts als Reihe; Logo-Optik und Hover (Holo) aus 02-brands.css */
.rad-bmarken__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.rad-bmarken__lead{margin-top:18px;max-width:28em;line-height:1.7}
.rad-bmarken__grid .rad-text-link{margin-top:22px;color:var(--vn-color-fg)}
.rad-bmarken__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
/* Logokachel (Kundenwunsch 30.09.2026, „unruhig“): jedes Logo sitzt in einer gleich grossen, gerundeten Kachel. Die Kachel
   hebt sich gegen die Flaeche ab, auf der sie steht — auf Papier etwas dunkler, auf der dunkleren hellen Flaeche heller. */
.rad-bmarken__list{--rad-marke-kachel:var(--vn-color-surface-light)}
.rad-light-2 .rad-bmarken__list{--rad-marke-kachel:var(--vn-color-paper)}
.rad-bmarken__list .rad-brands__item{grid-column:span 2;height:calc(104px * var(--rad-logo-scale,1));padding:0 calc(24px * var(--rad-logo-scale,1));
  border-radius:var(--vn-radius-xl);background:var(--rad-marke-kachel)}
/* Unvollstaendige letzte Reihe mittig statt linksbuendig: ein oder zwei Kacheln rutschen in die Mitte */
@media(min-width:1001px) and (max-width:1250px){.rad-bmarken__list{--rad-logo-scale:.86}}
@media(min-width:651px){
  .rad-bmarken__list .rad-brands__item:last-child:nth-child(3n+1){grid-column:3 / span 2}
  .rad-bmarken__list .rad-brands__item:nth-last-child(2):nth-child(3n+1){grid-column:2 / span 2}
}
.rad-bmarken__list .rad-brands__logo{background:var(--vn-color-fg);opacity:.62}

/* Zehn Welten: fünf Spalten, hochkant */
.rad-bwelten{--rad-services-pad:max(18px,calc(22 * var(--rad-dpx)))}
/* 19.09.2026 (Kundenwunsch): Kopf oben buendig — .rad-head richtet sonst an der Unterkante aus, dadurch startete der
   Text rechts tiefer als die Ueberschrift links. */
.rad-bwelten__head{margin-bottom:40px;align-items:flex-start}
.rad-bwelten__lead{max-width:34em;line-height:1.65}
/* 19.09.2026 (Kundenwunsch): die Welten-Kacheln tragen keine Unterzeile mehr — der Titel steht allein unten in der
   Kachel und darf dafuer eine Stufe groesser sein. Die Regel fuer die Beschreibung entfaellt damit hier. */
.rad-bwelten .rad-services__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.rad-bwelten .rad-services__card{aspect-ratio:.8}
.rad-bwelten .rad-services__card:nth-child(n) .rad-services__img{object-position:50% 50%}
.rad-bwelten .rad-services__title{font-size:max(1.0625rem,calc(21 * var(--rad-dpx)))}

@media(max-width:1000px){
  .rad-barten--4 .rad-services__grid,.rad-bwelten .rad-services__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .rad-barten--4 .rad-services__card,.rad-bwelten .rad-services__card{aspect-ratio:1.3}
  .rad-barten--2 .rad-services__card{aspect-ratio:1.6}
  .rad-bmarken__grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:650px){
  .rad-barten--4 .rad-services__grid,.rad-barten--2 .rad-services__grid,.rad-bwelten .rad-services__grid{grid-template-columns:1fr;gap:16px}
  .rad-barten--4 .rad-services__card,.rad-barten--2 .rad-services__card,.rad-bwelten .rad-services__card{aspect-ratio:1.45}
  .rad-bmarken__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;--rad-logo-scale:.8}
  .rad-bmarken__list .rad-brands__item:last-child:nth-child(2n+1){grid-column:2 / span 2}
}

/* ---------- Kategoriekacheln auf /bikes/ (Kundenwunsch 19.09.2026) ----------
   Statt einer Stimmungsaufnahme mit Text darauf zeigt jede Kachel jetzt ein echtes Rad aus dieser Kategorie —
   freigestellt vor Weiss, wie die Produktkacheln. Der Name steht darunter, damit das Foto nicht abgedunkelt
   werden muss. Dadurch sieht das Raster auf /bikes/ aus wie die Produktlisten dahinter. */
.rad-kraster{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(12px,1.4vw,20px);--rad-stagger:60ms}
.rad-kcard{min-width:0}
.rad-kcard__link{display:flex;flex-direction:column;height:100%;border-radius:var(--vn-radius-xl);background:#fff;
  color:var(--vn-color-ink);text-decoration:none;overflow:hidden;
  transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-kcard__link:is(:focus-visible){transform:translateY(-3px)}
@media(hover:hover){.rad-kcard__link:is(:hover,:focus-visible){transform:translateY(-3px)}}
.rad-kcard__bild{display:flex;flex:0 0 auto;aspect-ratio:4/3;overflow:hidden;background:#fff}
.rad-kcard__img{width:100%;height:100%;min-height:0;object-fit:contain;padding:12px;
  transition:transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-kcard__link:is(:focus-visible) .rad-kcard__img{transform:scale(1.05)}
@media(hover:hover){.rad-kcard__link:is(:hover,:focus-visible) .rad-kcard__img{transform:scale(1.05)}}
.rad-kcard__titel{display:flex;flex:1 1 auto;align-items:flex-end;justify-content:center;padding:10px 14px 18px;text-align:center;
  font:var(--rad-w-display) max(.9375rem,calc(17 * var(--rad-dpx)))/1.3 var(--vn-font-display);
  letter-spacing:-.01em;color:var(--vn-color-ink)}
@media (max-width:1100px){.rad-kraster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.rad-kraster{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .rad-kcard__titel{padding:2px 8px 14px;font-size:var(--vn-text-sm)}}
@media (max-width:460px){.rad-kraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .rad-kcard__link,.rad-kcard__img{transition:none}
  .rad-kcard__link:is(:focus-visible){transform:none}
  @media(hover:hover){.rad-kcard__link:is(:hover,:focus-visible){transform:none}}
  .rad-kcard__link:is(:focus-visible) .rad-kcard__img{transform:none}
  @media(hover:hover){.rad-kcard__link:is(:hover,:focus-visible) .rad-kcard__img{transform:none}}}

/* ---------- Markenraster auf /bikes/ (Kundenwunsch 19.09.2026, Vorbild Das Bike) ----------
   Ruhiges Raster statt laufendem Band: weisse Kacheln auf heller Flaeche, das Logo als Maske mittig.
   Sieben Spalten am Desktop (14 Marken = zwei volle Reihen), darunter vier; ein Rest von zwei Kacheln steht mittig. */
.rad-bgrid__liste{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);--rad-logo-scale:.86;
  margin:0;padding:0;list-style:none}
.rad-bgrid__feld{display:grid;place-items:center;aspect-ratio:5/4;padding:14px;
  border-radius:var(--vn-radius-md);
  /* Die Kachel laeuft mit: auf der hellen Flaeche reines Weiss (sonst hebt sie sich nicht ab),
     auf der dunklen der warme Papierton (reines Weiss wirkt gegen das warme Schwarz kalt). */
  background:color-mix(in srgb,var(--vn-color-on-dark) calc(var(--rad-bgrid-p) * 100%),#fff)}
.rad-bgrid__logo{display:block;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-surface-dark);
  -webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat;
  transition:transform var(--vn-d-slow) var(--vn-ease-out)}
@media(hover:hover){.rad-bgrid__feld:hover .rad-bgrid__logo{transform:scale(1.06)}}
@media (max-width:1100px){
  .rad-bgrid__liste{grid-template-columns:repeat(4,minmax(0,1fr));--rad-logo-scale:.9}
  .rad-bgrid__feld:nth-last-child(2):nth-child(4n+1){grid-column-start:2}
}
@media (max-width:760px){
  .rad-bgrid__liste{--rad-logo-scale:.8}
  .rad-bgrid__feld{padding:10px}
}
/* Handy (Kundenwunsch 19.09.2026): statt zweier grosser Spalten ein kompaktes 4x3-Raster — zwoelf Marken gehen
   dadurch genau auf und der Block wird quer statt zu einem langen Streifen. Quadratische Kacheln, weil die Logos
   bei vier Spalten sonst in einer sehr flachen Flaeche saessen. Die Logogroessen kommen aus 02-brands.css (data-brand). */
@media (max-width:650px){
  .rad-bgrid__liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;--rad-logo-scale:.46}
  .rad-bgrid__feld{aspect-ratio:1;padding:6px;border-radius:var(--vn-radius-sm)}
}
@media (prefers-reduced-motion:reduce){.rad-bgrid__logo{transition:none}@media(hover:hover){.rad-bgrid__feld:hover .rad-bgrid__logo{transform:none}}}

/* ---------- Beratung auf /bikes/ (Kundenwunsch 19.09.2026) ----------
   „Das richtige Rad“ und „Gut zu wissen“ sind zu EINER Sektion verschmolzen. Drei Karten im Kartenstil der Startseite
   (Verlauf, kein Rand, weicher Schatten), oben die grosse Ziffer in Gold wie in der Leasing-Roadmap. Unter dem Text,
   durch eine Haarlinie abgesetzt, stehen die zwei Zusagen, die zu diesem Schritt gehoeren — mit dem Goldhaken, den die
   Checklisten der Unterseiten schon verwenden. Der Text dehnt sich (flex:1), deshalb fluchten die Zusagen in allen
   drei Karten auf derselben Linie. */
.rad-bberat__head{margin-bottom:40px;align-items:flex-start}
.rad-bberat__lead{max-width:34em;line-height:1.65}
.rad-bberat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;--rad-stagger:70ms}
.rad-bberat__karte{min-width:0;display:flex;flex-direction:column;padding:32px 34px 30px;border-radius:var(--vn-radius-xl);
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:var(--rad-card-shadow);color:var(--vn-color-on-dark)}
.rad-bberat__titel{margin:24px 0 0;font:var(--rad-w-h3) var(--rad-fs-h3)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);
  letter-spacing:var(--rad-ls-head);color:var(--vn-color-on-dark);text-wrap:balance}
.rad-bberat__text{flex:1 1 auto;margin:12px 0 0;font:400 var(--vn-text-base)/1.65 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
/* 22.09.2026 (Kundenwunsch): ohne Trennlinie ueber den Haken — die Zahl darueber ist ebenfalls entfallen,
   der Abstand allein trennt jetzt Text und Fakten. */
.rad-bberat__fakten{margin:28px 0 0;padding:20px 0 0;list-style:none;display:grid;gap:12px}
.rad-bberat__fakten li{position:relative;padding-left:32px;font:500 var(--vn-text-sm)/1.45 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-bberat__fakten li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--vn-color-accent)}
.rad-bberat__fakten li::after{content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;
  border-left:2px solid var(--vn-color-ink);border-bottom:2px solid var(--vn-color-ink);transform:rotate(-45deg)}

/* Unter 1000 px quetscht .rad-head die zweizeilige Ueberschrift auf halbe Breite — darum stapeln statt nebeneinander. */
@media(max-width:1000px){
  .rad-bberat__head{flex-direction:column;align-items:stretch;gap:20px;margin-bottom:32px}
  .rad-bberat__lead{max-width:none}
}

/* Tablet: eine Spalte waere hier sehr breit fuer wenig Text — die Karte teilt sich stattdessen quer auf,
   Schritt links, Zusagen rechts an einer senkrechten Haarlinie. */
@media(min-width:651px) and (max-width:1000px){
  .rad-bberat__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .rad-bberat__karte{display:grid;grid-template-columns:1.3fr 1fr;column-gap:40px;align-items:start;padding:30px 32px}
  .rad-bberat__titel,.rad-bberat__text{grid-column:1}
  .rad-bberat__fakten{grid-column:2;grid-row:1 / span 3;align-self:center;
    margin:0;padding:0 0 0 34px;border-top:0;border-left:1px solid var(--vn-color-divider-dark)}
}
@media(max-width:650px){
  .rad-bberat__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .rad-bberat__karte{padding:26px 24px 24px}
  .rad-bberat__titel{margin-top:18px}
  .rad-bberat__fakten{margin-top:22px;padding-top:18px}
}

/* ---------- Scrollanimation der Markensektion (Kundenwunsch 19.09.2026) ----------
   Die Flaeche laeuft beim Scrollen von hell nach dunkel. Den Fortschritt liefert 12-bikes.js als --rad-bgrid-p (0..1),
   bereits durch eine S-Kurve geschickt: die Farbe setzt sanft an, laeuft in der Mitte gleichmaessig und klingt sanft aus.
   Registriert, damit calc() in color-mix sicher als Zahl ankommt. Ohne JS und unter reduzierter Bewegung steht die
   Sektion sofort auf dunkel (Initialwert 1) — die Logos sind dann trotzdem lesbar. */
@property --rad-bgrid-p{syntax:"<number>";inherits:true;initial-value:1}
.rad-bgrid{--rad-bgrid-p:1;position:relative;isolation:isolate;
  /* Am Ende der Animation steht dieselbe Fuellung wie auf den Karten der Website (Kundenwunsch 19.09.2026):
     der Verlauf von warm angeleuchtetem Anthrazit ins Tiefschwarz, 160°. Beide Haltepunkte werden mit dem
     Fortschritt aus der hellen Flaeche herausgemischt — bei 0 sind beide paper-2, die Flaeche ist dann glatt hell. */
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--rad-card-top) calc(var(--rad-bgrid-p) * 100%),var(--vn-color-surface-light)) 0%,
    color-mix(in srgb,var(--rad-card-bottom) calc(var(--rad-bgrid-p) * 100%),var(--vn-color-surface-light)) 100%)}

/* 21.09.2026 (Kundenwunsch): keine weichen Kanten mehr. Vorher blendeten zwei Verlaeufe an Ober- und
   Unterkante in die Farbe der Nachbarsektionen aus; jetzt endet die dunkle Flaeche hart gegen Hell.
   Die Regel darunter bleibt: sie haelt den Inhalt ueber dem Flaechenverlauf der Sektion. */
.rad-bgrid > *{position:relative;z-index:1}