/* ==================================================
   PRODUKTSEITE – Slider + Info-Overlay
   Farben/Schrift/Größen kommen aus design.css
================================================== */

.desktopSliderWrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

/* produktseite.js blendet die Bildreihe ein, sobald der Slider steht */
.desktopSliderWrapper.is-ready {
  opacity: 1;
}

/* Etwas höher als das Fenster, damit die Seite > 50px scrollen kann –
   erst dann blendet produktseite.js das Info-Overlay ein */
.desktopScrollSpacer {
  height: calc(100vh + 100px);
}

.desktopProductInfo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.3s;
  pointer-events: none;
}

.desktopProductInfo.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.desktopProductInfo__content {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 10rem 1rem 2rem 1rem;
  display: flex;
  gap: 60px;
}

.desktopProductInfo__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.desktopProductInfo__right {
  flex: 2;
}

.desktopProductInfo__title {
  font-family: var(--h-font);
  font-size: var(--h-size-title);
  font-weight: bold;
  color: var(--h-dark);
  margin: 0;
}

.desktopProductInfo__text {
  font-family: var(--h-font);
  font-size: var(--h-size-title);
  font-weight: 600;
  line-height: 1;
  color: var(--h-dark);
  margin: 0;
}

/* Aufzählung im Infotext: umbrechende Zeilen beginnen bündig nach dem Punkt */
.desktopProductInfo__text ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktopProductInfo__text li {
  position: relative;
  padding-left: 0.7em;
  margin: 0;
}

.desktopProductInfo__text li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.desktopProductInfo__grid1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  font-family: var(--h-font);
  font-size: var(--h-size-btn);
  font-weight: 600;
  line-height: 1;
  color: var(--h-dark);
  margin: 0;
}

.desktopProductInfo__extra {
  margin: 0;
}

.desktopProductInfo__img {
  width: 100%;
  display: none;
  margin: 0;
}

.desktopProductInfo__img2 {
  width: 100%;
  margin: 0;
}

/* Aufklapp-Texte */
.desktopProductInfo__beratungText,
.desktopProductInfo__lieferungText,
.desktopProductInfo__massanfertigungText {
  display: none;
  font-family: var(--h-font);
  font-weight: 600;
  font-size: var(--h-size-btn);
  line-height: 1;
  color: var(--h-dark);
  margin: 0;
}

/* Links in Aufklapp-Texten und Infotext */
.desktopProductInfo__beratungText a,
.desktopProductInfo__lieferungText a,
.desktopProductInfo__massanfertigungText a,
.desktopProductInfo__text a,
.desktopSlider__text a {
  color: inherit;
  text-decoration: none;
}

.desktopProductInfo__beratungText a:hover,
.desktopProductInfo__lieferungText a:hover,
.desktopProductInfo__massanfertigungText a:hover,
.desktopProductInfo__text a:hover,
.desktopSlider__text a:hover {
  color: var(--h-pink);
}

/* Buttons – gemeinsame Basis */
.desktopProductInfo__button1,
.desktopProductInfo__button2,
.desktopProductInfo__button3,
.desktopProductInfo__button4 {
  display: block;
  width: fit-content;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--h-font);
  font-size: var(--h-size-btn);
  font-weight: 600;
  cursor: pointer;
}

.desktopProductInfo__button1 { color: var(--h-grey); }
.desktopProductInfo__button2 { color: var(--h-pink); }
.desktopProductInfo__button3 { color: var(--h-dark); }
.desktopProductInfo__button4 { color: var(--h-blue); }

.desktopProductInfo__button1:hover,
.desktopProductInfo__button2:hover,
.desktopProductInfo__button4:hover {
  color: var(--h-dark);
}

/* Slider – alle Bilder gleich hoch, Breite ergibt sich aus dem Bild.
   Bewegt wird die Reihe von produktseite.js (Endlosschleife) */
.desktopSlider {
  --h-slider-img: 60vh;
  position: relative;
  width: 100%;
  /* nur seitlich abschneiden – der Bildtext ragt unten heraus */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.desktopSlider__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  will-change: transform;
}

.desktopSlider__item {
  position: relative;
  flex-shrink: 0;
  margin-right: 1rem;
  cursor: pointer;
}

.desktopSlider__item img {
  height: var(--h-slider-img);
  width: auto;
  display: block;
  -webkit-user-drag: none;
}

/* Bildtext unter dem Slider-Bild – absolut positioniert, damit nur das
   Bild mittig steht und der Text unten dazukommt. left/right 0: so breit
   wie das Bild */
.desktopSlider__text {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1rem;
  font-family: var(--h-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--h-dark);
  text-align: left;
  transition: opacity 0.5s ease;
}

.desktopSliderWrapper.is-tinted .desktopSlider__text {
  opacity: 0.1;
}

.desktopSlider__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--h-white);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.desktopSliderWrapper.is-tinted .desktopSlider__item::after {
  opacity: 0.9;
}

/* Pfeile links/rechts, mittig auf Bildhöhe */
.desktopSlider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: none;
  background: center / 16px no-repeat;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

.desktopSlider__arrow--prev {
  left: 1rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon points="13,2 2,8 13,14" fill="%23424242" stroke="%23ffffff" stroke-width="1"/></svg>');
}

.desktopSlider__arrow--next {
  right: 1rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon points="3,2 14,8 3,14" fill="%23424242" stroke="%23ffffff" stroke-width="1"/></svg>');
}

.desktopSliderWrapper.is-tinted .desktopSlider__arrow {
  opacity: 0;
  pointer-events: none;
}

/* Titel unten links – verhält sich wie die Bilder: liegt unter dem
   Info-Overlay (wird ausgegraut) und unter dem Konfigurator (verschwindet) */
.desktopSliderLabel {
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0 0 1rem 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--h-font);
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
  color: var(--h-dark);
  cursor: pointer;
  transition: opacity 0.5s ease, color 0.2s ease;
}

.desktopSliderLabel:hover {
  color: var(--h-pink);
}

.desktopSliderLabel.is-tinted {
  opacity: 0.1;
  pointer-events: none;
}

/* "<" um 90° gedreht -> zeigt nach unten */
.desktopSliderLabel__arrow {
  display: inline-block;
  transform: translateY(5%) rotate(-90deg);
  line-height: 1;
}

/* Material-Bild öffnet die Lightbox */
.desktopProductInfo__img img {
  cursor: pointer;
}

/* Lightbox */
.hLightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.hLightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.hLightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}