/* =========================================================
   Hintergrund-Verschiebung für alle Slides im Smart Slider 3
   ---------------------------------------------------------
   Klasse: .background-move
   Wirkung: Verschiebt das Hintergrundbild aller Slides etwas nach oben.
   Anwendung: Klasse "background-move" global im Slider setzen.
   ========================================================= */

.e2n-background-move .n2-ss-slide-background-image {
    height: 88% !important; /* Höhe reduzieren → Hintergrund rutscht leicht nach oben */
}




/* =========================================================
   Bullet-Navigation – Styling & Positionierung
   ---------------------------------------------------------
   Ziel: Anpassung der Navigationspunkte (Bullets) im Smart Slider 3.
   Enthält Breakpoints zur individuellen Positionierung
   auf Desktop, Tablet und Mobile.
   ========================================================= */

/* Aktiver Bulletpunkt */
div#n2-ss-3.n2-ss-slider
.n2-ss-slider-wrapper-inside
.n2-ss-slider-controls
.n2-active {
    background-color: #FE4D4C; /* Farbe des aktiven Bullets */
}

/* Grundgröße aller Bullets */
div#n2-ss-3.n2-ss-slider
.n2-ss-slider-wrapper-inside
.n2-ss-slider-controls
.n2-bullet {
    width: 4px;
    height: 4px;
}

/* Hover-Zustand */
div#n2-ss-3.n2-ss-slider
.n2-ss-slider-wrapper-inside
.n2-ss-slider-controls
.n2-bullet:hover {
    background-color: #FE4D4C; /* Hover-Farbe gleich aktivem Zustand */
}

/* ---------- Desktop (ab 1000px) ---------- */
@media (min-width: 1000px) {
    div#n2-ss-3.n2-ss-slider
    .n2-ss-slider-wrapper-inside
    .n2-ss-slider-controls {
        width: 20px;
        position: absolute;
        left: calc((100vw - min(100vw, 1500px)) / 2 + 90px); /* Positionierung relativ zum Viewport */
        bottom: 200px;
    }
}

/* ---------- Tablet (max. 999px) ---------- */
@media (max-width: 999px) {
    div#n2-ss-3.n2-ss-slider
    .n2-ss-slider-wrapper-inside
    .n2-ss-slider-controls {
        width: 20px;
        position: absolute;
        left: calc((100vw - 88vw) / 2); /* Anpassung an Containerbreite (88%-Box) */
        bottom: 220px;
    }
}

/* ---------- Mobile (max. 689px) ---------- */
@media (max-width: 689px) {
    div#n2-ss-3.n2-ss-slider
    .n2-ss-slider-wrapper-inside
    .n2-ss-slider-controls {
        width: 20px;
        position: absolute;
        bottom: inherit;
        top: -515px; /* Verschiebung nach oben auf kleinen Screens */
    }
}





/* =========================================================
   Responsive Layout-Korrektur für kleinere Bildschirme
   ---------------------------------------------------------
   Ziel: Anpassung der maximalen Inhaltsbreite und Ausrichtung
   für Smart Slider 3 auf Geräten < 1000px Bildschirmbreite.
   ========================================================= */

@media (max-width: 999px) {
    .n2-ss-section-main-content {
        max-width: 88% !important; /* Begrenzung auf 88% – gleiche Flucht wie restliches Layout */
        margin: 0 auto;            /* Zentriert den Slider-Inhalt */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}





/* =========================================================
   Button-Area Layoutsteuerung (E2N Buttons)
   ---------------------------------------------------------
   Ziel: Kontrolle von Zeilenumbrüchen und Abständen
   innerhalb der Button-Zeile im Smart Slider 3.
   ========================================================= */

/* Standard (Desktop): Buttons bleiben in einer Zeile */
.e2n-buttonsarea .n2-ss-layer-row-inner {
    flex-wrap: nowrap !important; /* Kein Umbruch */
}

/* Mobile (unter 1000px): Buttons umbrechen in die nächste Zeile */
@media (max-width: 999px) {
    .e2n-buttonsarea .n2-ss-layer-row-inner {
        flex-wrap: wrap !important; /* Zeilenumbruch bei kleinerer Breite */
    }
}

/* Entfernt Innenabstände für alle Elemente außer Links */
.e2n-buttonsarea *:not(a) {
    padding: 0 !important;
}

/* Bugfix Margin near buttons on tablet size*/
@media (max-width: 999px) and (min-width: 690px){
    .e2n-layerbox-row .n2-ss-layer[data-sstype="col"]{
        margin: 10px !important;
    }
}


/* Box Shadow > use class e2n-box-shadow */

.e2n-box-shadow > div{
    box-shadow: 0px 4px 12px 4px #00000040 !important;
}