/* 03b-fahrradwelten — eigene Sektion auf Beige (rad-light-2), seit 17.09.2026 (Kundenwunsch: visuell von den Leistungen trennen).
   Kopf wie die übrigen Sektionen (Eyebrow + h2 links, Text + Link rechts), darunter das Bento 4×2: zwei breite Kacheln diagonal
   (Rennrad/Gravel oben links, Nostalgie unten rechts), vier kleine. Kacheln laufen gestaffelt ein (--i). */
.rad-worlds{--rad-stagger:70ms}
/* 19.09.2026 (Kundenwunsch): Kopf oben buendig. Die Regel steht hier und nicht als eigene Klasse, weil die
   bisherige Zeile .rad-worlds .rad-head jede schwaechere Angabe geschlagen haette. */
.rad-worlds .rad-head{align-items:flex-start}
.rad-worlds__title{flex:0 0 min(60%,720px)}   /* h2 bricht mit text-wrap:balance (site.css) von selbst aus; laengste Zeile ≈ 711 px @64 px */
.rad-worlds__lead{flex:0 1 28em;max-width:28em;padding-bottom:0;display:flex;flex-direction:column;align-items:flex-start}
.rad-worlds__lead>p{font-size:var(--vn-text-base);line-height:1.65;text-wrap:pretty}
/* Der Knopf sitzt rechtsbuendig unter dem Text — dieselbe Kante wie „Alle Leistungen ansehen" in der Sektion davor. */
.rad-worlds__all{margin-top:20px;align-self:flex-end}

.rad-worlds__bento{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rad-worlds__cell{min-width:0}
.rad-worlds__cell--wide{grid-column:span 2}
/* Regionen-Uebersicht (19.09.2026): drei gleich breite Kacheln statt des Bento-Rhythmus. */
.rad-worlds__bento--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.rad-worlds__tile{position:relative;isolation:isolate;overflow:hidden;display:block;height:100%;min-height:max(220px,calc(260 * var(--rad-dpx)));
  border-radius:var(--vn-radius-xl);border:0;background:var(--vn-color-surface-raised);box-shadow:var(--rad-card-shadow),var(--rad-glow-shadow);color:var(--vn-color-on-dark);text-decoration:none}
/* 22.09.2026: Die Kategorie-Kacheln tragen die 4:3-Karten (Rad im dunklen Studio) und folgen deshalb dem Bildformat —
   sonst schneidet object-fit auf Tablet (2 Spalten, 1,85:1) Lenker und Sattel ab. Die Regionen-Reihe (--drei, Fotos) behaelt
   ihre Mindesthoehe. */
.rad-worlds__bento:not(.rad-worlds__bento--drei) .rad-worlds__tile{height:auto;aspect-ratio:4/3;min-height:0}
/* 22.09.2026 (Kundenwunsch): kein Kartenschatten unter den Kategorie-Kacheln. Auf der beigen Flaeche lag unter
   jeder Kachel ein 64-px-Weichschatten, die Reihe wirkte aufgeklebt; die dunklen Studiobilder grenzen sich von
   selbst ab. Der bunte Hover-Schein bleibt — er ist der zweite Wert der Schattenliste und muss stehen bleiben,
   sonst faellt auch er aus. Die Regionen-Kacheln (--drei, Fotos) behalten ihren Schatten. */
.rad-worlds__bento:not(.rad-worlds__bento--drei) .rad-worlds__tile{box-shadow:var(--rad-glow-shadow)}
.rad-worlds__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1400ms var(--vn-ease-out),filter 700ms var(--vn-ease-out)}
/* Bildausschnitt je Motiv, am Dateinamen statt an der Rasterposition — so gilt er auch, wenn die Reihenfolge wechselt. */
.rad-worlds__img[src*="bikes-welt-rennrad"]{object-position:50% 62%}
.rad-worlds__img[src*="bikes-welt-citybike"]{object-position:50% 58%}
/* Verlauf nur noch als Traeger fuer den Namen (wie im Welten-Schieber auf /bikes/): die Studiobilder sind selbst dunkel,
   der alte Karten-Verlauf (90 % ab 76 %) hat die untere Radhaelfte verschluckt. */
.rad-worlds__shade{position:absolute;inset:0;z-index:2;transition:opacity var(--vn-d-slow);
  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) 34%,transparent) 30%,transparent 55%)}
.rad-worlds__label{position:absolute;z-index:3;left:max(20px,calc(24 * var(--rad-dpx)));right:max(20px,calc(24 * var(--rad-dpx)));bottom:max(20px,calc(24 * var(--rad-dpx)));display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rad-worlds__name{font:500 max(1.0625rem,calc(19 * var(--rad-dpx)))/1.3 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-on-dark)}
.rad-worlds__tile:is(:focus-visible) .rad-worlds__img{transform:scale(1.06);filter:saturate(1.08)}
@media(hover:hover){.rad-worlds__tile:is(:hover,:focus-visible) .rad-worlds__img{transform:scale(1.06);filter:saturate(1.08)}}
.rad-worlds__tile:focus-visible{outline:none}
.rad-worlds__tile:focus-visible::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--vn-radius-xl);box-shadow:inset 0 0 0 3px var(--vn-color-accent)}

@media(max-width:1000px){
  .rad-worlds .rad-head{flex-direction:column;align-items:stretch;gap:20px}
  .rad-worlds__lead{flex:0 1 auto;padding-bottom:0}
  .rad-worlds__bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .rad-worlds__bento--drei .rad-worlds__tile{min-height:220px}
  .rad-worlds__cell--wide .rad-worlds__tile{aspect-ratio:2;min-height:0}
}
@media(max-width:650px){
  .rad-worlds__bento{gap:16px}
  /* Handy: zwei schmale Spalten — quadratisch, damit der Name unter dem Rad Platz hat statt darueber zu liegen
     (die 4:3-Karte verliert dabei seitlich je 12 %, die Raeder sind mittig und bleiben ganz). */
  .rad-worlds__bento:not(.rad-worlds__bento--drei) .rad-worlds__tile{aspect-ratio:1}
  /* min-height:0 ist Pflicht: mit min-height + aspect-ratio überträgt der Browser die Höhe in die Breite (Querüberlauf bei 320) */
  .rad-worlds__cell--wide .rad-worlds__tile{aspect-ratio:1.6;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .rad-worlds__img,.rad-worlds__shade{transition:none}
}

/* Die Drei-Kachel-Reihe muss NACH den Breakpoints stehen: sonst schlaegt .rad-worlds__bento im 1000px-Block
   (zwei Spalten) die Ausnahme, und aus drei Regionen werden zwei plus eine. */
@media(max-width:1000px){.rad-worlds__bento--drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.rad-worlds__bento--drei{grid-template-columns:minmax(0,1fr)}
  .rad-worlds__bento--drei .rad-worlds__tile{aspect-ratio:1.6;min-height:0}}