/* ============================================================
   SEITE: Leistungen-Übersicht (Page-ID 16, /leistungen/)
   Prefix: pl16-. Nutzt lp-Bausteine (leistung-shared.css) für den
   Hero und die globalen .leistungen-*-Klassen (leistungen.css der
   Startseite) für den "#mehr"-Slider-Block.
   Werte 1:1 aus Original-CSS 16.css + universal.css.
   ============================================================ */

/* Original #section-2-12: fixe Sektionshöhe (Hero 100vh + 875px Block),
   auf Mobil hebt universal.css das wieder auf (height:auto !important) */
.pl16-hero {
  height: calc(100vh + 875px);
}

@media only screen and (max-width: 768px) {
  .pl16-hero {
    height: auto;
  }
}

/* Button "Mehr zum Thema" (Original #link_button-10599-61:
   btn-outline-green mit weißem Text; Pfeil kommt über .lp-intro-btns) */
.lp-intro-btns .pl16-btn-mehr {
  color: #fdfeff;
}

/* Blob-Ringe im Hero pulsieren wie im Original
   (universal.css: #state-1..3, fadeInOut 0 → .3 → 0) */
.pl16-hero .lp-intro-blob #state-1,
.pl16-hero .lp-intro-blob #state-2,
.pl16-hero .lp-intro-blob #state-3 {
  opacity: 0;
  transition: opacity .1s;
}

@keyframes pl16-fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: .3; }
}

.pl16-hero .lp-intro-blob #state-1 {
  animation: pl16-fade-in-out 3s .5s infinite;
}

.pl16-hero .lp-intro-blob #state-2 {
  animation: pl16-fade-in-out 3s 1s infinite;
}

.pl16-hero .lp-intro-blob #state-3 {
  animation: pl16-fade-in-out 3s 1.5s infinite;
}

/* "Mehr erfahren": Original ct-link-button zentriert den Text
   (sichtbar, sobald der Button mobil auf volle Breite streckt) */
.pl16-leistungen .leistungen-btn {
  text-align: center;
}

/* "Weitere Leistungen"-Label am Slider-Pfeil: Original
   .oxy-carousel-builder_icon hat color:#fff (::before erbt) */
.pl16-leistungen .leistungen-arrow {
  color: #ffffff;
}

/* Kacheln bleiben auf dieser Seite auch mobil 380px breit —
   die @480-Regel "width:100% !important" in universal.css gilt nur
   für den Startseiten-Slider (#-carousel-builder-18-12), nicht für
   #-carousel-builder-10948-16 (Seite 16) */
@media only screen and (max-width: 480px) {
  .pl16-leistungen .leistungen-tile {
    width: 380px !important;
  }
}