.slider {
  padding: 0 0 5px;

  .slides {
	  a{
		  overflow:hidden;
	  }
      img {

          height: 250px;
          width: auto;
		  /*PR 2025-11-16*/
		  aspect-ratio: 1;
		  /*width: 100%;
    	  height: 100%;*/
   		  object-fit: cover;
    	  transition: transform 0.4s ease;
		  display:block;
      }

      .slick-slide {
        display: flex;
        justify-content: center;
      }

      .slick-arrow.slick-next::before,
      .slick-arrow.slick-prev::before {
        color: var(--wp--preset--color--asta-darkgrey) !important;
        font-size: 1.5rem;
      }

      .slick-dots {
        bottom: -35px;
      }
	  .overlay{
		  position:absolute;
		/*width: 100%;*/
    	height: 100%;
		  aspect-ratio:1;
		top: 0;
    	/*left: 0;*/
   		/* Die Farbe und Transparenz des Overlays */
    	/*background-color: var(--wp--preset--color--asta-violet); /* Theme-Lila mit 70% Deckkraft */
		background-color: #7c63d8cc;
		  
    	/* Animation-Eigenschaft: Wichtig für den sanften Übergang */
    	transition: transform 0.4s ease-out;
    
    	/* Startposition: Das Overlay ist komplett nach oben außerhalb des Containers verschoben */
    	transform: translateY(-100%);
    
    	/* Zentrieren des Textes im Overlay */
    	display: flex;
    	justify-content: center;
    	align-items: center;
	  }
	  .overlay-text{
		opacity: 0;
    	transition: opacity 0.3s ease 0.2s; /* Startet 0.2s nach dem Overlay */
		  color:var(--wp--preset--color--asta-white);
		  margin:var(--wp--preset--spacing--30);
	  }	  
  }
	.slick-slide{
		position: relative;
    	overflow: hidden;
    	/*margin: 20px;*/
   		/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	}
	/* Zustand beim HOVER: Verschiebt das Overlay in seine Endposition (y-Achse = 0) */
	.slick-slide:hover .overlay {
    	transform: translateY(0); /* Bewegt das Overlay von -100% auf 0% (sichtbar) */
	}
	/* Zustand beim HOVER: Macht den Text sichtbar */
	.slick-slide:hover .overlay-text {
    	opacity: 1;
	}

	/* Optional: Leichter Zoom-Effekt auf das Bild beim Hover */
	.slick-slide:hover img {
    	transform: scale(1.05);
	}

   /* Fix selectable bug. */
  &.is-admin {

    .slides {
      display: flex;
    }

      &:before {
          display: block;
          content: "";
          top: 0;
          left: 0;
          right: 0;
          bottom: 40px;
          position: absolute;
          z-index: 1;
      }
  }
}