/* ---------------------------------------------------
   CHERRY SLIDER – Grundstruktur
--------------------------------------------------- */

.cherry-slider {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 4rem auto;
}

.cherry-slider-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cherry-slider-viewport {
    aspect-ratio: 1 / 1.5;
  }
}

/* ---------------------------------------------------
   Slides + Track
--------------------------------------------------- */

.cherry-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.cherry-slider-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(5%,0,0);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
}

.cherry-slider-slide.is-active {
  opacity: 1;
  transform: translate3d(0,0,0);
  pointer-events: auto;
}

.cherry-slider-slide.is-prev {
  opacity: 0;
  transform: translate3d(-5%,0,0);
}

.cherry-slider-slide.is-next {
  opacity: 0;
  transform: translate3d(5%,0,0);
}

.cherry-slider-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* Unterschiedliche helle Grautöne */
.cherry-slider-media { inset:0; position:absolute; }

.cherry-slider-slide:nth-child(1) .cherry-slider-media { background:#f8f8f8; }
.cherry-slider-slide:nth-child(2) .cherry-slider-media { background:#f1f1f1; }
.cherry-slider-slide:nth-child(3) .cherry-slider-media { background:#eaeaea; }
.cherry-slider-slide:nth-child(4) .cherry-slider-media { background:#e3e3e3; }
.cherry-slider-slide:nth-child(5) .cherry-slider-media { background:#ededed; }
.cherry-slider-slide:nth-child(6) .cherry-slider-media { background:#f4f4f4; }
.cherry-slider-slide:nth-child(n+7) .cherry-slider-media { background:#f6f6f6; }

/* ---------------------------------------------------
   SLIDER CONTROL BAR
--------------------------------------------------- */

.slider-control-bar {
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:66.666%;
  min-height:40%;
  background:white;
  border-radius:0 0 0 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1rem 1.8rem 0;
  z-index:10;
}

.slider-control-text { text-align:center; }

.slider-control-title {
  margin:0;
  font-size:1rem;
}

/* ---------------------------------------------------
   BUTTON REIHE
--------------------------------------------------- */

.slider-control-row {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:1.4rem;
  margin-top:.6rem;
}

/* ---------------------------------------------------
   BUTTONS – BASISGRÖSSE
--------------------------------------------------- */

.slider-control-button {
  position:relative;
  width:3.8rem;     /* Basisgröße */
  height:3.8rem;
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
  display:grid;
  place-items:center;
  opacity:.75;
  transform:translateY(0) scale(1);
  transition:opacity .25s ease, transform .25s ease;
}

.slider-control-button:hover { opacity:.9; }

/* ---------------------------------------------------
   ICON GRÖSSEN
   -> EXPLIZITE TRENNUNG INAKTIV / AKTIV
--------------------------------------------------- */

/* große inaktive Icons (mit etwas Luft nach außen) */
.slider-control-icon {
  width:72%;   /* vorher 78% */
  height:72%;
  display:grid;
  place-items:center;
}

.slider-control-icon svg {
  width:100%;
  height:100%;
  overflow:visible; /* verhindert visuell abgeschnittene Kurven */
}

/* aktive Icons bewusst kleiner im Verhältnis */
.slider-control-button.is-active .slider-control-icon {
  width:36%;   /* vorher 40% */
  height:36%;
}

.slider-control-button:not(.is-active) .slider-control-icon svg *:not([fill]) {
  fill:#9a9a9a;
}

.slider-control-button.is-active .slider-control-icon svg *:not([fill]) {
  fill:#e10b17;
}

/* ---------------------------------------------------
   CHERRY-FRAME (30% kleiner)
--------------------------------------------------- */

.slider-control-frame {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.slider-control-frame-svg {
  width:70%;     /* 30% kleiner */
  height:70%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.slider-control-frame-path {
  fill:none;
  stroke:transparent;
  stroke-width:.08rem;
  opacity:0;
  transition: stroke .25s ease, opacity .25s ease, stroke-width .25s ease;
}

/* ---------------------------------------------------
   AKTIVER BUTTON – deutlich größer
--------------------------------------------------- */

.slider-control-button.is-active {
  opacity:1;
  transform:translateY(-12px) scale(2.0);  /* Riesen-Zoom */
}

.slider-control-button.is-active .slider-control-frame-path {
  opacity:1;
  stroke:#cccccc;
  stroke-width:.2rem;
}

/* Fokus */
.slider-control-button:focus-visible {
  outline:2px solid #e10b17;
  outline-offset:3px;
}

/* ---------------------------------------------------
   RESPONSIVE GRÖSSEN – DEUTLICH GRÖSSER AM SMARTPHONE
--------------------------------------------------- */

/* ---------- Smartphone (≤768px) ---------- */
@media (max-width:768px) {

  .slider-control-bar {
    width:82%;
    min-height:46%;
    padding:1.1rem 1.4rem 1.3rem;
  }

  .slider-control-title {
    font-size:1.2rem;
    line-height: 1.8rem;
    padding-bottom: 1rem;
   }

  .slider-control-row { gap:1.5rem; }

  .slider-control-button {
    width:4.8rem;
    height:4.8rem;
    max-width: 40px;
  }

  /* inaktive Icons groß – mit etwas Abstand zum Rand */
  .slider-control-icon {
    width:76%;   /* vorher 82% */
    height:76%;
  }

  /* aktives Icon deutlich kleiner */
  .slider-control-button.is-active .slider-control-icon {
    width:38%;   /* vorher 42% */
    height:38%;
  }

  .slider-control-button.is-active {
    transform:translateY(-16px) scale(3);
  }

  .slider-control-frame-svg {
    width:68%;
    height:68%;
  }
}

/* ---------- Tablet (769px–1199px) ---------- */
@media (min-width:769px) and (max-width:1199px) {

  .slider-control-title {
    font-size:1.3rem;
    line-height: 1.9rem;
    padding-bottom: 0.5rem;
  }

  .slider-control-row { gap:1.8rem; }

  .slider-control-button {
    width:7rem;
    height:7rem;
    max-width: 70px;
  }

  .slider-control-icon {
    width:50%;   /* vorher 50% */
    height:50%;
  }

  .slider-control-button.is-active .slider-control-icon {
    width:45%;   /* vorher 45% */
    height:45%;
  }

  .slider-control-button.is-active {
    transform:translateY(-16px) scale(1.7);
  }

  .slider-control-frame-svg {
    width:70%;
    height:70%;
  }
}

/* ---------- Desktop (1200px–1799px) ---------- */
@media (min-width:1200px) and (max-width:1799px) {

  .slider-control-bar {
      min-height: 30%;
  }  

  .slider-control-title {
    font-size:1.5rem;
    line-height: 2rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .slider-control-row { gap:2.2rem; }

  .slider-control-button {
    width:6.2rem;
    height:6.2rem;
  }

  .slider-control-icon {
    width:46%;   /* vorher 50% */
    height:46%;
  }

  .slider-control-button.is-active .slider-control-icon {
    width:40%;   /* vorher 45% */
    height:40%;
  }

  .slider-control-button.is-active {
    transform:translateY(-20px) scale(1.3);
  }

  .slider-control-frame-svg {
    width:70%;
    height:70%;
  }
}

/* ---------- Ultra-Wide (≥1800px) ---------- */
@media (min-width:1800px) {

  .slider-control-bar {
      min-height: 35%;
  }  

  .slider-control-title {
    font-size:1.8rem;
    line-height: 2.2rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .slider-control-row { gap:2.6rem; }

  .slider-control-button {
    width:7.2rem;
    height:7.2rem;
  }

  .slider-control-icon {
    width:46%;   /* vorher 50% */
    height:46%;
  }

  .slider-control-button.is-active .slider-control-icon {
    width:40%;   /* vorher 45% */
    height:40%;
  }

  .slider-control-button.is-active {
    transform:translateY(-22px) scale(1.5);
  }

  .slider-control-frame-svg {
    width:70%;
    height:70%;
  }
}