/* Café Hilda — Hilda-Stories: Scroll-Deck (Desktop gepinnt, Mobil Swipe) + Story-Viewer */
.stories{--story-h:clamp(360px,54vh,540px);--story-w:calc(var(--story-h)*9/16);--story-gap:28px;--story-ease:cubic-bezier(.16,1,.3,1);--story-scrim:rgba(2,30,55,.5);position:relative;overflow:clip}
.stories .eyebrow-script{font-family:var(--sans);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;transform:none;margin-bottom:1rem;color:var(--blue)}
.stories .stories-head{margin-bottom:1.6rem}
.stories-head h2{text-wrap:balance}

/* Story-Balken: füllen sich mit dem Scroll, wie oben in einer Instagram-Story */
.stories-bars{display:flex;gap:6px;width:min(560px,86vw);margin:0 auto 1.6rem}
.stories-bars i{flex:1;height:3px;border-radius:3px;background:rgba(3,73,137,.16);overflow:hidden}
.stories-bars b{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--f,0))}

/* Grundzustand ohne JS / Mobil: natives Wischen mit Einrasten */
.stories-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:18px 26px}
.stories-viewport::-webkit-scrollbar{display:none}
.stories-track{display:flex;gap:var(--story-gap);list-style:none;margin:0;padding:0 calc(50% - var(--story-w)/2);width:max-content}
.story{flex:none;width:var(--story-w);scroll-snap-align:center}
.story-card{position:relative;display:block;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--paper);
  box-shadow:0 26px 50px -26px rgba(2,30,55,.45),0 4px 12px rgba(2,30,55,.08);
  transform:perspective(1200px) rotateY(var(--ry,0deg)) scale(var(--s,1));opacity:var(--o,1);
  transition:box-shadow .4s var(--story-ease);will-change:transform;outline:none}
.story-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--story-ease)}
.story-card::after{content:"";position:absolute;inset:0 0 auto;height:26%;background:linear-gradient(180deg,rgba(2,30,55,.42),rgba(2,30,55,0));pointer-events:none}
.story-card:hover img,.story-card.is-center img{transform:scale(1.04)}
.story-card:hover{box-shadow:0 34px 60px -24px rgba(2,30,55,.55),0 6px 16px rgba(2,30,55,.1)}
.story-card:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--blue)}
.story-card:active{scale:.98}

.story-top{position:absolute;z-index:2;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.74rem;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(2,30,55,.45)}
.story-card.is-light::after{display:none}
.story-card.is-light .story-top{color:var(--blue);text-shadow:none}
.story-top img{width:30px;height:30px;border-radius:50%;object-fit:contain;padding:4px;background:var(--paper);
  box-shadow:0 0 0 2px var(--blue),0 0 0 4px #fff}

/* Handschrift-Sticker: poppt, sobald die Story in der Mitte steht */
.story-sticker{position:absolute;z-index:2;left:50%;bottom:9%;max-width:86%;padding:.35em .8em .45em;border-radius:12px;
  background:var(--paper);color:var(--blue);font-family:var(--script);font-size:clamp(1.35rem,1rem + 1vw,1.75rem);line-height:1;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(2,30,55,.45);transform:translateX(-50%) rotate(var(--r,-3deg)) scale(var(--st,1));
  transition:transform .6s var(--story-ease)}

.stories-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.6rem;margin:1.2rem 0 0;font-family:var(--sans)}
.stories-follow{position:relative;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);text-decoration:none;padding-bottom:4px}
.stories-follow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .45s var(--story-ease)}
.stories-follow:hover::after,.stories-follow:focus-visible::after{transform:scaleX(1)}
.stories-follow:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.stories-hint{font-size:.78rem;color:var(--ink-soft)}

/* JS aktiv: Coverflow-Sticker ruhen, bis die Karte zentriert ist */
.stories.is-live .story-sticker{--st:.82}
.stories.is-live .story-card.is-center .story-sticker{--st:1.06}

/* Desktop: Sektion wird gepinnt, vertikales Scrollen schiebt die Stories */
.stories.is-pinned{padding:0}
.stories.is-pinned .stories-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(56px,7vh,84px);box-sizing:border-box;overflow:hidden}
.stories.is-pinned .stories-viewport{overflow:visible;scroll-snap-type:none}
.stories.is-pinned .stories-track{will-change:transform}

@media (max-width:899px){
  .stories{--story-w:min(64vw,280px);--story-h:calc(var(--story-w)*16/9);--story-gap:16px}
  .stories .stories-head{margin-bottom:1.2rem}
  .story-card{border-radius:18px}
}

/* ---------- Story-Viewer (Vollbild wie in der App) ---------- */
.story-viewer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.story-viewer[hidden]{display:none}
.sv-backdrop{position:absolute;inset:0;background:rgba(2,30,55,.88);animation:svFade .35s var(--story-ease) both}
.sv-frame{position:relative;height:min(92vh,92svh,900px);aspect-ratio:9/16;max-width:100vw;border-radius:20px;overflow:hidden;background:var(--blue-ink);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:svIn .5s var(--story-ease) both;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.sv-img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.sv-frame::before{content:"";position:absolute;inset:0 0 auto;height:22%;background:linear-gradient(180deg,rgba(2,30,55,.5),rgba(2,30,55,0));z-index:1;pointer-events:none}
.sv-bars{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:4px}
.sv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.38);overflow:hidden}
.sv-bars b{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.sv-bars i.done b{transform:scaleX(1)}
.sv-bars i.run b{animation:svFill var(--sv-dur,5s) linear forwards}
.sv-frame.is-paused .sv-bars i.run b{animation-play-state:paused}
.sv-top{position:absolute;z-index:3;top:26px;left:14px;right:10px;display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.82rem;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(2,30,55,.5)}
.sv-frame.is-light::before{display:none}
.sv-frame.is-light .sv-top,.sv-frame.is-light .sv-close{color:var(--blue);text-shadow:none}
.sv-frame.is-light .sv-close:hover{background:rgba(3,73,137,.1)}
.sv-frame.is-light .sv-bars i{background:rgba(3,73,137,.18)}
.sv-frame.is-light .sv-bars b{background:var(--blue)}
.sv-frame.is-light .sv-close:focus-visible,.sv-frame.is-light .sv-nav:focus-visible{outline-color:var(--blue)}
.sv-top img{width:34px;height:34px;border-radius:50%;object-fit:contain;padding:4px;background:var(--paper);box-shadow:0 0 0 2px var(--blue),0 0 0 4px #fff}
.sv-close{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:background .25s var(--story-ease)}
.sv-close:hover{background:rgba(255,255,255,.16)}
.sv-close:focus-visible,.sv-nav:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.sv-sticker{position:absolute;z-index:3;left:50%;bottom:8%;padding:.35em .85em .45em;border-radius:14px;background:var(--paper);color:var(--blue);
  font-family:var(--script);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1;white-space:nowrap;box-shadow:0 12px 28px -10px rgba(2,30,55,.5);
  transform:translateX(-50%) rotate(var(--r,-3deg));animation:svSticker .6s .15s var(--story-ease) both}
.sv-nav{position:absolute;z-index:2;top:0;bottom:0;border:0;background:transparent;cursor:pointer;padding:0}
.sv-prev{left:0;width:34%}.sv-next{right:0;width:66%}
.sv-nav span{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:rgba(255,253,246,.9);color:var(--blue);font-size:1.4rem;line-height:42px;text-align:center;opacity:0;transition:opacity .25s var(--story-ease)}
.sv-prev span{left:12px}.sv-next span{right:12px}
.sv-frame:hover .sv-nav span{opacity:1}
@keyframes svFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes svFade{from{opacity:0}}
@keyframes svIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes svSticker{from{opacity:0;transform:translateX(-50%) rotate(var(--r,-3deg)) scale(.6)}}
html.sv-open{overflow:hidden}
@media (max-width:560px){.sv-frame{height:100%;width:100%;aspect-ratio:auto;border-radius:0}.sv-nav span{display:none}}

@media (prefers-reduced-motion:reduce){
  .story-card,.story-card img,.story-sticker,.sv-backdrop,.sv-frame,.sv-sticker{transition:none;animation:none}
  .story-card:hover img,.story-card.is-center img{transform:none}
}