/* ==========================================================================
   SLIDER/CAROUSEL SYSTEM
   ========================================================================== */

/* Slider Container */
.slider-containercss {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    transition: opacity 0.5s ease-in;
    border-radius: 0;
    opacity: 0; /* Initial versteckt für den Fade-In-Effekt */
}

.slidercss {
    display: flex;
    transition: transform 0.5s ease;
}

.slidecss {
    min-width: 100%;
    overflow: hidden;
    border-radius: 0;
}

.slidecss img {
    width: 100%;
    vertical-align: top;
    border-radius: 0;
}

/* Navigation Buttons */
.prevcss, .nextcss {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(221,210,197,1);
    color: #555555;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 10;
}

.prevcss a, .nextcss a {
    color: #555555;
    text-decoration: none;
}

.prevcss a:hover, .nextcss a:hover {
    color: white;
}

.prevcss:hover, .nextcss:hover {
    background: rgba(185,175,163,1);
}

/* Big Navigation Buttons (Full Height) */
.prevcssbig, .nextcssbig {
    position: absolute;
    top: 50%;
    width: 50%;
    height: 100%;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    cursor: default;
    transition: background-color 0.3s;
    opacity: 0;
}

.prevcssbig:hover, .nextcssbig:hover {
    opacity: 0.7;
}

/* Button Positioning */
.prevcss,
.prevcssbig {
    left: 0;
}

.nextcss,
.nextcssbig {
    right: 0;
}

/* Fade In Effect */
.slider-containercss.fade-in {
    opacity: 1;
}

/* Slider Images Table for Admin */
table.showsliderimages th, 
table.showsliderimages td {
    position: relative;
    padding-right: 1rem;
}

table.showsliderimages th:last-of-type, 
table.showsliderimages td:last-of-type {
    padding-right: 0;
}

/* Image Positioning Classes */
.imgwrap.imgleft {
    padding-left: 1rem;
}

.imgwrap.imgright {
    padding-right: 1rem;
}

div.imgright div.slider-containercss div.slidecss img {
    margin-left: 0;
}

div.imgleft div.slider-containercss div.slidecss img {
    margin-right: 0;
}

div.imgright div.slider-containercss {
    margin-left: 1rem;
    float: right;
}

div.imgleft div.slider-containercss {
    margin-right: 1rem;
    float: left;
}

/* Slider in Link Wrappers */
div.linkwrap a div.slider-containercss button {
    opacity: 0;
}

/* Notitle Articles */
article.notitle div.imgwrap.imgleft,
article.notitle div.imgwrap.imgright {
    padding-top: 1rem;
}

/* Slider Indicators/Dots */
.slider-dots {
    text-align: center;
    padding: 10px 0;
}

.slider-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.active {
    background-color: rgba(221,210,197,1);
}

.slider-dot:hover {
    background-color: rgba(185,175,163,1);
}

/* Responsive Slider */
@media screen and (max-width: 768px) {
    .prevcss, .nextcss {
        padding: 8px;
        font-size: 14px;
    }
    
    .prevcssbig, .nextcssbig {
        width: 30%;
    }
    
    .slider-dot {
        width: 10px;
        height: 10px;
    }
}

/* Auto-play Animation */
@keyframes slideNext {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.slider-autoplay .slidercss {
    animation: slideNext 0.5s ease-in-out;
}