/* //////////////////////////////////////////////////////////////
   Footer Space – sorgt für genügend Abstand zum Footer
////////////////////////////////////////////////////////////// */
.footer-spacer-möbeltischaufbauten {
  height: 0vw;
}

/* //////////////////////////////////////////////////////////////
   Überschrift
////////////////////////////////////////////////////////////// */
.laboreinrichtungen-header {
  text-align: center;
  margin-top: 15em;
  margin-bottom: -2em;
}

.laboreinrichtungen-header h1 {
  font-size: 2.8em;
  color: #de800e;
  letter-spacing: 0.03em;
  font-weight: 700;
}

/* //////////////////////////////////////////////////////////////
   Einleitung – zweispaltig: links Slider, rechts Text
////////////////////////////////////////////////////////////// */
.laboreinrichtungen-einleitung {
  width: 90%;
  margin: 6em auto;
  display: flex;
  justify-content: center;
}

.einleitung-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4em;
  flex-wrap: wrap;
}

/* rechter Textbereich */
.laboreinrichtungen-einleitung .text {
  flex: 1;
  min-width: 25em;
}

.laboreinrichtungen-einleitung .text p {
  font-size: 1.15em;
  line-height: 1.8;
  color: #444;
  text-align: left;
  max-width: 45em;
}

/* //////////////////////////////////////////////////////////////
   Linker Mini-Slider (interaktiver Fokus-Slider)
////////////////////////////////////////////////////////////// */
.laboreinrichtungen-mini-slider {
  flex: 1;
  min-width: 30em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.laboreinrichtungen-mini-slider .container {
  position: relative;
  width: 52vw;               /* etwas breiter */
  height: 25em;              /* deutlich höher */
  background: #f5f5f5;
  box-shadow: 0 2.5em 3.5em rgba(0, 0, 0, 0.2);
  border-radius: 1.5em;
  overflow: hidden;
  transform: translateX(-3vw); /* leicht nach links verschoben */
}

.container .slide .item {
  width: 14em;
  height: 18em;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%) translateZ(0);
  border-radius: 1.5em;
  box-shadow: 0 1.5em 2.5em rgba(0, 0, 0, 0.3);
  background-position: center;
  background-size: cover;

  /* Genau diese Animation brauchst du für den alten Stil */
  transition: left 0.55s ease, opacity 0.55s ease;

  will-change: left, opacity;
}



/* Fokuspositionen der Bilder */
.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.slide .item:nth-child(3) {
  left: 50%;
}

.slide .item:nth-child(4) {
  left: calc(50% + 15em);
}

.slide .item:nth-child(n + 5) {
  left: calc(50% + 28em);
  opacity: 0;
}

/* Inhalt auf dem aktiven Bild */
.item .content {
  position: absolute;
  top: 50%;
  left: 5em;
  width: 20em;
  text-align: left;
  color: #ffffff;
  transform: translateY(-50%);
  font-family: system-ui, sans-serif;
  display: none;
}

.slide .item:nth-child(2) .content {
  display: block;
}

/* Textanimationen */
.content .name {
  font-size: 2em;
  font-weight: bold;
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.content .des {
  margin-top: 0.8em;
  font-size: 1.1em;
  line-height: 1.4;
  opacity: 0;
  animation: fadeInUp 1s ease 0.3s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2em);
    filter: blur(1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Pfeilnavigation */
.button {
  position: absolute;
  bottom: 0.5em;
  width: 100%;
  text-align: center;
}

.button button {
  width: 2.5em;
  height: 2.2em;
  border-radius: 0.5em;
  border: 0.15em solid #00000099;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  margin: 0 1em;
  transition: 0.3s;
}

.button button:hover {
  transform: scale(1.1);
  border-color: #de800e;
  background: #fff;
}

/* //////////////////////////////////////////////////////////////
   Kontaktabschnitt (NEU – im Stil von Aktuelles)
////////////////////////////////////////////////////////////// */
#laboreinrichtungen-kontakt.custom-section {
  width: 100%;
  background-color: #f4f4f4;
  padding: 0.5vw 0;
  margin-top: -2vw;
}

#laboreinrichtungen-kontakt h3.subheading {
  font-size: 1.4vw;
  margin-bottom: 1vw;
  color: #555;
  max-width: 70vw;
  margin-left: 10vw;
  text-align: left;
}

#laboreinrichtungen-kontakt p {
  font-size: 1vw;
  line-height: 1.5;
  margin-bottom: 1.5vw;
  max-width: 60vw;
  margin-left: 10vw;
  text-align: left;
}

#laboreinrichtungen-kontakt .kontakt-hervorhebung {
  color: #de800e;
  font-weight: normal;
}

#laboreinrichtungen-kontakt .copy-wrap {
  position: relative;
  display: inline-block;
}

#laboreinrichtungen-kontakt .copyable-email {
  cursor: pointer;
  color: #444;
  font-weight: 400;
  text-decoration: none;
}

#laboreinrichtungen-kontakt .tel-plain {
  color: #444;
  font-weight: 400;
}

#laboreinrichtungen-kontakt .copy-popup {
  position: absolute;
  left: 50%;
  top: -3em;
  transform: translateX(-50%) translateY(-0.6em);
  background: #28a745;
  color: #fff;
  padding: 0.4em 1em;
  font-size: 0.9em;
  border-radius: 0.5em;
  box-shadow: 0 0.3em 0.8em rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: 40vw;
  z-index: 100;
}

#laboreinrichtungen-kontakt .copy-popup.aktiv {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* //////////////////////////////////////////////////////////////
   Responsive Anpassungen
////////////////////////////////////////////////////////////// */
@media (max-width: 1000px) {
  .einleitung-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 3em;
    text-align: center;
  }

  .laboreinrichtungen-einleitung .text p {
    text-align: center;
    max-width: 90%;
  }

  .laboreinrichtungen-mini-slider .container {
    width: 85vw;
    height: 20em;
    transform: translateX(0);
  }

  .laboreinrichtungen-header {
    margin-top: 11em;
  }
}

/* //////////////////////////////////////////////////////////////
   Unterer Endlos-Slider – fließend + dragfähig
////////////////////////////////////////////////////////////// */
.laboreinrichtungen-slider-section {
  text-align: center;
  margin: 8em auto 6em;
  width: 90%;
}

.laboreinrichtungen-slider-section h2 {
  font-size: 2.3em;
  color: #555;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1.5em;
  margin-top: -2em;
}

.laboreinrichtungen-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  cursor: grab;
}

.laboreinrichtungen-slider:active {
  cursor: grabbing;
}

.slider-container {
  display: flex;
  flex-wrap: nowrap;
  user-select: none;
}

.slide-track {
  display: flex;
  gap: 3em;
  will-change: transform;
  transition: transform 0.2s ease-out;
}

.slide {
  flex: 0 0 auto;
  width: 20em;
  text-align: center;
}

.slide img {
  width: 100%;
  border-radius: 0.8em;
  box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.25);
}

.slide p {
  margin-top: 0.8em;
  font-size: 1em;
  color: #444;
}

.page-subheading {
  margin-bottom: -3vw; /* optional, falls auch der Untertitel weiter runter soll */
}

/* //////////////////////////////////////////////////////////////
   Responsive Fix: Textposition im Mini-Slider (3 Breakpoints)
////////////////////////////////////////////////////////////// */


@media (min-width: 2000px) {
  .page-subheading {
  margin-bottom: 0vw; /* optional, falls auch der Untertitel weiter runter soll */
}

}

@media (max-width: 1300px) {

.item .content {
    position: absolute;
    top: 50%;
    left: 3em;
    width: 16em;
    text-align: left;
    color: #ffffff;
    transform: translateY(-50%);
    font-family: system-ui, sans-serif;
    display: none;
}

}

@media (min-width: 750px) {

.item .content {
    position: absolute;
    top: 50%;
    left: 3em;
    width: 16em;
    text-align: left;
    color: #ffffff;
    transform: translateY(-50%);
    font-family: system-ui, sans-serif;
    display: none;
}

}





@media (max-width: 600px) {

    html,
  body {
    overflow-x: hidden;
  }

  /* ----------------------------------------------------------
     HEADER / ABSTAND
  ---------------------------------------------------------- */
  .laboreinrichtungen-header {
    margin-top: 32vw;
    margin-bottom: 4vw;
    text-align: center;
  }

  .laboreinrichtungen-header h1 {
    font-size: 2em;
    line-height: 1.2;
  }

  /* ----------------------------------------------------------
     EINLEITUNG – UMBAU AUF EINSPALTIG
  ---------------------------------------------------------- */
  .laboreinrichtungen-einleitung {
    width: 95%;
    margin: 10vw auto;
  }

  .einleitung-wrapper {
    flex-direction: column;
    gap: 8vw;
  }

  .laboreinrichtungen-einleitung .text {
    min-width: unset;
    width: 100%;
  }

  .laboreinrichtungen-einleitung .text p {
    font-size: 1.1em;
    line-height: 1.5em;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
  }

  /* ----------------------------------------------------------
     MINI-SLIDER – MOBILE NEU & MODERN
  ---------------------------------------------------------- */

  .laboreinrichtungen-mini-slider {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Die Slider-Box wird zu einem echten kleinen Karussell */
  .laboreinrichtungen-mini-slider .container {
    width: 90vw;
    height: 60vw;
    border-radius: 1.2em;
    overflow: hidden;
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25);
    position: relative;
    transform: none !important;
  }

  /* Jedes Item bekommt die Größe der Box */
  .container .slide .item {
    width: 90vw;
    height: 60vw;
    top: 0;
    left: 0;
    border-radius: 1.2em;
    transition: transform 0.55s ease, opacity 0.55s ease;
  }

  .slide .item:nth-child(1) {
    transform: translateX(-100%);
    opacity: 0.3;
  }

  .slide .item:nth-child(2) {
    transform: translateX(0%);
    opacity: 1;
  }

  .slide .item:nth-child(3) {
    transform: translateX(100%);
    opacity: 0.3;
  }

  .slide .item:nth-child(n + 4) {
    transform: translateX(200%);
    opacity: 0;
  }

  /* Pfeile schön minimal */
  .button button {
    width: 2.1em;
    height: 1.9em;
    margin: 0 0.4em;
    border-radius: 0.4em;
    backdrop-filter: blur(4px);
  }

    .button {
    bottom: 0.2em;   /* weiter nach unten */
  }

  /* ----------------------------------------------------------
     KONTAKT – OPTIMAL MOBIL
  ---------------------------------------------------------- */
  #laboreinrichtungen-kontakt.custom-section {
    padding: 8vw 0;
    margin-top: 14vw;
  }

  #laboreinrichtungen-kontakt h3.subheading {
    font-size: 1.3em;
    margin-left: 5vw;
    max-width: 90vw;
  }

  #laboreinrichtungen-kontakt p {
    font-size: 1.05em;
    margin-left: 5vw;
    max-width: 90vw;
    line-height: 1.6;
  }

  #laboreinrichtungen-kontakt .copy-popup {
    top: -2.5em;
    font-size: 0.8em;
    max-width: 60vw;
  }

  /* ----------------------------------------------------------
     ENDLOS-SLIDER UNTEN
  ---------------------------------------------------------- */
  .laboreinrichtungen-slider-section {
    width: 95%;
    margin: 20vw auto 15vw;
  }

  .laboreinrichtungen-slider-section h2 {
    font-size: 1.7em;
    margin-bottom: 8vw;
    margin-top: 0;
  }

  .slide {
    width: 60vw;
  }

  .slide img {
    width: 100%;
    border-radius: 1em;
  }

  .slide p {
    font-size: 1em;
    margin-top: 3vw;
  }

  .slide-track {
    gap: 6vw;
  }

  /* ----------------------------------------------------------
     FOOTER SPACE MOBILE
  ---------------------------------------------------------- */
  .footer-spacer-möbeltischaufbauten {
    height: 20vw;
  }

  a[href^="tel"] {
    color: #444;                 /* nicht blau */
    text-decoration: underline;  /* Unterstrich bleibt */
    text-decoration-color: #444; /* gleiche Farbe */
  }

}