/* kerrassel Carousel Styles */
.kerrassel-carousel-container {
    position: relative;
    overflow: hidden;
}
.kerrassel-carousel {
    position: relative;
    overflow: hidden;
}
.kerrassel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}
.kerrassel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1;
}
.kerrassel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.kerrassel-slide.leaving {
	opacity: 0;
    /* This slide will fade out below the new active slide */
}
.kerrassel-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; /* <-- IMPORTANT: Added to position the caption */
}
.kerrassel-slide-image {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Arrow styles */
.kerrassel-arrow {
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}
.kerrassel-arrow:hover {
    color: rgba(255, 255, 255, 1);
    background:rgba(0,0,0,0.2);
}
.kerrassel-arrow-prev {
    left: 0;
}
.kerrassel-arrow-next {
    right: 0;
}
.kerrassel-arrow svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7));
}

/* Button styles */
.kerrassel-buttons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.kerrassel-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.kerrassel-button.active {
    background-color: rgba(255, 255, 255, 1);
}

/* Transition styles */
/* Base transition properties for all non-fade slides */
.kerrassel-carousel[class*="transition-"] .kerrassel-slide {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Ensure fade transition only affects opacity */
.kerrassel-carousel.transition-fade .kerrassel-slide {
    transform: none !important;
}

/* --- Slide Left (sl) --- */
.kerrassel-carousel.transition-sl .kerrassel-slide.active { transform: translateX(0); z-index: 3; }
.kerrassel-carousel.transition-sl .kerrassel-slide.leaving { transform: translateX(-100%); z-index: 2; }

/* --- Slide Right (sr) --- */
.kerrassel-carousel.transition-sr .kerrassel-slide.active { transform: translateX(0); z-index: 3; }
.kerrassel-carousel.transition-sr .kerrassel-slide.leaving { transform: translateX(100%); z-index: 2; }

/* --- Slide Up (su) --- */
.kerrassel-carousel.transition-su .kerrassel-slide.active { transform: translateY(0); z-index: 3; }
.kerrassel-carousel.transition-su .kerrassel-slide.leaving { transform: translateY(-100%); z-index: 2; }

/* --- Slide Down (sd) --- */
.kerrassel-carousel.transition-sd .kerrassel-slide.active { transform: translateY(0); z-index: 3; }
.kerrassel-carousel.transition-sd .kerrassel-slide.leaving { transform: translateY(100%); z-index: 2; }

/* --- Diagonal Down Left-to-Right (ddlr) --- */
.kerrassel-carousel.transition-ddlr .kerrassel-slide.active { transform: translate(0, 0); z-index: 3; }
.kerrassel-carousel.transition-ddlr .kerrassel-slide.leaving { transform: translate(100%, 100%); z-index: 2; }

/* --- Diagonal Up Left-to-Right (dulr) --- */
.kerrassel-carousel.transition-dulr .kerrassel-slide.active { transform: translate(0, 0); z-index: 3; }
.kerrassel-carousel.transition-dulr .kerrassel-slide.leaving { transform: translate(100%, -100%); z-index: 2; }

/* --- Diagonal Down Right-to-Left (ddrl) --- */
.kerrassel-carousel.transition-ddrl .kerrassel-slide.active { transform: translate(0, 0); z-index: 3; }
.kerrassel-carousel.transition-ddrl .kerrassel-slide.leaving { transform: translate(-100%, 100%); z-index: 2; }

/* --- Diagonal Up Right-to-Left (durl) --- */
.kerrassel-carousel.transition-durl .kerrassel-slide.active { transform: translate(0, 0); z-index: 3; }
.kerrassel-carousel.transition-durl .kerrassel-slide.leaving { transform: translate(-100%, -100%); z-index: 2; }

/* kerrassel.css - Updated Controls and Anchoring */
.kerrassel-controls {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Corner Anchors (with margin) --- */
.kerrassel-anchor-tl .kerrassel-controls { top: 20px; left: 50px; }
.kerrassel-anchor-tr .kerrassel-controls { top: 20px; right: 50px; }
.kerrassel-anchor-bl .kerrassel-controls { bottom: 20px; left: 50px; }
.kerrassel-anchor-br .kerrassel-controls { bottom: 20px; right: 50px; }

/* --- Edge-Center Anchors --- */
.kerrassel-anchor-tc .kerrassel-controls { top: 20px; left: 50%; transform: translateX(-50%); }
.kerrassel-anchor-bc .kerrassel-controls { bottom: 20px; left: 50%; transform: translateX(-50%); }
.kerrassel-anchor-ml .kerrassel-controls { top: 50%; left: 50px; transform: translateY(-50%); }
.kerrassel-anchor-mr .kerrassel-controls { top: 50%; right: 50px; transform: translateY(-50%); }

/* --- Hide Arrows if they would overlap --- */
.kerrassel-anchor-ml .kerrassel-arrow-prev,
.kerrassel-anchor-mr .kerrassel-arrow-next {
    display: none;
}

/* --- Play/Pause Button and Timer --- */
.kerrassel-btn-play {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
    opacity:.2;
    z-index:10000;
}

.kerrassel-btn-play:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    opacity:1;
}

.kerrassel-btn-play svg {
    width: 24px;
    height: 24px;
    fill: white;
    position: absolute;
    transition: opacity 0.2s;
}

.kerrassel-icon-pause { opacity: 0; }
.kerrassel-carousel.is-playing .kerrassel-icon-play { opacity: 0; }
.kerrassel-carousel.is-playing .kerrassel-icon-pause { opacity: 1; }

/* --- Progress Ring Timer --- */
.kerrassel-timer-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9900;
}

.kerrassel-timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform-origin:center;
    overflow:visible;
}

.kerrassel-timer-circle {
    stroke: rgba(255, 255, 0, 1);
    stroke-width: 3;
    fill: none;
    
    /* This is the magic for the progress ring */
    stroke-dasharray: 157; /* 2 * PI * ~25 (radius) */
    stroke-dashoffset: 157; /* Start with the circle fully "drawn" (i.e., invisible) */
    
    /* The transition will be controlled by JavaScript */
    transition: stroke-dashoffset linear;
}

/* --- NEW: Caption Styles --- */
.kerrassel-caption {
    position: absolute;
/*
    bottom: 0;
    left: 0;
*/
    width: 100%;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: white;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
    
    /* --- Animation Setup --- */
    /* 1. Start slightly below its final position */
    transform: translateX(20px); 
    
    /* 2. Hide by default */
    opacity: 0;
    visibility: hidden;
    
    /* 3. Define the transition for all animating properties */
    transition: opacity 0.3s ease-out, transform 6s ease-out, visibility 0.6s ease-out;
}

/* Show caption only when the parent slide is active */
.kerrassel .kerrassel-slide.active .kerrassel-caption {
    /* 1. Move to its final, natural position */
    transform: translateX(0);
    
    /* 2. Make it visible */
    opacity: 1;
    visibility: visible;
}
.kerrassel .kerrassel-caption.kerrassel-caption-style-float{
	width:auto;
	height:auto;
}

.kerrassel .kerrassel-caption .kerrassel-big-caption{
	font-family: Roboto, Geneva, Calibri, "Trebuchet MS", "Sans Serif";
	font-size: xxx-large;
	font-weight:bold;
    line-height: 100%;
}
.kerrassel .kerrassel-caption .kerrassel-small-caption{
	font-family: Garamond, Cambria, Serif, Times, "Times New Roman", Bookman, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: x-large;
    line-height: 100%;
}
.kerrassel .kerrassel-caption.left{
	text-align:left;
}
.kerrassel .kerrassel-caption.center{
	text-align:center;
}
.kerrassel .kerrassel-caption.right{
	text-align:right;
}