/* =============================================================================
   Restaurant Werbe-Slider (Premium / Pro)
   =============================================================================
   - CSS scroll-snap fuer native Touch-Unterstuetzung auf iOS Safari (auch in
     WebView), Android Chrome, Desktop. Keine externen Libraries.
   - Pfeil-Buttons fuer Maus-Bedienung auf Desktop.
   - Auto-Slide via JS, pausiert bei Hover / Touch / Focus.
   - Voll responsiv: 1 Card auf Mobile, 2 auf Tablet, 3 auf Desktop.
   - ARIA-konform fuer Screenreader.
   ============================================================================= */

.restaurant-slider {
    position: relative;
    margin-bottom: 2rem;
    /* Auf groesseren Viewports etwas Innenabstand fuer die Pfeil-Buttons,
       damit sie ausserhalb der Cards liegen koennen. */
    padding: 0;
}

@media (hover: hover) and (min-width: 992px) {
    .restaurant-slider {
        padding: 0 24px;
    }
}

.restaurant-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.restaurant-slider__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.restaurant-slider__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.restaurant-slider__badge--premium {
    background: linear-gradient(135deg, #ffb700 0%, #ff7a00 100%);
    color: #fff;
}

.restaurant-slider__badge--pro {
    background: linear-gradient(135deg, #6c5ce7 0%, #4834d4 100%);
    color: #fff;
}

/* Viewport: das scrollbare Element.
   Padding-left/right verschafft den absolut positionierten Pfeil-Buttons
   Platz ausserhalb der Cards. */
.restaurant-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* iOS Safari: Smooth Momentum-Scrolling */
    -webkit-overflow-scrolling: touch;
    /* Scrollbar dezent verstecken — Slider hat eigene Indikatoren */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 8px 4px;
}

.restaurant-slider__viewport::-webkit-scrollbar {
    display: none;
}

/* Track: Flex-Container der Cards */
.restaurant-slider__track {
    display: flex;
    gap: 1rem;
    /* align-items: stretch sorgt dafuer, dass alle Cards in einer Slide-Reihe
       gleiche Hoehe haben (auch wenn eine Card weniger Content hat). */
    align-items: stretch;
}

/* Slide: einzelne Card. Fixe Mindestbreite verhindert Quetschen. */
.restaurant-slider__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    display: flex;
}

/* Das Card-Element innerhalb des Slide — fuellt Slide-Hoehe komplett aus. */
.restaurant-slider__slide-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Tablet: 2 Cards nebeneinander */
@media (min-width: 640px) {
    .restaurant-slider__slide {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* Desktop: 3 Cards nebeneinander */
@media (min-width: 992px) {
    .restaurant-slider__slide {
        flex: 0 0 calc(33.333% - 0.667rem);
    }
}

/* Pfeil-Buttons (nur auf Desktop sichtbar, Touch-Devices nutzen Wisch) */
.restaurant-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s ease, transform 0.15s ease;
    /* Min-Hit-Target 44x44 fuer Touch-Accessibility (Apple HIG) */
}

.restaurant-slider__arrow:hover:not([disabled]) {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.restaurant-slider__arrow:focus-visible {
    outline: 3px solid #ff7a00;
    outline-offset: 2px;
}

.restaurant-slider__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.restaurant-slider__arrow--prev {
    left: -8px;
}

.restaurant-slider__arrow--next {
    right: -8px;
}

/* Auf Desktop liegen die Pfeile im Padding-Bereich des Sliders selbst,
   ueberlappen die Cards also nicht mehr. */
@media (hover: hover) and (min-width: 992px) {
    .restaurant-slider__arrow--prev {
        left: -12px;
    }
    .restaurant-slider__arrow--next {
        right: -12px;
    }
}

/* Touch-Devices: Pfeile ausblenden — Wischen ist intuitiv. Maus-Hover-Capability
   wird via hover:none erkannt (iOS/Android Browser inkl. WebView). */
@media (hover: none) {
    .restaurant-slider__arrow {
        display: none;
    }
}

/* Punkt-Indikatoren unter dem Slider */
.restaurant-slider__indicators {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.restaurant-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.restaurant-slider__dot:hover {
    background: #94a3b8;
}

.restaurant-slider__dot--active {
    background: #ff7a00;
    transform: scale(1.3);
}

.restaurant-slider__dot:focus-visible {
    outline: 2px solid #ff7a00;
    outline-offset: 2px;
}

/* Empty-State (kein Partner mit diesem Tier) — Sektion komplett ausblenden */
.restaurant-slider[data-empty="true"] {
    display: none;
}

/* Reduced-Motion respektieren (System-Setting) */
@media (prefers-reduced-motion: reduce) {
    .restaurant-slider__viewport {
        scroll-behavior: auto;
    }
    .restaurant-slider__arrow,
    .restaurant-slider__dot {
        transition: none;
    }
}