/* 17-welten — die elf Welten als Schieber mit Stimmungsbildern (Kundenwunsch 21.09.2026, Entwurf A).
   Loest das Kachelraster mit Freistellern ab: Hochformat-Folien mit einer Aufnahme aus dem Einsatz.
   Geschoben wird nativ (overflow-x + scroll-snap) statt per transform — das bringt Wischen, Tastatur
   und Trackpad von selbst mit; die Knoepfe setzen nur scrollBy(). */
.rad-welt{position:relative;--welt-luft:max(20px,calc((100vw - var(--vn-container-default)) / 2))}
.rad-welt__spur{display:flex;gap:clamp(12px,1.4vw,20px);margin:0;padding:6px var(--welt-luft) 18px;
  list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--welt-luft);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rad-welt__spur::-webkit-scrollbar{display:none}
.rad-welt__folie{flex:0 0 clamp(228px,26vw,340px);scroll-snap-align:start}
.rad-welt__link{position:relative;display:block;aspect-ratio:3/4;isolation:isolate;overflow:hidden;
  border-radius:var(--vn-radius-lg);background:var(--vn-color-surface-dark);text-decoration:none;color:var(--vn-color-on-dark)}
.rad-welt__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform var(--vn-d-slower) var(--vn-ease-out)}
@media(hover:hover){.rad-welt__link:hover .rad-welt__bild{transform:scale(1.04)}}
/* Verlauf von unten traegt den Namen, ohne das Motiv abzudunkeln. */
.rad-welt__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) 90%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 34%,transparent) 44%,
    transparent 74%)}
/* Kategorien ohne Stimmungsbild zeigen den Freisteller — der steht auf Weiss und braucht deshalb eine
   helle Flaeche statt des dunklen Grundes, sonst saehe der Unterschied nach Fehler aus. */
.rad-welt__folie.is-frei .rad-welt__link{background:#fff}
.rad-welt__folie.is-frei .rad-welt__bild{object-fit:contain;padding:14% 10% 26%}
.rad-welt__folie.is-frei .rad-welt__link::after{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--vn-color-surface-darker) 82%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 24%,transparent) 34%,
    transparent 56%)}
.rad-welt__text{position:absolute;left:clamp(16px,1.6vw,22px);right:clamp(16px,1.6vw,22px);
  bottom:clamp(14px,1.4vw,20px)}
.rad-welt__name{font:var(--rad-w-display) clamp(1.0625rem,calc(24 * var(--rad-dpx)),1.5rem)/1.2 var(--vn-font-display);
  letter-spacing:var(--rad-ls-head)}
.rad-welt__link:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px}

.rad-welt__knopf{position:absolute;top:calc(50% - 16px);translate:0 -50%;z-index:2;
  display:grid;place-items:center;width:clamp(42px,3.6vw,52px);aspect-ratio:1;padding:0;border:0;
  border-radius:50%;cursor:pointer;color:var(--vn-color-on-dark);
  background:color-mix(in srgb,var(--vn-color-surface-darker) 66%,transparent);
  opacity:0;transition:opacity var(--vn-d-medium) var(--vn-ease-out),background var(--vn-d-medium) var(--vn-ease-out)}
.rad-welt__knopf--zurueck{left:calc(var(--welt-luft) - 16px)}
.rad-welt__knopf--vor{right:calc(var(--welt-luft) - 16px)}
.rad-welt__knopf--zurueck .rad-arrow{rotate:180deg}
@media(hover:hover){.rad-welt__knopf:hover{background:var(--vn-color-surface-darker)}}
.rad-welt__knopf[disabled]{opacity:0!important;pointer-events:none}
.rad-welt__knopf:focus-visible{opacity:1}
@media(hover:hover){.rad-welt:hover .rad-welt__knopf{opacity:1}}
.rad-welt__knopf:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px}
@media (hover:none){ .rad-welt__knopf{display:none} }
@media (max-width:700px){
  .rad-welt__folie{flex:0 0 min(72vw,300px)}
}