/* Gemeinsame Swiper-Basis für die teaser-slide-* Familie (Hero-Slider
   teaser-slide-frame/-item + Thumbs-Gallery teaser-slide-thumbs-frame/
   -thumb-item): Pfeil-Wrapper/-Buttons, Pagination-Grundmaße, Bild +
   abdunkelndes Overlay. Kein eigener Block, wird aber wie einer über
   loadModulFrontendStyles() geladen (siehe bs-custom-block.php) -- jeder
   der 4 echten Blöcke bekommt diese Datei als Abhängigkeit VOR seiner
   eigenen block-styles.css, damit dort nur die echten Unterschiede
   (Pfeilfarbe, Höhen, Dots an/aus) drinstehen müssen, nicht die
   Grundmechanik. Aus viewport.css + main_desktop.css migriert. */

/* Pfeil-Wrapper */
.swiper-button {
  position: relative;
  max-width: 1272px;
  width: 100%;
  height: 72px;
  top: -156px;
  margin: auto;
  left: 0;
  right: 0;
}

/* Pfeil-Buttons */
.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 100%;
  color: #fff;
  background: #1F5DA6;
  border: 0;
  position: absolute;
  top: 22px;
}

.swiper-button-next {
  right: 0;
  justify-content: center;
}

.swiper-button-prev {
  left: 0;
  justify-content: center;
}

/* Pagination-Grundmaße (Farbe/Sichtbarkeit ist je Block unterschiedlich) */
.swiper-pagination-bullets {
  position: relative;
  text-align: center;
  height: 56px;
  line-height: 56px;
  width: 100%;
}

.swiper-pagination.desktop_hidden.swiper-pagination-clickable.swiper-pagination-bullets {
  bottom: 0px;
}

/* Spezifität bewusst wie im Original (5 statt 1 Klasse) -- eine geteilte
   Basisregel .dot/.swiper-pagination-bullet in viewport.css setzt sonst mit
   höherer Spezifität margin:16px, was diese Regel sonst nicht schlagen
   würde. */
.swiper-pagination.desktop_hidden.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 8px;
}

/* Bild + abdunkelndes Overlay */
.teaser_image_div {
  background-position: center;
  position: relative;
  height: 500px;
  width: 100%;
  background-repeat: no-repeat;
}

.my-block-image {
  max-height: 648px;
  overflow: hidden;
  height: 100%;
}

/* Sanfterer Verlauf mit Zwischenstopp statt reinem 0%->100%-Sprung -- bei
   Bildern mit starkem lokalem Farbkontrast (z.B. dunkles Motiv links, helles
   rechts) wirkte der reine Zweipunkt-Verlauf wie eine harte Kante genau an
   der Kontrastgrenze des Bildes selbst. */
.my-block-image:after,
.teaser_image_div:after {
  content: " ";
  display: block;
  background: linear-gradient(to right, rgba(52, 47, 42, 0.55) 0%, rgba(52, 47, 42, 0.25) 35%, rgba(52, 47, 42, 0) 75%);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: unset;
  margin: auto;
}

.is-style-whitout_overlay .my-block-image:after,
.is-style-whitout_overlay .teaser_image_div:after {
  background: none;
}

@media (min-width: 768px) {
  .swiper-pagination.desktop_hidden.swiper-pagination-clickable.swiper-pagination-bullets {
    bottom: 48px;
  }
}