/* carousel.css — final, max-width 1200px, absolute layout (keine weißen Lücken) */

/* Basis / Reset */
* { box-sizing: border-box; }
.carousel { box-sizing: border-box; }

/* -------------------------------------------------------
   Grundlayout (4:3, responsive)
------------------------------------------------------- */
.carousel {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  background: #000; /* fallback während Bilder laden */
  border-radius: 0.75rem;
}

/* -------------------------------------------------------
   Radio Buttons (unsichtbar)
------------------------------------------------------- */
.carousel__activator {
  display: none;
}

/* -------------------------------------------------------
   Controls (Pfeile)
------------------------------------------------------- */
.carousel__controls {
  display: none;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 30;
  pointer-events: none; /* Labels übernehmen pointer-events */
}

.carousel__control {
  height: 36px;
  width: 36px;
  margin-top: -18px;
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: rgba(255,255,255,0.95);
  opacity: 0.45;
  background: transparent;
  transition: opacity .15s ease, transform .15s ease;
}

/* Basis: Rotation + neutraler Scale */
.carousel__control--backward {
  left: 12px;
  transform: rotate(-135deg) scale(1);
  transition: transform .15s ease, opacity .15s ease;
}

.carousel__control--forward {
  right: 12px;
  transform: rotate(45deg) scale(1);
  transition: transform .15s ease, opacity .15s ease;
}

/* Hover: gleiche Rotation + zusätzliche Skalierung */
.carousel__control--backward:hover {
  transform: rotate(-135deg) scale(1.08);
  opacity: 1;
}

.carousel__control--forward:hover {
  transform: rotate(45deg) scale(1.08);
  opacity: 1;
}

/* -------------------------------------------------------
   Controls sichtbar machen (Pure CSS)
   ? bei Bedarf erweitern die nth-of-type-Regeln
------------------------------------------------------- */
.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1),
.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2),
.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3),
.carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4),
.carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5),
.carousel__activator:nth-of-type(6):checked ~ .carousel__controls:nth-of-type(6),
.carousel__activator:nth-of-type(7):checked ~ .carousel__controls:nth-of-type(7),
.carousel__activator:nth-of-type(8):checked ~ .carousel__controls:nth-of-type(8),
.carousel__activator:nth-of-type(9):checked ~ .carousel__controls:nth-of-type(9),
.carousel__activator:nth-of-type(10):checked ~ .carousel__controls:nth-of-type(10) {
  display: block;
}

/* -------------------------------------------------------
   Track & Slides (ABSOLUTE layout — verhindert Lücken)
------------------------------------------------------- */
.carousel__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: transform 0.55s cubic-bezier(.22,.9,.35,1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* -------------------------------------------------------
   Slide Positionen (nebeneinander via translateX)
   ? erweitern, falls mehr Slides benötigt werden
------------------------------------------------------- */
.carousel__slide:nth-of-type(1)  { transform: translateX(0%); }
.carousel__slide:nth-of-type(2)  { transform: translateX(100%); }
.carousel__slide:nth-of-type(3)  { transform: translateX(200%); }
.carousel__slide:nth-of-type(4)  { transform: translateX(300%); }
.carousel__slide:nth-of-type(5)  { transform: translateX(400%); }
.carousel__slide:nth-of-type(6)  { transform: translateX(500%); }
.carousel__slide:nth-of-type(7)  { transform: translateX(600%); }
.carousel__slide:nth-of-type(8)  { transform: translateX(700%); }
.carousel__slide:nth-of-type(9)  { transform: translateX(800%); }
.carousel__slide:nth-of-type(10) { transform: translateX(900%); }

/* -------------------------------------------------------
   Track Bewegung (Pure CSS)
   ? verschiebt den gesamten Track, keine Flexbox
   ? erweitern, falls mehr Slides benötigt werden
------------------------------------------------------- */
.carousel__activator:nth-of-type(1):checked ~ .carousel__track { transform: translateX(0%); }
.carousel__activator:nth-of-type(2):checked ~ .carousel__track { transform: translateX(-100%); }
.carousel__activator:nth-of-type(3):checked ~ .carousel__track { transform: translateX(-200%); }
.carousel__activator:nth-of-type(4):checked ~ .carousel__track { transform: translateX(-300%); }
.carousel__activator:nth-of-type(5):checked ~ .carousel__track { transform: translateX(-400%); }
.carousel__activator:nth-of-type(6):checked ~ .carousel__track { transform: translateX(-500%); }
.carousel__activator:nth-of-type(7):checked ~ .carousel__track { transform: translateX(-600%); }
.carousel__activator:nth-of-type(8):checked ~ .carousel__track { transform: translateX(-700%); }
.carousel__activator:nth-of-type(9):checked ~ .carousel__track { transform: translateX(-800%); }
.carousel__activator:nth-of-type(10):checked ~ .carousel__track { transform: translateX(-900%); }

/* -------------------------------------------------------
   Indicators (Thumbnails)
------------------------------------------------------- */
.carousel__indicators {
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  z-index: 40;
  pointer-events: auto;
}

/* Indicator Container (Kreis) */
.carousel__indicator {
  display: inline-block;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 6px;
  border-radius: 50%;
  overflow: hidden;            /* zwingend, damit Bild im Kreis bleibt */
  background: rgba(0,0,0,0.2);            /* Fallback während Laden */
  vertical-align: middle;
  cursor: pointer;

/* WICHTIG: Border in die Box einrechnen, damit Größe gleich bleibt */
  box-sizing: border-box;
  border: 3px solid rgba(36, 36, 68, 0.5); /* <-- 3px Rand */
}

/* Bild im Indicator */
.carousel__indicator-img {
  display: block;              /* entfernt inline whitespace */
  width: 100%;
  height: 100%;
  object-fit: cover;           /* füllt Kreis, skaliert korrekt */
  object-position: center;     /* anpassen: center, top, 50% 40% etc. */
  max-width: none;             /* verhindert unerwünschte max-width Regeln */
  border: 0;
  opacity: 0.5;
}

.carousel__indicator:hover { opacity: 0.85; transform: scale(1.03); }

/* aktive Indikatoren hervorheben (allgemein) */
/* Aktiven Indikator pro Index hervorheben */
.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(6):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(6) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(7):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(7) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(8):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(8) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(9):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(9) { opacity: 0.8; transform: scale(1.08); }
.carousel__activator:nth-of-type(10):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(10) { opacity: 0.8; transform: scale(1.08); }

/* -------------------------------------------------------
   Accessibility / small screens tweaks
------------------------------------------------------- */
@media (max-width: 480px) {
  .carousel__control { height: 28px; width: 28px; border-width: 4px 4px 0 0; margin-top: -14px; }
  .carousel__indicator { height: 26px; width: 26px; margin: 0 4px; }
}

/* -------------------------------------------------------
   Debug helpers (deaktivieren in Produktion)
   Uncomment zum Debuggen:
------------------------------------------------------- */
/*
.carousel__slide { outline: 1px dashed rgba(255,255,255,0.06); }
.carousel__track { outline: 1px solid rgba(255,0,0,0.04); }
*/