/* Übernommen aus altem style.css: Slideshow, Medien, Spinner. Unverändert, nur Farbvariablen kommen aus fl-components.css */
.articleImg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    border-radius: 1rem;
    margin: 0;
}

.bigView {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.bigView img {
    padding: 15px 30px;
    width: 700px;
    max-width: 95%;
    border-radius: 1rem;
}

/*
|--------------------------------------------------------------------------
| LABELS
|--------------------------------------------------------------------------
*/

.single-label-container {
    max-width: 25%;
    margin: auto;
    display: flex;
    justify-content: center;
}

.label-warning {

    border-radius: 999px;

    padding: 15px 20px;

| SLIDESHOW
|--------------------------------------------------------------------------
*/

.slideshow-container {

    max-width: 85%;

    position: relative;

    border: solid 1px var(--fl-border);

    border-radius: 1rem;

    overflow: hidden;

    background: var(--fl-surface);

    margin: auto;
}

.mySlides {
    display: none;
}

.mySlides img {
    border-radius: 1rem;
}

.prev,
.next {

    background-color: rgba(0,0,0,0.3);

    cursor: pointer;

    position: absolute;

    top: 50%;

    width: auto;

    margin-top: -22px;

    padding: 20px;

    color: white;

    font-weight: bold;

    font-size: 18px;

    transition: 0.3s ease;

    border-radius: 0 12px 12px 0;

    user-select: none;
}

.next {
    right: 0;
    border-radius: 12px 0 0 12px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0,0,0,0.7);
}

.text {
    color: white;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.numbertext {
    color: darkslategray;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    /*background-color: #bbb;*/
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    /*background-color: #717171;*/
}

.fade {
    animation: fadeInUp 0.5s ease;
}

/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

a {
    text-decoration: none;
    transition: 0.2s ease;
.wipFeatureLine {
    width: 100%;
    padding: 10px;
    background: rgba(255,255,255,0.04);
    text-align: center;
    border-radius: 1rem;
}

.picdesc {
    font-size: 0.8rem;
}

.complexResArtBg {
    background: rgba(59,130,246,0.12);
    border-radius: 1rem;
}

ul li {
    list-style-type: disc;
}

.article-content ul li img {
@keyframes fadeInUp {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cspinner-container {
    width: 50px; /* Passe die Größe nach Bedarf an */
    height: 50px; /* Passe die Größe nach Bedarf an */
    border-radius: 50%; /* Macht den Container rund */
}

/* Spinner Elemente (Kreise) */
.cspinner {
    width: 10px;      /* Größe der Kreise */
    height: 10px;     /* Größe der Kreise */
    background-color: #3498db; /* Farbe der Kreise */
    border-radius: 50%;  /* Macht die Kreise rund */
    position: absolute;   /* Positioniert relativ zum Container */
    animation: cspin 1s linear infinite;
}

/* Animation */
@keyframes cspin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }