/* ============================================================
   NINA SLIDER - Core Styles
   ============================================================ */

/* Der äußere Rahmen (Viewport) */
.ninaslider-viewport {
    position: relative;
    width: 100%; /* Nimmt 100% des umliegenden DIVs */
    height: 100%; /* Optional, falls Höhe fix sein soll */
    overflow: hidden; /* Versteckt alles, was rausragt */
    
    /* Verhindert Markieren von Text beim schnellen Klicken */
    user-select: none; 
    -webkit-user-select: none;
}

/* Der Schlauch, in dem die Slides liegen */
.ninaslider-wrapper {
    display: flex; /* Alle Slides nebeneinander */
    width: 100%;
    height: 100%;
    
    /* Standard-Position (wird von JS überschrieben) */
    transform: translate3d(0, 0, 0); 
    
    /* Performance-Optimierung */
    will-change: transform; 
}

/* Ein einzelner Slide */
.ninaslider-slide {
    position: relative;
    
    /* WICHTIG: Jeder Slide ist so breit wie der Viewport (100%) */
    min-width: 100%; 
    max-width: 100%;
    height: 100%;
    
    /* Flex-Regeln, damit sie nicht schrumpfen */
    flex-shrink: 0;
    flex-grow: 0;
    
    /* Zentrierungs-Helfer (optional, falls Inhalt mittig sein soll) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
}

/* --- NAVIGATION BUTTONS --- */
.ninaslider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    /* Stylen nach deinem NinaNet Design */
    background-color: var(--bcdk75); /* Halbtransparenter Hintergrund */
    color: var(--vc1); /* Deine Neon-Farbe */
    border: 1px solid var(--bci1);
    
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
}

.ninaslider-btn:hover {
    background-color: var(--bci1);
    color: var(--bc1);
}

.ninaslider-prev { left: 16px; }
.ninaslider-next { right: 16px; }

/* --- RESPONSIVE / MEDIA QUERY SUPPORT --- */
/* Beispiel: Inhalte im Slider können auf Touch anders aussehen */
@media (pointer: coarse) {
    .ninaslider-btn {
        width: 50px;     /* Größere Buttons für Finger */
        height: 50px;
    }
}