@media all {

  .ce-type-news_pi1 {
    font-family: 'Roboto', sans-serif;

    /* News-Element Karten - auch für Swiper */
    & .ce-element-nested,
    & .swiper-slide {
      background-color: var(--color-white);
      border-radius: var(--radius-medium);
      box-shadow: var(--shadow-default);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-default-hover);
      }

      /* Bild */
      & .ce-media {
        padding: var(--size-2);
        
        & .ce-media-file {
          border-radius: var(--radius-medium);
          overflow: clip;
          
          & img {
            /* Keine Transition standardmäßig */
          }
        }
      }

      &:hover .ce-media img {
        transition: transform 3s ease;
        transform: scale(1.02);
      }

      /* Text */
      & .ce-inner {
        order: 1;
        padding: var(--element-gap-small);
        padding-inline-start: var(--size-4);
        
        & .ce-header h2,
        & .ce-header .h2 {
          color: var(--color-blue);
          font-family: 'Roboto', sans-serif;
          margin-bottom: var(--element-gap-small);
        }

        & .ce-bodytext {
          font-family: 'Roboto', sans-serif;
          color: var(--color-gray-70);
          padding-top: var(--element-gap-small);
          border-top: 2px solid var(--color-green);
        }

        /* CTA Button */
        & .ce-cta {
          margin-top: var(--element-gap-small);
          
          & .news-more-link {
            display: inline-flex;
            align-items: center;
            gap: var(--size-1);
            color: var(--color-blue);
            font-weight: 600;
            text-decoration: none;
            
            &:hover {
              color: var(--color-blue-hover);
            }
          }
        }
      }
    }

    & .ce-gallery img {
      margin-inline: auto;
      display: block;
    }

    & > .ce-header {
      grid-row: 1;
      grid-column: 3 / -3;      
    }

    & > .list-news {
      grid-column: 3 / -3;
      display: grid;
      grid-template-columns: subgrid;
      grid-row-gap: var(--page-gap);

      & .ce-element-nested {
        display: grid;
        grid-template-columns: subgrid;

        & .ce-inner {
          order: 1;
          grid-column: 1 / -1;
        }

        & .ce-media {
          order: 0;
          grid-column: 1 / -1;

          & .ce-media-file {
            border-radius: var(--radius-medium);
            overflow: clip;
          }

        }

      }

    }

    & > .swiper-news {
      --columns: 1;
      overflow: visible;
      grid-column: 3 / -3;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--element-gap);

      & > .swiper-wrapper {

        & > .swiper-slide {
          transition: var(--transition-fast);
          transition-property: transform, box-shadow;

          &.swiper-slide-prev {
            transform: translate(calc(var(--page-grid-gap) * -1));
          }

          &.swiper-slide-next {
            transform: translate(var(--page-grid-gap));
          }

        }

      }

      & > .swiper-controls {

        & > .swiper-pagination {
          all: unset;          
          display: flex;
          justify-content: start;
          /*! padding: var(--size-2); */
          gap: var(--size-2);

          & .swiper-pagination-bullet {
            position: relative;
            width: calc(1rem - var(--border-width));
            line-height: unset;
            height: auto;
            aspect-ratio: 1;
            display: block;
            margin: 0;
            background-color: transparent;
            border: var(--border-width) solid var(--current-text-color);
            opacity: 1;

            &::after {
              content: "";
              position: absolute;
              inset: calc((var(--size-2) + var(--border-width)) * -1) calc((var(--size-1) + var(--border-width)) * -1);
            }            

          }

          & .swiper-pagination-bullet-active {
            background-color: var(--current-text-color);
          }

        }

      }

    }

    & .news-list-link {
      grid-row: 3;
      grid-column: 3 / -3;

      & .news-show-all {
        text-decoration: none;
      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-news_pi1 {

    & > .list-news {

      & .ce-element-nested {
        align-items: center;

        & .ce-inner {
          padding-left: var(--element-padding);
          grid-column: 9 / -1;
        }

        & .ce-media {
          grid-column: 1 / -17;
        }

      }

    }

    & > .swiper-news {
      --columns: 3;
      overflow: visible;

      &[data-items-count="1"] ,
      &[data-items-count="2"] {
        --columns: 2;        
      }

      & > .swiper-wrapper {
        gap: var(--page-grid-gap);

        & > .swiper-slide {
          opacity: 1;
          width: calc((100% - ((var(--columns) - 1) * var(--page-grid-gap))) / var(--columns));
          transition: transform 0.5s ease;

          &.swiper-slide-prev {
            transform: unset;
          }

          &.swiper-slide-next {
            transform: unset;
          }

          &.swiper-slide-prev ,
          &.swiper-slide-next {

            &:hover ,
            &:focus ,
            &:has(a:focus-visible) {
              transform: scale(1.025);
            }

          }

        }

      }

      & > .swiper-controls {
        display: none;
      }

    }

    & .ce-card .ce-cta {
      display: flex;
      justify-content: end;
      align-items: end;
      flex-grow: 1;
    }

    & .news-list-link {
      grid-row: 1;
      grid-column: 19 / -3;
      display: grid;
      place-items: end;
      align-items: center;
      padding: 1rem;
    }

  }

  .column-content .ce-type-news_pi1 {

    & > .list-news {
      grid-column-start: 1;

      & .ce-element-nested {

        & .ce-inner {
          grid-column: 7 / -1;
        }

        & .ce-media {
          grid-column: 1 / -13;
        }

      }

    }

    & .news-list-link {
      grid-column: 13 / -3;
    }

  }

}