/* "Im Arbeitsalltag ein Gewinn." — heading, intro and spacing come from the
   shared .perspectives-* rules; this file only adds the quote mark and carousel. */
.home-page .stories-section {
  --stories-gutter: calc((100vw - var(--landing-shell)) / 2);
  --stories-gap: clamp(36px, 5vw, 72px);
  --stories-card: calc((var(--landing-shell) - (2 * var(--stories-gap))) / 3);
  --stories-last: calc(var(--stories-card) * 1.9);
}

.home-page .stories-inner {
  row-gap: 0 !important;
}

.home-page .stories-quote-mark {
  grid-column: 1 / -1;
  display: block;
  width: clamp(76px, 7.2vw, 118px);
  height: auto;
  margin: clamp(14px, 1.6vw, 26px) 0 clamp(14px, 1.6vw, 26px) clamp(8px, 1.2vw, 20px);
  fill: var(--landing-green);
}

.home-page .stories-carousel {
  position: relative;
  grid-column: 1 / -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-bottom: 54px;
}

.home-page .stories-track {
  display: flex;
  gap: var(--stories-gap);
  padding: 0 max(0px, calc(100vw - var(--stories-gutter) - var(--stories-last))) 0 var(--stories-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--stories-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.home-page .stories-track::-webkit-scrollbar {
  display: none;
}

.home-page .stories-carousel.has-next .stories-track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%);
}

.home-page .stories-carousel.has-prev .stories-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
}

.home-page .stories-carousel.has-prev.has-next .stories-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 82%, transparent 100%);
}

.home-page .story-card {
  display: flex;
  flex: 0 0 var(--stories-card);
  flex-direction: column;
  margin: 0;
  scroll-snap-align: start;
  color: var(--landing-ink);
}

.home-page .story-card-wide {
  flex-basis: var(--stories-last);
}

.home-page .story-kicker {
  margin: 0 0 14px;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: clamp(0.72rem, 0.8vw, 0.82rem) !important;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.home-page .story-card blockquote {
  margin: 0 0 clamp(18px, 2vw, 30px);
  padding: 0;
}

.home-page .story-card blockquote p {
  margin: 0;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: clamp(0.86rem, 1vw, 1rem) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.5 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.home-page .story-card figcaption {
  margin-top: auto;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.home-page .stories-arrow {
  position: absolute;
  top: 42%;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  color: var(--landing-ink);
  cursor: pointer;
  transition: opacity 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}

.home-page .stories-arrow svg {
  width: 22px;
  height: 22px;
}

.home-page .stories-arrow-prev {
  left: max(12px, calc(var(--stories-gutter) / 2 - 28px));
}

.home-page .stories-arrow-next {
  right: max(12px, calc(var(--stories-gutter) / 2 - 28px));
}

.home-page .stories-arrow:hover:not(:disabled) {
  box-shadow: 0 8px 26px rgba(0, 235, 28, 0.28);
}

.home-page .stories-arrow:disabled {
  cursor: default;
  opacity: 0.35;
}

.home-page .stories-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.home-page .stories-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfcfcf;
  cursor: pointer;
  transition: background-color 240ms ease;
}

.home-page .stories-dots button.is-active {
  background: var(--landing-green);
}

@media (min-width: 761px) {
  .home-page .stories-track {
    display: grid;
    grid-auto-columns: var(--stories-card);
    grid-auto-flow: column;
    grid-template-columns: repeat(3, var(--stories-card)) var(--stories-last);
    grid-template-rows: auto auto auto;
    column-gap: var(--stories-gap);
    row-gap: 0;
  }

  .home-page .story-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .home-page .story-card figcaption {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .home-page .stories-section {
    --stories-gap: 28px;
    --stories-card: min(78vw, 340px);
    --stories-last: var(--stories-card);
  }

  .home-page .stories-quote-mark {
    margin-left: 0;
    width: 64px;
  }

  .home-page .stories-carousel {
    padding-bottom: 48px;
  }

  .home-page .stories-arrow {
    display: none;
  }

  .home-page .story-card {
    align-self: flex-start;
  }

  .home-page .story-card figcaption {
    margin-top: 0;
  }

  .home-page .stories-carousel.has-next .stories-track,
  .home-page .stories-carousel.has-prev .stories-track,
  .home-page .stories-carousel.has-prev.has-next .stories-track {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .stories-arrow,
  .home-page .stories-dots button {
    transition: none;
  }
}