/* MSC – Referenz-Karussell im Stil eines Produkt-Regals (Vorbild: apple.com/de/store, „Gerade erst vorgestellt“):
   Zeile läuft bis an den rechten/linken Bildschirmrand, erste Karte bündig mit der Inhaltsspalte,
   runde graue Pfeile über der Zeile, Karten 18px Radius mit weichem Schatten und leichtem Anheben beim Überfahren.
   Ohne JS bleibt die Zeile wischbar/scrollbar; die Pfeile erscheinen erst mit .js. */
.msc-shelf{--inset:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));--card:min(400px, 82vw);--gap:20px;position:relative;margin-top:44px}
.msc-shelf__title{margin:0 0 6px;padding:0 var(--inset);font:400 clamp(1.3rem,2vw,1.6rem)/1.25 "Univia Pro","Lato",sans-serif;color:var(--ink)}
.msc-shelf__title span{color:var(--ci-grey,#707173)}
.msc-shelf__track{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--inset);
  scrollbar-width:none;padding:22px var(--inset) 44px;outline:none}
.msc-shelf__track::-webkit-scrollbar{display:none}
.msc-shelf__track.is-sliding{scroll-snap-type:none}   /* JS-Animation läuft: Einrasten erst danach */
.msc-shelf__track:focus-visible{box-shadow:inset 0 0 0 3px var(--ci-orange,#F29400)}
.msc-shelf__track > *{flex:0 0 var(--card);scroll-snap-align:start}

/* Karten wie im Regal: weiß, 18px Radius, kein Rahmen, weicher Schatten; Orange bleibt nur in der Kennzeile */
.v2 .msc-shelf .case{border:0;border-radius:18px;padding:32px 30px 34px;background:#fff;
  box-shadow:2px 4px 12px rgba(0,0,0,.08);transition:transform .3s cubic-bezier(0,0,.5,1),box-shadow .3s cubic-bezier(0,0,.5,1)}
.v2 .msc-shelf .case:hover{transform:scale(1.01);box-shadow:2px 4px 16px rgba(0,0,0,.16)}
.v2 .msc-shelf .case__meta{color:var(--orange-text,#9E5A00)}

/* Pfeile: 56px, hellgrau transparent, weißer Pfeil; mittig über der Zeile; am Anfang/Ende ausgeblendet */
.msc-shelf__btn{display:none;position:absolute;top:calc(50% + 4px);z-index:2;width:56px;height:56px;margin-top:-28px;padding:0;border:0;border-radius:50%;
  place-items:center;background:rgba(210,210,215,.64);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .1s linear,opacity .5s cubic-bezier(.15,0,.2,1)}
.js .msc-shelf__btn{display:grid}
.msc-shelf__btn:hover{background:rgba(190,190,196,.8)}
.msc-shelf__btn:focus-visible{outline:3px solid var(--ci-orange,#F29400);outline-offset:3px}
.msc-shelf__btn:disabled{opacity:0;pointer-events:none}
.msc-shelf__btn svg{width:36px;height:36px}
.msc-shelf__btn--prev{left:18px}
.msc-shelf__btn--next{right:18px}
/* Schmal: Pfeile unter die Zeile (rechtsbündig), damit sie keinen Text verdecken; am Anfang bleibt der Platz des Zurück-Pfeils leer */
@media (max-width:640px){.msc-shelf{--gap:14px}.msc-shelf__track{padding-bottom:28px}.msc-shelf__btn{top:auto;bottom:0;margin-top:0;width:44px;height:44px;background:rgba(160,160,166,.5)}.msc-shelf__btn svg{width:30px;height:30px}.msc-shelf__btn--prev{left:auto;right:calc(var(--gutter) + 56px)}.msc-shelf__btn--next{right:var(--gutter)}.js .msc-shelf{padding-bottom:56px}}
.msc-shelf__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}