/* ===== Karussell (improved for iPhone taps & swipes) ===== */
.carousel{
  position:relative;
  width:100%;
  max-width:400px;
  box-sizing:border-box;
  margin:40px auto 0;
  margin-top:0px;
  padding:0;
  -webkit-user-select:none;
  user-select:none;
}

.carousel-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  background: rgba(255,255,255,.8);
  /* Allow normal vertical scroll, we'll handle horizontal swipes in JS */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.carousel-track{
  display:flex;
  transition: transform .45s ease;
  will-change: transform;
  list-style:none;
  padding:0;
  margin:0;
  /* Avoid UA gesture handling conflicts on iOS during horizontal swipes */
  touch-action: none;
}

.carousel-slide{
  min-width: 100%;
  user-select: none;
  box-sizing: border-box;
}

.carousel-slide img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  border-radius:5px;
  /* Prevent the image from stealing the touch; improves swipe reliability on iOS */
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
}

/* ===== Navigation-Buttons ===== */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  cursor:pointer;
  font-size:22px;
  line-height:44px;
  text-align:center;
  transition:.25s ease;
  z-index:5;
  -webkit-tap-highlight-color: transparent; /* remove grey tap flash */
  touch-action: manipulation; /* prevent double-tap zoom stealing the tap */
}

/* Enlarge the tappable area without changing visuals */
.carousel-btn::before{
  content:"";
  position:absolute;
  inset:-14px;               /* +28px in both width/height (Apple HIG min target 44pt) */
  border-radius:50%;
}

.carousel-btn:active{
  transform:translateY(-50%) scale(0.98);
}

.carousel-btn:hover{ transform:translateY(-50%) scale(1.06) }

/* Buttons centered exactly on left/right image edge */
.carousel-btn.prev{ left:-22px; }
.carousel-btn.next{ right:-22px; }

/* Make sure nothing overlays the buttons on small screens */
.carousel *{
  -webkit-touch-callout: none;
}