/* Guest stories, built to the client's reference (baremoments "Das sagen unsere Kunden"): centred title,
   quote column on the left, a fanned 3D stack of photo cards on the right, square outline arrows.
   On phones the stack moves above the text. Without JavaScript every story stays readable. */
.stories{--stories-bg:#f7f6f4;--stories-ink:#100f0f;--stories-sub:#34302c;--stories-line:#6a625a;background:var(--stories-bg);color:var(--stories-ink)}
.stories.section-pad{padding:128px 40px 120px}
.stories-inner{max-width:1120px;margin:0 auto}
.stories-title{text-align:center;font-weight:400;font-size:42px;line-height:1.08;color:var(--stories-ink);max-width:none;margin:0 0 40px}
.stories-stage{display:flex;align-items:center;gap:32px}

/* Quote column */
.stories-copy{flex:0 1 560px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.stories-quotes{list-style:none;margin:0;padding:0;display:grid}
.story{grid-area:1/1;padding-top:15px}
.story-name{font-weight:400;font-size:54px;line-height:1.1;color:var(--stories-ink)}
.story-role{margin-top:8px;font-size:14.4px;line-height:1.4;color:var(--stories-sub)}
.story blockquote{margin:24px 0 0;max-width:520px;font-size:15px;line-height:1.4;color:var(--stories-ink)}
.story blockquote p{max-width:none}
.stories-ready .story{visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s .3s}
.stories-ready .story.is-active{visibility:visible;opacity:1;transition:opacity .3s ease,visibility 0s}

.stories-nav{display:none;gap:15px;margin-top:32px}
.stories-ready .stories-nav{display:flex}
.stories-nav button{width:45px;height:45px;padding:8px;display:grid;place-items:center;border:1px solid var(--stories-line);border-radius:2px;background:transparent;color:var(--stories-line);transition:background .25s,color .25s}
.stories-nav button:hover{background:var(--stories-line);color:#fff}
.stories-nav svg{width:28px;height:18px}

/* Photo stack */
.stories-photos{flex:0 0 448px;margin-left:auto}
.stories-deck{position:relative;list-style:none;margin:0;padding:0;width:100%;aspect-ratio:4/5;perspective:1200px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stories-deck:focus-visible{outline:2px solid var(--petrol);outline-offset:20px}
.story-card{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:var(--radius-image,22px);background:#e4e0da;transform-origin:50% 50%;backface-visibility:hidden;transition:transform .3s ease,opacity .3s ease;will-change:transform}
.story-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.story-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15);opacity:0;transition:opacity .3s ease;pointer-events:none}
.stories-ready .story-card:not([data-slot="0"])::after{opacity:1}
.stories-ready .story-card{cursor:grab}
.stories-ready .stories-deck.is-dragging .story-card{cursor:grabbing}
.stories-ready .stories-deck.is-dragging .story-card[data-slot="0"]{transition:none}

/* Without JavaScript: photos in a row and every story listed. */
.stories:not(.stories-ready) .stories-stage{flex-direction:column;align-items:stretch}
.stories:not(.stories-ready) .stories-photos{flex:none;margin:0}
.stories:not(.stories-ready) .stories-deck{display:flex;gap:16px;aspect-ratio:auto;overflow-x:auto}
.stories:not(.stories-ready) .story-card{position:relative;flex:0 0 200px;height:250px}
.stories:not(.stories-ready) .stories-quotes{gap:48px}
.stories:not(.stories-ready) .story{grid-area:auto}

@media(max-width:991px){
  .stories-photos{flex-basis:380px}
  .story-name{font-size:46px}
}
@media(max-width:767px){
  .stories.section-pad{padding:96px 20px 80px}
  .stories-title{font-size:34px}
  .stories-stage{flex-direction:column-reverse;align-items:stretch;gap:32px}
  .stories-photos{flex:none;margin:0;padding:0 70px}
  .stories-deck{max-width:210px;margin:0 auto}
  .stories-copy{flex:none}
  .story-card{border-radius:14px}
  .story-name{font-size:35px}
  .story blockquote{max-width:none;font-size:14.4px}
}
@media(prefers-reduced-motion:reduce){
  .story-card,.story-card::after,.stories-ready .story{transition:none}
}
.stories-prev svg{transform:scaleX(-1)}
.story blockquote p+p{margin-top:.75em}
.story-card-portrait img{object-position:50% 40%}
.story-card-sevinc img{object-position:50% 45%}
/* Reviews differ a lot in length: only the active one takes up space, so the arrows always sit right under its text,
   and the text column starts level with the photo instead of re-centring on every change. */
.stories-ready .stories-stage{align-items:flex-start}
.stories-ready .stories-quotes{display:block;position:relative}
.stories-ready .story{position:absolute;top:0;left:0;right:0}
.stories-ready .story.is-active{position:relative}
.story-card-schaukel img{object-position:58% 50%}
.story-card-schaukel img{object-position:58% 50%}
.story-card-ardiana img{object-position:55% 50%}