/* =========================================
   FILMFRIEND SLIDER – Styling (Buttons safe inside)
   ========================================= */

/* Wrapper */
.slider {
    width: 100%;
    min-width: 0;        /* Erlaubt Schrumpfen in Flexbox-Containern */
    max-width: 100%;     /* Nie größer als Parent */
    overflow: hidden;
    margin: 20px auto;
    position: relative;
}

/* Track */
.slider-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Slides */
.slide {
    flex: 0 0 auto;           /* Breite wird per JS gesetzt */
    margin-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;          /* verhindert Überstand von Caption */
    background: #1c1c1c;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.slide:last-child { margin-right: 0; }

.slide a { display:block; }

/* Einheitliches Bildverhältnis: 2:3 */
.slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Caption */
.slide-caption {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.88);
    color: white;
    font-family: 'Arial', sans-serif;
    line-height: 1.25;
}

.slide-caption h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* Desktop: max. 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-caption p {
    margin: 0;
    font-size: 14px;
    color: #d0d0d0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* Genres (standardmäßig aus) */
.category { display: none; }

/* Teaser: begrenzen für gleichmäßige Kartenhöhe */
.teaser {
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;     /* Desktop: 3 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover */
.slide:hover .slide-caption { background: rgba(0, 0, 0, 0.94); }
.slide-caption:hover h3 { color: #ffffff; }
.slide-caption:hover p { color: #cccccc; }

/* =========================
   Navigation (zentriert & sicher im Container)
   ========================= */
.slider-nav {
    position: absolute;
    inset: 0;                       /* volle Fläche für einfaches Zentrieren */
    pointer-events: none;           /* nur Buttons sind klickbar */
}

.slider-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   /* vertikal exakt mittig */
    background-color: #11b6b0d4;
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.15s ease;
    z-index: 10;

    /* smooth-hide default */
    opacity: 0;
}

/* Sicheren Innenabstand setzen, damit die Kreise nie abgeschnitten werden */
.slider-nav button#prev { left: 12px; }
.slider-nav button#next { right: 12px; }

.slider:hover .slider-nav button,
.slider:focus-within .slider-nav button {
    opacity: 1;
}

.slider-nav button:hover { background-color: rgba(14, 145, 141, 0.85); }
.slider-nav button:active { transform: translateY(-50%) scale(0.96); }
.slider-nav button:focus-visible {
    outline: 3px solid #11b6b0;
    outline-offset: 2px;
}

/* Suche */
#search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 10px;
}
#search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px;
    border-radius: 10px;
    background-color: #e5e7e6;
    min-width: 300px;
    color: black;
}
#search-button {
    background-color: #11b6b0;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 4px;
    color: #fff;
    border: none;
    outline: none;
    padding: 8px 20px;
    margin-left: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
#search-button:hover { background-color: #0c8985; }

/* Mobile / kleinere Screens */
@media (max-width: 1024px) {
    .teaser { -webkit-line-clamp: 3; }
}
@media (max-width: 768px) {
    .slide { box-shadow: none; }  /* margin-right wird von JS (GAP=20) gesteuert */
    .slider-nav button { width: 42px; height: 42px; }
    .slide-caption { padding: 8px; }
    .slide-caption h3 { font-size: 16px; }
    .slide-caption p { font-size: 12px; }
    .teaser { -webkit-line-clamp: 4; }
}

/* Kein Hover? (Touch-Geräte) -> Pfeile immer sichtbar */
@media (hover: none) {
    .slider-nav button {
        opacity: 1 !important;
    }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
    .slider-track { transition: none !important; }
    .slider-nav button { transition: none !important; }
    .slide-skeleton { animation: none !important; }
}

/* =========================
   Loading-Skeleton
   ========================= */
.slide-skeleton {
    flex: 0 0 auto;
    border-radius: 10px;
    aspect-ratio: 2 / 3;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================
   Fehler-Fallback
   ========================= */
.slider-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #999;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 40px 20px;
}

/* =========================
   Focus-Ring auf Slider (Keyboard-Scope)
   ========================= */
.slider:focus-visible {
    outline: 3px solid #11b6b0;
    outline-offset: 4px;
    border-radius: 12px;
}
.slider:focus:not(:focus-visible) {
    outline: none;
}