/**
 * tpl_oszee2026 – slider.css
 * Smart Slider 3 Overrides
 * Ziel: Slider + blauer Hintergrund max. 1380px, zentriert
 *       Bild füllt volle Breite, Dots unten mittig
 */

/* Äußere Sektion – weißer Seitenrand wenn Viewport > 1380px */
.tpl-slider-section {
  background: transparent;
  width: 100%;
  /* Gleiche seitliche Begrenzung wie .tpl-container */
  padding: 0 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

/* =====================================================
   SLIDER BOX – füllt den eingerückten Container
===================================================== */
.tpl-slider-box {
  position: relative;
  width: 100%;
  background: var(--blue-secondary);
  overflow: hidden;
}

/* Smart Slider 3 setzt inline-width per JS auf den n2-ss-slider.
   Wir zwingen ihn auf 100% des Containers. */
.tpl-slider-box .n2-ss-slider-wrapper,
.tpl-slider-box > div,
.tpl-slider-box .n2-font-default {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
}

/* Das eigentliche Slider-Element */
.tpl-slider-box .n2-ss-slider {
  width: 100% !important;
}

/* Slide-Bilder: volle Breite, Höhe durch Slider-Einstellung */
.tpl-slider-box .n2-ss-slide-background,
.tpl-slider-box .n2-ss-slide-background img {
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =====================================================
   DOTS – unten mittig erzwingen (alle Viewports)
===================================================== */
.tpl-slider-box .nextend-bullet-bar,
.tpl-slider-box [class*="nextend-bullet-bar"],
.tpl-slider-box .n2-ss-bullet-bar {
  position: absolute !important;
  bottom: 16px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
}

.tpl-slider-box .nextend-bullet-bar > *,
.tpl-slider-box [class*="nextend-bullet-bar"] > * {
  display: inline-block !important;
  float: none !important;
}

/* =====================================================
   LOGO – passt sich Header-Höhe an
===================================================== */
.tpl-logo,
#tpl-logo {
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-height: var(--header-height);
}

.tpl-logo img,
#tpl-logo img {
  max-height: calc(var(--header-height) - 14px) !important;
  max-width: 240px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .tpl-slider-box { min-height: 280px; }
}