/* anchor wrapper */
.shutter-link {
  text-decoration: none;
  display: block;
  width: 100%;
  max-width: 800px; /* optional: limit size */
  margin: 40px auto;
}

/* main wrapper - responsive 2:1 ratio */
.wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* Quadratisch */
  background: #242424;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;    /* Rund */
  border: 8px solid #111; /* Optional: Kamera-Linsenrahmen */
}

/* inner rotated container */
.w {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

/* center text */
.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 3vw, 28px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
	white-space: nowrap;
}

/* shutter panels */
.shutter {
  position: absolute;
  width: 300%;
  height: 300%;
  transition: all 1.7s ease;
}



/* ---- START: CLOSED (Zustand-Bild) ---- */
.top {
  top: -250%;
  left: -100%;
  background: #d0d0d0;
}
.right {
  top: -100%;
  right: -250%;
  background: #aaaaaa;
}
.bottom {
  bottom: -250%;
  left: -100%;
  background: #d0d0d0;
}
.left {
  top: 50%;
  left: -250%;
  background: #bcbcbc;
}
.left-2 {
  top: 50%;
  left: -250%;
  height: 51%;
  background: #bcbcbc;
  z-index: -1;
}

/* ---- HOVER: OPEN (Ziel-Bild) ---- */
.shutter-link:hover .top {
  top: -400%;
}
.shutter-link:hover .right {
  right: -400%;
}
.shutter-link:hover .bottom {
  bottom: -400%;
}
.shutter-link:hover .left,
.shutter-link:hover .left-2 {
  left: -400%;
}
.shutter-link:hover .header {
  opacity: 1;
}