@keyframes reveal-on-scroll {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@scope (.portfolio-list) {
  :scope {
    background-color: var(--color-bg-blue);
  }

  .section-padding {
    padding-block: 7rem;
  }

  /* Aufeinanderfolgende portfolio-list-Instanzen (z.B. Leistungen-Liste) bilden
     optisch eine durchgehende Flaeche: Anfang/Mitte/Ende wird automatisch ueber
     die direkten .portfolio-list-Geschwister erkannt (nicht :first-of-type /
     :last-of-type — die matchen auf den Tag-Typ "section" und wuerden auch
     andere Sections wie location-map mitzaehlen). */

  /* erstes Element einer Gruppe (kein vorheriger, aber ein nachfolgender .portfolio-list-Bruder) */
  :scope:has(+ .portfolio-list):not(.portfolio-list + &) .section-padding {
    padding-block: 0 2.5rem;
  }

  /* mittleres Element (Vorgaenger UND Nachfolger sind .portfolio-list) */
  .portfolio-list + &:has(+ .portfolio-list) .section-padding {
    padding-block: 2.5rem;
  }

  /* letztes Element einer Gruppe (vorheriger, aber kein nachfolgender .portfolio-list-Bruder) */
  .portfolio-list + &:not(:has(+ .portfolio-list)) .section-padding {
    padding-block: 2.5rem 7rem;
  }

  .card {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 5rem;
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 3rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition:
      opacity 0.5s,
      transform 0.5s;
  }

  .card.is-visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Bildet die Webflow-Interaktion "Portfolio 23 Item [Scroll]" nach: eine an
     den Scroll-Fortschritt gebundene Animation (Keyframes 0/20/70/90/100), die
     symmetrisch fadet, egal ob die Karte am oberen oder unteren Rand den
     Viewport verlaesst. Wo unterstuetzt, ersetzt das den IntersectionObserver-
     Toggle (scroll-reveal.js) durch eine echte, kontinuierliche Bindung. */
  @supports (animation-timeline: view()) {
    .card,
    .card.is-visible {
      opacity: initial;
      transform: initial;
      transition: none;
      animation: reveal-on-scroll linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }

  .card.is-image-right {
    grid-template-areas: 'content image';
  }

  .card.is-image-left {
    grid-template-areas: 'image content';
  }

  .card.is-image-right .content {
    grid-area: content;
  }

  .card.is-image-right .image {
    grid-area: image;
  }

  .card.is-image-left .content {
    grid-area: content;
  }

  .card.is-image-left .image {
    grid-area: image;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .image-placeholder {
    aspect-ratio: 3 / 2;
    border-radius: 3px;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  h3 {
    color: var(--color-orange);
    margin-top: 0;
    margin-bottom: 0.6em;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.2;
  }

  .content p {
    margin-bottom: 1em;
    font-size: 0.81em;
    font-weight: 400;
  }

  .actions {
    display: flex;
    gap: 1.5rem;
  }

  @media (width <= 991px) {
    .section-padding {
      padding-block: 6rem;
    }

    :scope:has(+ .portfolio-list):not(.portfolio-list + &) .section-padding {
      padding-block: 0 1.5rem;
    }

    .portfolio-list + &:has(+ .portfolio-list) .section-padding {
      padding-block: 1.5rem;
    }

    .portfolio-list + &:not(:has(+ .portfolio-list)) .section-padding {
      padding-block: 1.5rem 6rem;
    }

    .card,
    .card.is-image-right,
    .card.is-image-left {
      grid-template-columns: 1fr;
      grid-template-areas: 'content' 'image';
      gap: 3rem;
      padding: 2rem;
    }

    .image-placeholder {
      aspect-ratio: 16 / 9;
    }
  }

  @media (width <= 767px) {
    .section-padding {
      padding-block: 4rem;
    }

    :scope:has(+ .portfolio-list):not(.portfolio-list + &) .section-padding {
      padding-block: 0 0.75rem;
    }

    .portfolio-list + &:has(+ .portfolio-list) .section-padding {
      padding-block: 0.75rem;
    }

    .portfolio-list + &:not(:has(+ .portfolio-list)) .section-padding {
      padding-block: 0.75rem 4rem;
    }

    h3 {
      font-size: 1.2em;
    }
  }

  @media (width <= 479px) {
    .card {
      gap: 1.5rem;
      padding: 1.5rem;
    }

    .image-placeholder {
      aspect-ratio: 1;
    }

    .actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }
  }
}