body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  transition: .25s;
  background: #fff;
  color: white;
  box-sizing: border-box;
  overflow: hidden !important;
}

#showroom-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-left: 3.7%;
  margin-right: 3.7%;
}

.timeline-wrapper-showroom {
  position: relative;
  width: 100%;
  height: 75%;
  margin-top: 8%;
  border-radius: 14px;
  overflow: hidden;
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  transform: translateX(100%) scale(1);
  transition: transform 0.8s ease;
  z-index: 0;
  overflow-y: hidden;
}

.slide::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient: unten stark, oben transparent */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.0) 80%
  );
  transform: translateY(100%);
  pointer-events: none;
}

/* 2. Keyframes: die Maske fährt von unten komplett hoch */
@keyframes riseShadow {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* 3. Beim Aktivieren der Slide (egal ob initial oder per JS‐Klasse) animieren */
.slide.active::before,
.slide.enter-right::before,
.slide.enter-left::before {
  animation: riseShadow 1.1s ease-out forwards;
}

/* 4. Kurze Cleanup‐Transition beim Verlassen, damit beim nächsten Mal wieder animiert wird */
.slide.exit-left::before,
.slide.exit-right::before {
  /* direkt zurücksetzen, damit beim Wieder-Eintritt die Animation erneut abspielt */
  transform: translateY(100%);
  animation: none;
}

.slide.active {
  transform: translateX(0) scale(1);
  z-index: 2;
}

.slide.exit-left {
  transform: translateX(-100%) scale(1.1);
  z-index: 1;
}

.slide.enter-right {
  transform: translateX(0) scale(1.1);
  z-index: 2;
}

.slide.enter-left {
  transform: translateX(0) scale(1.1);
  z-index: 2;
}

.slide.exit-right {
  transform: translateX(100%) scale(1.1);
  z-index: 1;
}




/* 1. Neue Keyframes für Zeilen-Exit (nach oben) */
@keyframes headlineLineExit {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* 2. Neue Keyframes für Zeilen-Enter (von unten) */
@keyframes headlineLineEnter {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* 3. Jede Zeile block-level und initial unsichtbar */
.hero-headline .headline-line {
  display: block;
  opacity: 0;
}

/* 4. Exit-Klasse auf einzelne Zeilen */
.hero-headline .headline-line.exit {
  animation: headlineLineExit 0.5s forwards;
}

.timeline-wrapper-showroom {
  transition: height 0.5s ease;
}

.slide-block-text {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: justify;
}

.hero-container.see-more .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;
}
.hero-container.see-more .hero-headline {
  grid-column: 1 / 3;
  margin-bottom: -20px;
  margin-left: 2%;
  animation: none !important;
  color: #444444 !important; /* Einheitliches Grau für die Headline */
}
.hero-container.see-more .slide-block-text.left {
  grid-column: 1 / 2;
}
.hero-container.see-more .slide-block-text.right {
  grid-column: 2 / 3;
}
/* wenn see-more aktiv ist, schrumpft der Wrapper */
.timeline-wrapper-showroom.see-more {
  height: 70% !important; /* oder z.B. height: 40vh; je nach Wunsch */
  margin-top: 20% !important; /* opt. anpassen, damit es zentriert bleibt */
}
/* 5. Enter-Klasse auf einzelne Zeilen */
.hero-headline .headline-line.enter {
  animation: headlineLineEnter 0.5s forwards;
}

/* bei see-more immer einheitliches Grau für Pfeile */
.hero-container.see-more .nav-arrow {
  color: #888888 !important;
}

/* bei see-more immer einheitliches Grau für Dots */
.hero-container.see-more .nav-dots .dot {
  background-color: #888888 !important;
  width: 10px !important;   /* gleich bleibende Größe */
  height: 10px !important;
}




/* 6. Staggered delays: erste Zeile sofort, zweite 0.1s, dritte 0.2s, usw. */
.hero-headline .headline-line.exit:nth-child(1) { animation-delay: 0s; }
.hero-headline .headline-line.exit:nth-child(2) { animation-delay: 0.1s; }
.hero-headline .headline-line.exit:nth-child(3) { animation-delay: 0.2s; }
.hero-headline .headline-line.exit:nth-child(4) { animation-delay: 0.3s; }
/* bei Bedarf für weitere Zeilen fortsetzen */

.hero-headline .headline-line.enter:nth-child(1) { animation-delay: 0s; }
.hero-headline .headline-line.enter:nth-child(2) { animation-delay: 0.1s; }
.hero-headline .headline-line.enter:nth-child(3) { animation-delay: 0.2s; }
.hero-headline .headline-line.enter:nth-child(4) { animation-delay: 0.3s; }
/* bei Bedarf für weitere Zeilen fortsetzen */


.hero-headline .headline-line {
  display: block;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}


.hero-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 12px;
  column-gap: 20px;
  padding: 0 8%;
  margin-bottom: 30px;
}

.hero-headline {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 32px;
  line-height: 1.3;
  margin: 0;
  text-align: left;
  font-family: 'Abnes', sans-serif;
  color: #e9e9e9 !important;
  padding-bottom: 20px;
}

.hero-button {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  color: #232223;
  border: none;
  height: 40px;
  border-radius: 25px;
  padding-right: 52px;
  padding-left: 52px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-shadow: none;
  margin-right: 8%;
  margin-bottom: 130px;
}

.hero-divider {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.hero-nav {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 12px;
}

.nav-prev {
  margin-left: -20px;
}

.nav-next {
  margin-right: -20px;
}

.nav-arrow {
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  padding: 0 20px;
  cursor: pointer;
}

.nav-dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
}

.dot.active {
  background: white;
  width: 8px;
  height: 8px;
}

/* iPad & kleine Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    flex-direction: column;
    height: auto;
  }
  #showroom-section {
    height: 100vh;
    margin: 0;
  }
  .timeline-wrapper-showroom {
    height: 85vh !important;
    margin-top: 0 !important;
    border-radius: 0;
  }
  .hero-content {
    padding: 0 5%;
    grid-template-columns: 1fr auto;
    margin-bottom: 40px;
  }
  .hero-headline {
    font-size: 28px;
    color: #e9e9e9 !important;
  }
  .hero-button {
    position: static;
    margin: 20px auto;
  }
  .hero-nav {
    justify-content: center;
  }
}

/* Mobile (Smartphones) */
@media (max-width: 767px) {
  body {
    flex-direction: column;
    height: auto;
  }
  #showroom-section {
    height: 100vh;
    margin: 0;
  }
  .timeline-wrapper-showroom {
    height: 70vh !important;
    margin-top: 10% !important;
    border-radius: 14px;
    margin-right: 6%;
    margin-left: 6%;
  }
  .hero-container {
    bottom: auto;
    top: 0;
    padding-top: 20px;
    margin-top: 84%;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 5%;
    margin-bottom: 20px;
  }
  .hero-headline {
    font-size: 20px;
    padding-bottom: 6px;
    color: #e9e9e9 !important;
  }
  .hero-button {
    position: static;
    margin: 5px 0;
    margin-bottom: 0px;
    height: 30px;
    padding-right: 32px;
    padding-left: 32px;
    align-self: left;
    background-color: #fff;
    color: #444444;
  }
  .hero-divider {
    margin: 5px 0;
  }
  .hero-nav {
    justify-content: center;
    margin-top: -10px;
  }
  .nav-arrow {
    font-size: 2rem;
    padding: 0 12px;
    display: none;
  }
  .nav-dots {
    gap: 8px;
    margin-top: 14px;
  }
}

/* Damit der weiße Hintergrund hinter den Blocktexten durchläuft */
.hero-container.see-more .slide-block-text {
  background: none;
}

/* Bei Mobile: Content-Box sichtbar machen und scrollen erlauben */
@media (max-width: 767px) {
  .timeline-wrapper-showroom.see-more {
    background-color: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero-container.see-more .hero-content {
    background-color: #ffffff;
    border-radius: 0;
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    padding: 20px 5% !important;
    margin-top: -80% !important;
  }
  .hero-container.see-more .hero-headline {
    color: #444444 !important;
    margin-left: 6%;
  }
  .slide:nth-of-type(1) { background-position: 10% !important;}
  .slide:nth-of-type(2) { background-position: left 40%; }
  .slide:nth-of-type(3) { background-position: right 20%; }
}


/* 1. Keyframes für Exit (hochschieben + ausblenden) */
@keyframes fadeUpExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* 2. Keyframes für Enter (von unten hereinfahren + einblenden) */
@keyframes fadeUpEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. Exit‐Klasse auf Button & Nav */
.hero-button.exit,
.hero-nav.exit {
  animation: fadeUpExit 0.4s ease forwards;
}

/* 4. Enter‐Klasse auf Button & Nav */
.hero-button.enter,
.hero-nav.enter {
  animation: fadeUpEnter 1.1s ease forwards;
}

/* Exit-Animation für Divider */
.hero-divider.exit {
  animation: fadeUpExit 0.5s ease forwards;
}

/* Enter-Animation für Divider */
.hero-divider.enter {
  animation: fadeUpEnter 0.5s ease forwards;
}


@media (max-width: 767px) {
  /* Ensure hero-content is a column flex container */
  .hero-container.see-more .hero-content {
    display: flex;
    flex-direction: column;
  }

  /* Headline bleibt oben */
  .hero-container.see-more .hero-headline {
    order: 1;
  }

  /* Linker Blocktext als zweites */
  .hero-container.see-more .slide-block-text.left {
    order: 2;
  }

  /* Rechter Blocktext als drittes */
  .hero-container.see-more .slide-block-text.right {
    order: 3;
  }

  /* Nav als viertes, also ganz unten */
  .hero-container.see-more .hero-nav {
    order: 4;
    margin-top: 20px;  /* optional: Abstand zu den Text-Blöcken */
  }
}
.timeline-wrapper-showroom.see-more .slide::before {
  display: none !important;
}