.mod-mobilcarousel .carousel {
    max-width: var(--carousel-width);
}

.mod-mobilcarousel .carousel-item .card-img-top {
    height: var(--carousel-img-height);
    object-fit: cover;
}

.mod-mobilcarousel .carousel-item .card-body {
    height: var(--carousel-card-body-height);
    background-color: var(--carousel-bg-color);
    color: var(--carousel-color);
    overflow: hidden;
}

.mod-mobilcarousel .carousel-item .card-body .card-title a {
    color: var(--carousel-color)!important;
}

.mod-mobilcarousel .carousel-item .card-footer {
    background-color: var(--carousel-bg-footer)!important;
}

.mod-mobilcarousel .carousel-item .card-footer a.btn-primary {
    background-color: var(--carousel-bg-color-readmore)!important;
    color: var(--carousel-color-readmore)!important;
    border-color: var(--carousel-bg-color-readmore)!important;
}

.mod-mobilcarousel .carousel-item .card-footer a.btn-primary:hover {
    background-color: var(--carousel-color-readmore)!important;
    color: var(--carousel-bg-color-readmore)!important;
}

.mod-mobilcarousel .arrow-controls {
    display: flex;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

.mod-mobilcarousel .arrow-controls.right {
    justify-content: flex-end;
}

.mod-mobilcarousel .arrow-controls.left {
    justify-content: flex-start;
}

.mod-mobilcarousel .arrow-controls button {
    background-color: #003398;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
}

.mod-mobilcarousel .progress.h10 {
    height: 10px;
}

.mod-mobilcarousel .progress-bar {
    background-color: #003398!important;
}

.mod-mobilcarousel .carousel-item > .row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* flüssiges Scrollen auf iOS */
}

.mod-mobilcarousel .main-image {
    height: var(--carousel-main-img-height)!important;
}

.mod-mobilcarousel .carousel-item .card-footer a.badge {
    color: #fff!important;
}