/* ================================
   GRUNDSTRUKTUR
================================ */

.bestrotation-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    text-align: center;
/* Feste Höhe wird per JS gesetzt */
    min-height: 50px; /* Fallback */
    margin: 0 auto 20px; /* Abstand nach unten */
    contain: content; /* Performance-Optimierung */
}

/* Alle Slides auf absolute Positionierung und volle Breite */
.bestrotation-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    opacity: 0;
    /* Wichtig: Keine Margin/Padding, das die Höhe beeinflusst */
    margin: 0;
    padding: 0;
}

/* Aktives Slide */
.bestrotation-item-active {
    position: relative;
    display: block;
    opacity: 1;
    animation: none !important;
}

/* Bildformatierung */
.bestrotation-image {
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 100%;
}

/* Text unter Bildern */
.bestrotation-text {
    margin-top: 0.6em;
    line-height: 1.3;
}


/* ================================
   CSS-ANIMATIONEN
   bro-* Klassen
================================ */

/* ---------- FADE ---------- */

.bro-fade-in {
    animation: broFadeIn 0.6s ease-out forwards;
}
.bro-fade-out {
    animation: broFadeOut 0.6s ease-out forwards;
}

@keyframes broFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes broFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* ---------- ZOOM ---------- */

.bro-zoom-in {
    animation: broZoomIn 0.6s ease-out forwards;
}
.bro-zoom-out {
    animation: broZoomOut 0.6s ease-out forwards;
}

@keyframes broZoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes broZoomOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.1); }
}


/* ---------- SLIDE HORIZONTAL ---------- */

.bro-slide-in-left {
    animation: broSlideInLeft 0.6s ease-out forwards;
}
.bro-slide-out-right {
    animation: broSlideOutRight 0.6s ease-out forwards;
}

.bro-slide-in-right {
    animation: broSlideInRight 0.6s ease-out forwards;
}
.bro-slide-out-left {
    animation: broSlideOutLeft 0.6s ease-out forwards;
}

@keyframes broSlideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes broSlideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

@keyframes broSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes broSlideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}


/* ---------- SLIDE VERTIKAL ---------- */

.bro-slide-in-up {
    animation: broSlideInUp 0.6s ease-out forwards;
}
.bro-slide-out-down {
    animation: broSlideOutDown 0.6s ease-out forwards;
}

.bro-slide-in-down {
    animation: broSlideInDown 0.6s ease-out forwards;
}
.bro-slide-out-up {
    animation: broSlideOutUp 0.6s ease-out forwards;
}

@keyframes broSlideInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes broSlideOutDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(40px); }
}

@keyframes broSlideInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes broSlideOutUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-40px); }
}


/* ---------- ROTATE ---------- */

.bro-rotate-in {
    animation: broRotateIn 0.6s ease-out forwards;
}
.bro-rotate-out {
    animation: broRotateOut 0.6s ease-out forwards;
}

@keyframes broRotateIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes broRotateOut {
    from { opacity: 1; transform: rotate(0deg) scale(1); }
    to   { opacity: 0; transform: rotate(10deg) scale(0.9); }
}

/* ----- Fade ----- */
.bro-fade-in { animation: broFadeIn var(--dur-in,0.6s) ease-out forwards; }
.bro-fade-out { animation: broFadeOut var(--dur-out,0.6s) ease-in forwards; }

@keyframes broFadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes broFadeOut { from {opacity:1;} to {opacity:0;} }

/* ----- Zoom ----- */
.bro-zoom-in { animation: broZoomIn var(--dur-in,0.6s) ease-out forwards; }
.bro-zoom-out { animation: broZoomOut var(--dur-out,0.6s) ease-in forwards; }

@keyframes broZoomIn { from{opacity:0; transform:scale(0.8);} to{opacity:1; transform:scale(1);} }
@keyframes broZoomOut { from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(0.8);} }

/* ----- Slide OUT ----- */
.bro-slide-out-left  { animation: slideOutLeft  var(--dur-out,0.6s) ease-in forwards; }
.bro-slide-out-right { animation: slideOutRight var(--dur-out,0.6s) ease-in forwards; }
.bro-slide-out-up    { animation: slideOutUp    var(--dur-out,0.6s) ease-in forwards; }
.bro-slide-out-down  { animation: slideOutDown  var(--dur-out,0.6s) ease-in forwards; }

/* ----- Slide IN ----- */
.bro-slide-in-left  { animation: slideInLeft  var(--dur-in,0.6s) ease-out forwards; }
.bro-slide-in-right { animation: slideInRight var(--dur-in,0.6s) ease-out forwards; }
.bro-slide-in-up    { animation: slideInUp    var(--dur-in,0.6s) ease-out forwards; }
.bro-slide-in-down  { animation: slideInDown  var(--dur-in,0.6s) ease-out forwards; }

/* Keyframes für Slide */
@keyframes slideInLeft   { from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInRight  { from{opacity:0; transform:translateX(40px);}  to{opacity:1; transform:translateX(0);} }
@keyframes slideInUp     { from{opacity:0; transform:translateY(40px);}  to{opacity:1; transform:translateY(0);} }
@keyframes slideInDown   { from{opacity:0; transform:translateY(-40px);} to{opacity:1; transform:translateY(0);} }

@keyframes slideOutLeft  { from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(-40px);} }
@keyframes slideOutRight { from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(40px);} }
@keyframes slideOutUp    { from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-40px);} }
@keyframes slideOutDown  { from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(40px);} }