/* =========================================================
   carousel.css – Startseiten-Karussell
   ========================================================= */

.carousel {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  min-height: 60vh;
}

.carousel__track {
  touch-action: pan-y;
}

.carousel__slide {
  /* Slides liegen als Stapel uebereinander (statt nebeneinander verschoben)
     und blenden per Opacity + ein kurzer, leichter Weichzeichner ineinander
     ueber - fliessender Wechsel statt hartem Schnitt/Schieben. Kinder sind
     einzeln frei positioniert (.carousel__element, siehe unten) statt hier
     gemeinsam zentriert zu werden. */
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  margin: 0;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.9s ease, filter 0.9s ease;
  pointer-events: none;
}

.carousel__slide.is-active {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  z-index: 1;
}

.carousel__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  /* --overlay-opacity wird inline pro Slide gesetzt (Admin-Regler, siehe
     src/Views/home/index.php), Default hier nur als Fallback falls die
     Variable aus irgendeinem Grund fehlt. */
  background: rgba(255, 255, 255, var(--overlay-opacity, 0.55));
}

/* Gemeinsame Basis fuer alle frei positionierbaren Elemente einer Slide
   (Text-Block, Bilder, Buttons) - Position kommt inline als left/top in %
   (siehe src/Views/home/index.php, im Admin per Drag gesetzt). */
.carousel__element {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
}

/* Titel und Untertitel sind unabhaengig positionierte .carousel__element mit
   fester Breite/Hoehe (Admin-Einstellung, steuert den Zeilenumbruch) - die
   Schriftgroesse ist der vom Admin direkt gesetzte rem-Wert (--manual-size,
   siehe src/Views/home/index.php), GEDECKELT per Container Query (cqw, an
   der Boxbreite) auf die tatsaechliche Boxgroesse: auf normal breiten
   Screens/Boxen greift der Deckel nie (der gewaehlte Wert wird 1:1
   verwendet, vorhersehbar auf jedem Bildschirm), auf sehr schmalen Handys,
   wo eine schmale Box viel mehr Zeilen erzwingt als die Boxhoehe hergibt,
   schrumpft die Schrift automatisch nur so viel wie noetig, um Ueberlaufen/
   Ueberlappung mit Nachbarelementen zu vermeiden. Breite (cqw) statt Hoehe
   (cqh/cqmin) als Bezugsgroesse, weil ein schmaler Bildschirm primaer die
   Zeilenumbrueche vervielfacht, nicht die Boxhoehe selbst verkleinert (die
   haengt an vh, und Handys sind oft nicht kuerzer als ein Desktop-Fenster). */
.carousel__title,
.carousel__subtitle {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  text-align: center;
  margin: 0;
  overflow: hidden;
}

.carousel__text {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.carousel__text--title {
  font-size: min(var(--manual-size, 2.5rem), 15cqw);
  text-transform: uppercase;
  line-height: 1.15;
}

.carousel__text--subtitle {
  font-size: min(var(--manual-size, 1.1rem), 15cqw);
  line-height: 1.4;
}

.carousel__element--image img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Eingangs-Animation der positionierten Elemente (Text/Bilder/Buttons),
   unabhaengig vom Crossfade des Hintergrundbilds (siehe
   .carousel__slide.is-active oben). Startzustand nur setzen, wenn
   ueberhaupt eine Animation gewaehlt ist - bei data-animation="none"
   bleiben die Elemente einfach durchgehend sichtbar. .is-animating wird
   von carousel.js bei jedem Slide-Wechsel pro Element neu angestossen,
   damit die Animation auch beim wiederholten Anzeigen derselben Slide
   erneut abspielt. */
.carousel__slide[data-animation="fade"] .carousel__element,
.carousel__slide[data-animation="fade-up"] .carousel__element,
.carousel__slide[data-animation="blur"] .carousel__element {
  opacity: 0;
}

.carousel__slide[data-animation="fade"] .carousel__element.is-animating {
  animation: carouselFade 0.9s ease forwards;
}

.carousel__slide[data-animation="fade-up"] .carousel__element.is-animating {
  animation: carouselFadeUp 0.9s ease forwards;
}

.carousel__slide[data-animation="blur"] .carousel__element.is-animating {
  animation: carouselBlurIn 1.1s ease forwards;
}

@keyframes carouselFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes carouselFadeUp {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes carouselBlurIn {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__element {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--color-text-strong);
  font-size: 1.2rem;
}

.carousel__nav:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel__nav--prev { left: var(--space-md); }
.carousel__nav--next { right: var(--space-md); }

.carousel__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-gray);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.carousel__dot.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 768px) {
  .carousel { min-height: 70vh; }
  .carousel__nav { width: 36px; height: 36px; }

  /* Titel/Untertitel wieder (fast) bildschirmbreit und zentriert, unabhaengig
     von der am Desktop gewaehlten Breite/Position - eine schmale, vom
     Desktop-Layout uebernommene Box liess lange Woerter auf dem Handy nicht
     mehr auf eine Zeile passen und erzwang haessliche Trennungen mitten im
     Wort. Mit voller Breite ist wieder genug Platz da, ganz wie vor dem
     Umbau auf freie Positionierung. Bilder/Buttons bleiben frei positioniert. */
  .carousel__title,
  .carousel__subtitle {
    left: 50% !important;
    width: 92% !important;
  }

  /* Die per Boxbreite gedeckelte Schrift (cqw, siehe Basis-Regel oben) reicht
     bei einer 92vw-breiten Box allein nicht: ein einzelnes langes Wort (z.B.
     "Weindegustation") passt bei der vom Admin gewaehlten Desktop-Groesse
     oft trotzdem nicht auf eine Zeile. Zusaetzlicher, an der Bildschirmbreite
     (vw statt cqw) gemessener Deckel nur hier auf dem Handy - eng genug
     kalibriert, dass typische lange Woerter nicht mehr getrennt werden
     muessen, ohne pauschal jede Titelgroesse klein zu machen. */
  .carousel__text--title {
    font-size: min(var(--manual-size, 2.5rem), 15cqw, 9vw) !important;
  }

  .carousel__text--subtitle {
    font-size: min(var(--manual-size, 1.1rem), 15cqw, 6vw) !important;
  }
}

/* Einfache Bildergalerie (z.B. "Die Vinothek"-Seite): kein Text-Overlay, kleinere Höhe */
.simple-gallery.carousel {
  min-height: 420px;
}

.simple-gallery .carousel__slide::after {
  content: none;
}

.simple-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.8em 1.2em;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .simple-gallery.carousel {
    min-height: 280px;
  }
}

/* Produktkarussell "Unsere neusten Zugänge" */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.product-card {
  text-align: center;
  border: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-sm);
  transition: box-shadow var(--transition-base);
}

.product-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.product-card__image {
  display: block;
  height: 220px;
  object-fit: contain;
  margin: 0 auto var(--space-sm);
}

.product-card__name {
  font-size: 0.95rem;
  margin-bottom: 0.3em;
}

.product-card__name a {
  color: var(--color-text-strong);
}

.product-card__meta {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-gray);
  margin-bottom: 0.5em;
}

.product-card__price {
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
}