/* =========================================================
   Bildslider (Tiny Slider)
   ========================================================= */

.imageslider__track {
    display: flex;
}

.imageslider__slide {
    position: relative;
}

.imageslider__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--image-radius, 0);
}

.imageslider__caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text, inherit);
}

/* Steuerungsleiste unterhalb des Bildes:
   Pfeil links — Punkte mittig — Pfeil rechts.

   Die Akzentfarbe wird hier zentral als `color` gesetzt und von Pfeilen
   und Dots ausschließlich über `currentColor` übernommen. Sitzt der
   Slider auf einem farbigen Hintergrund (tx_basepackage_background),
   überschreibt die bereits vorhandene Regel `.frame-background-* * {
   color: inherit !important; }` (siehe _container.css) diese Farbe
   automatisch mit der passenden Kontrastfarbe – Pfeile und Dots bleiben
   dadurch auf jedem Hintergrund lesbar, ohne dass wir die konkrete
   Hintergrundfarbe hier kennen müssten. */
.imageslider__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--color-primary, currentColor);
}

.imageslider__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.imageslider__arrow:hover,
.imageslider__arrow:focus-visible {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
}

.imageslider__arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.imageslider__arrow[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.imageslider__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Punktnavigation (Dots) */
.imageslider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.imageslider__dots .imageslider__dot {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.imageslider__dots .imageslider__dot:hover {
    opacity: 0.6;
}

.imageslider__dots .imageslider__dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.imageslider__dots .imageslider__dot.tns-nav-active {
    opacity: 1;
    transform: scale(1.2);
}