/* Effektgruppe: images/zoom; Reihenfolge in inc/assets.php. */

.zoom-in-img {
    position: relative;
    display: block; /* Wichtig für margin: auto Zentrierung */
    overflow: hidden;
    line-height: 0;
    will-change: transform;
    
    /* Start-Zustand: Wir lassen es erst mal auf auto */
    width: auto;
    max-width: 100%;
  }
  
  .zoom-in-img img {
    display: block;
	will-change: transform;
    width: 100%; /* Das Bild füllt den (vom JS verkleinerten) Container aus */
    height: auto;
    transition: transform 0.4s ease-in-out;
  }
  
  .zoom-in-img::before {
    content: '';
    position: absolute;
    /* inset: 0 bezieht sich nun auf den exakt angepassten Container */
    inset: 0;
    background-color: rgba(0, 0, 0, 0.10);
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  
    /* Erbe die Radien vom Container */
    border-top-left-radius: var(--r-tl);
    border-top-right-radius: var(--r-tr);
    border-bottom-right-radius: var(--r-br);
    border-bottom-left-radius: var(--r-bl);
  }
  
  .zoom-in-img.js-ready::before {
    opacity: 1;
  }
  
/* 1. Bild zoomen */
.zoom-in-img.js-ready:hover img,
.zoom-in-img.js-ready.is-active img {
  transform: scale(1.1);
}

/* 2. Schleier ausblenden (wird transparent) */
.zoom-in-img.js-ready:hover::before,
.zoom-in-img.js-ready.is-active::before {
  opacity: 0;
}

/* Container für das komplett runde Bild */
.zoom-in-round {
    position: relative;
    will-change: transform;
    overflow: hidden;
    /* Macht den Container kreisrund */
    border-radius: 50%; 
    border: none;
    /* Optional: Sicherstellen, dass quadratisches Seitenverhältnis bei Bildern erhalten bleibt */
    aspect-ratio: 1 / 1; 
  }
  
  /* Pseudo-Element für den Overlay (Integration in bestehende Logik) */
  .zoom-in-round::before {
    content: '';
    position: absolute;
    /* Übernimmt die runde Form */
    border-radius: 50%; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.10);
    transition: opacity 0.4s ease;
    z-index: 1;
    /* FIX: Klicks gehen durch das Overlay hindurch zum Link */
    pointer-events: none;
  }
  
  /* Bild-Styling für die neue Klasse hinzufügen */
  .zoom-in-round img {
    width: 100%;
    height: 100%;
	  will-change: transform;
    object-fit: cover; /* Verhindert Verzerrung bei nicht-quadratischen Bildern */
    transition: transform 0.4s ease;
    z-index: 0;
  }
  
  /* Zoom-Effekt beim Hover hinzufügen */
  .zoom-in-round:hover img,
  .zoom-in-round.is-active img {
    transform: scale(1.1);
  }
  
  /* Overlay entfernen bei Hover */
  .zoom-in-round:hover::before,
  .zoom-in-round.is-active::before {
    opacity: 0;
  }