/* lb/teaser-slide-frame -- migriert aus viewport.css + main_desktop.css.
   Rendert als: .wp-block-lb-teaser-slide-frame.swiper-container.teaserSwiper
     .slideshow-container.xx.teaser_extra[.gray][.autoslide]
       > .swiper-wrapper > .swiper-slide (lb/teaser-slide-item)
       > .swiper-button.mobile_hidden > .swiper-button-next/-prev
       > .swiper-pagination.desktop_hidden...
   Referenzseite: Startseite (autoslide, 2 Slides) -- Block wird zusätzlich
   auf 20+ weiteren Seiten verwendet (z.B. "Wir für Bayern"-Ebenen).

   Gemeinsame Swiper-Basis (Pfeile/Pagination-Grundmaße, Bild/Overlay) liegt
   in ../teaser-slide-shared/block-styles.css (auch von der Thumbs-Gallery
   genutzt) -- hier nur die echten Unterschiede dieses Blocks. */

.wp-block-lb-teaser-slide-frame {
  max-width: 100%;
}

.wp-block-lb-teaser-slide-frame.gray {
  background: #F3F4F7;
  max-width: 100%;
}

/* Text-Shadow als Sicherheitsnetz für Lesbarkeit -- der dunkle
   Verlauf-Overlay (siehe teaser-slide-shared) hilft nur an einer Ecke des
   Bildes, ein Schlagschatten macht den Text unabhängig von der jeweiligen
   Bildstelle lesbar. Nur hier (nicht in der geteilten Datei), da
   content-slide-frame dunklen Text auf hellem Grund nutzt, wo ein
   Schlagschatten nicht passt. */
.wp-block-lb-teaser-slide-frame .text .my-block-title,
.wp-block-lb-teaser-slide-frame .text .my-block-text {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Pfeile: eigener dunkler Look für diesen Slider (statt Standard-Blau) */
.wp-block-lb-teaser-slide-frame .swiper-button-next,
.wp-block-lb-teaser-slide-frame .swiper-button-prev {
  background: rgba(52, 47, 42, .125);
}

.wp-block-lb-teaser-slide-frame .swiper-button {
  position: absolute;
  top: calc(50% - 72px);
}

/* Mobile: Pagination-Dots waren als normales Flow-Element NACH dem Bild
   positioniert (position:relative, Basisregel in viewport.css) -- der
   Frame hat aber overflow:hidden + feste height:500px, die dieses
   Nachfolge-Element komplett abschneidet (nie sichtbar). Fix:
   position:absolute überlagert das Bild direkt. Design laut TechDoku S.48
   (Stage-Slide Standard Frontend-Mockup): schlichte weiße Punkte direkt auf
   dem Bild, dezenter dunkler Container-Hintergrund, damit sie auch auf
   hellen Bildstellen lesbar bleiben. */
.wp-block-lb-teaser-slide-frame .swiper-pagination {
  position: absolute;
  background: rgba(0, 0, 0, 0.38);
}

.wp-block-lb-teaser-slide-frame .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.6;
}

.wp-block-lb-teaser-slide-frame .swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}

@media (min-width: 768px) {
  /* Ab 768px: nur Pfeile, keine Dots (wie bei content-slide-frame). */
  .wp-block-lb-teaser-slide-frame .swiper-pagination {
    display: none;
  }

  /* Bild-Höhe Mobile 500px -> Desktop 570px (Thumbs-Variante hat eigene,
     größere Werte ~640/727px, siehe teaser-slide-thumbs-frame). War in
     main_desktop.css auf zwei Tiers (900px/1100px) verteilt, wobei der
     900px-Tier fälschlich den Mobile-Wert (500px) statt 570px hatte --
     Bild wollte da schon 570px sein (teaser-slide-item), Höhen-Mismatch
     hätte das Bild um 70px beschnitten. */
  .wp-block-lb-teaser-slide-frame.swiper-backface-hidden .swiper-slide {
    height: 570px;
  }
}