:root {
  --img-band: url('../img/band_bright.svg');
  --img-shoe: url('../img/shoe_bright.svg');
  --img-airpods: url('../img/airpods_bright.svg');
}

[data-theme="dark"] {
  --img-band: url('../img/band_dark.svg');
  --img-shoe: url('../img/shoe_dark.svg');
  --img-airpods: url('../img/airpods_dark.svg'); 
}


.slider-section { 
  min-height: 100vh; 
  width: 100%;
  display: flex; flex-direction: column; justify-content: center; 
  gap: 2rem; padding: 2rem 0; margin: 0; 
}

.slider-section h2 {
  margin: 0; width: 100%; box-sizing: border-box;
  padding-left: 2rem; padding-right: 2rem;
  /* Farbe erbt automatisch global */
}


.slider--radio { 
  position: relative; width: 100%; padding: 0; overflow: hidden; 
}


.slider--radio .slider__viewport {
  display: flex; gap: 1.5rem; width: 100%;
  padding-left: 2rem; padding-right: 2rem; 
  scroll-behavior: smooth; transition: transform 0.4s ease;
}


.slider--radio .slider-card {
  flex: 0 0 55%; 
  

  background: var(--card-bg-gradient);
  border: var(--card-border-style);
  
  border-radius: 16px; padding: 0;
 
  display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1rem;
  transition: background 0.3s ease, border 0.3s ease;
}

.slider-card__media {
  display: flex; align-items: center; justify-content: center; 
  padding: 1rem; 
  height: 45vh; 
  width: 100%;
}

.slider-card__media .adaptive-img {
  width: 100%; height: 100%;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transition: background-image 0.3s ease, transform 0.3s ease;
}

.slider-card__content {
  padding: 0 2rem 2rem 2rem; text-align: left; 
}

.slider-card__title {
  color: var(--text-main); 
  margin: 0; font-size: 1.25rem; font-weight: 700;
}

.slider-card__subline {
  color: var(--accent); 
  font-size: 0.9rem; font-weight: 600; text-transform: uppercase; margin: 0;
}

.slider-card__body {
  color: var(--text-muted); 
  font-size: 1rem; margin: 0;
}


.img-band { background-image: var(--img-band); }
.img-shoe { background-image: var(--img-shoe); }
.img-airpods { background-image: var(--img-airpods); }

.slider-card:nth-of-type(1) .adaptive-img { transform: rotate(5deg) scale(0.95); }
.slider-card:nth-of-type(2) .adaptive-img { transform: rotate(-15deg) scale(0.9); }
.slider-card:nth-of-type(3) .adaptive-img { transform: rotate(10deg) scale(0.9); }


.slider-nav {
  margin-top: 2rem; display: flex; justify-content: flex-end; padding-right: 2rem; 
}

.slider-nav .nav { display: none; gap: 1.5rem; }

.slider-nav .prev, 
.slider-nav .next {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 99px;
  
  background: var(--nav-btn-bg); 
  color: var(--nav-btn-icon);
  
  font-size: 1.5rem; font-weight: 700; line-height: 0;
  cursor: pointer; user-select: none; border: none;
  box-shadow: 0 2px 2px rgba(0,0,0,0.15);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s;
}

.slider-nav .prev:hover, 
.slider-nav .next:hover { 
  transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
}

.slider-nav .prev:focus-visible, 
.slider-nav .next:focus-visible { 
  outline: 1px solid #000; outline-offset: 1px; 
}


#r1:checked ~ .slider-nav .nav--1 { display: flex; }
#r2:checked ~ .slider-nav .nav--2 { display: flex; }
#r3:checked ~ .slider-nav .nav--3 { display: flex; }


@media (min-width: 1024px) {
  .slider--radio .slider-card { flex: 0 0 60%; }
  #r1:checked ~ .slider__viewport { transform: translateX(0); }
  #r2:checked ~ .slider__viewport { transform: translateX(calc(-60% + 0.9rem)); }
  #r3:checked ~ .slider__viewport { transform: translateX(calc(-120% + 1.8rem)); }
}


@media (max-width: 768px) {
  .slider--radio .slider-card { flex: 0 0 95%; }
  #r1:checked ~ .slider__viewport { transform: translateX(0); }
  #r2:checked ~ .slider__viewport { transform: translateX(calc(-95% + 2.3rem)); }
  #r3:checked ~ .slider__viewport { transform: translateX(calc(-190% + 4.6rem)); }
}