/* /Pages/Components/CustomCarouselComponent.razor.rz.scp.css */
.custom-carousel[b-vkq035y1u5] {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

/* Die Breite ist immer fest (100% der Spalte). Die Höhe soll dagegen immer
   exakt zum aktuell angezeigten Bild passen (kein Zuschneiden/Verzerren),
   auch wenn Bilder desselben Karussells unterschiedliche Höhen haben.
   Deshalb liegt nur das aktive Item im normalen Dokumentfluss - es allein
   bestimmt die Höhe von .custom-carousel-items (und damit der Kachel
   darum), sodass beim Bildwechsel nichts überlappt. Die übrigen Items
   werden absolut positioniert und beeinflussen die Höhe nicht; sie sind
   nur während der Wechsel-Animation (z.B. Fade) sichtbar. */
.custom-carousel-items[b-vkq035y1u5] {
    position: relative;
    width: 100%;
}

.custom-carousel-item[b-vkq035y1u5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.custom-carousel-item.active[b-vkq035y1u5] {
    position: relative;
}

/* Bilder werden standardmäßig in voller Breite und im Originalseitenverhältnis
   dargestellt - kein Zuschneiden (object-fit) und keine Verzerrung. Ist für
   die Kachel eine maximale Höhe konfiguriert (siehe TileComponent.razor),
   wird das per Inline-Style width:auto überschrieben und das Bild stattdessen
   proportional verkleinert; margin:0 auto zentriert es dann horizontal. */
.custom-carousel-item[b-vkq035y1u5]  img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.custom-carousel-item.effect-fade[b-vkq035y1u5] {
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.custom-carousel-item.effect-fade.active[b-vkq035y1u5] {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.custom-carousel-item.effect-slide[b-vkq035y1u5] {
    transition: transform 500ms ease-in-out;
    opacity: 1;
    pointer-events: none;
}

.custom-carousel-item.effect-slide.active[b-vkq035y1u5] {
    pointer-events: auto;
    z-index: 1;
}

.custom-carousel-nav[b-vkq035y1u5] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}

.custom-carousel:hover .custom-carousel-nav[b-vkq035y1u5],
.custom-carousel:focus-within .custom-carousel-nav[b-vkq035y1u5] {
    opacity: 1;
}

.custom-carousel-nav:hover[b-vkq035y1u5] {
    background: rgba(0, 0, 0, 0.6);
}

.custom-carousel-prev[b-vkq035y1u5] {
    left: 8px;
}

.custom-carousel-next[b-vkq035y1u5] {
    right: 8px;
}

.custom-carousel-indicators[b-vkq035y1u5] {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 5;
}

.custom-carousel-indicator[b-vkq035y1u5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease-in-out, transform 200ms ease-in-out;
}

.custom-carousel-indicator:hover[b-vkq035y1u5] {
    background: rgba(255, 255, 255, 0.8);
}

.custom-carousel-indicator.active[b-vkq035y1u5] {
    background: #fff;
    transform: scale(1.2);
}

.custom-carousel-playpause[b-vkq035y1u5] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
    font-size: 11px;
}

.custom-carousel:hover .custom-carousel-playpause[b-vkq035y1u5],
.custom-carousel:focus-within .custom-carousel-playpause[b-vkq035y1u5] {
    opacity: 1;
}

.custom-carousel-playpause:hover[b-vkq035y1u5] {
    background: rgba(0, 0, 0, 0.6);
}