.uk-progress-primary {
    animation: progress-fill 6s ease-in-out forwards; /* 6 Sekunden */
}

/* Äußeren Rahmen (grauer Bereich) anpassen */
.uk-progress {
    height: 44px !important; /* Höhe des gesamten Balkens */
    border-radius: 10px; /* Optional: Abgerundete Ecken */
    overflow: hidden; /* Verhindert Überlauf */
    background-color: #f5f5f5; /* Hintergrundfarbe (grauer Bereich) */
}

/* Gefüllten Bereich (innerer Fortschritt) anpassen */
.uk-progress progress {
    height: 44px !important; /* Gleiche Höhe wie der Rahmen */
    border-radius: 10px; /* Passt sich der äußeren Form an */
}


@keyframes progress-fill {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.uk-card {
    margin-bottom: 20px;
}

.uk-list-divider li {
    margin: 10px 0;
    font-size: 16px;
}

/* Fortschrittsbalken-Container */
.uk-progress-container {
    position: relative;
    margin: 20px 0;
}

/* Labels für 0% und 100% */
.uk-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 5px;
    color: #666; /* Optional: Farbe für die Labels */
}

.uk-progress-start,
.uk-progress-end {
    position: relative;
}

/* Prozentanzeige im Hintergrund */
.uk-progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 23rem; /* Große Schrift */
    font-weight: bold; /* Fettschrift */
    color: var(--uk-color-muted, #999); /* UIkit muted Farbe */
    opacity: 0.1; /* Transparenz, um im Hintergrund dezent zu bleiben */
    z-index: 0; /* Hinter den Fortschrittsbalken */
    pointer-events: none; /* Nicht interaktiv */
}

/* Für kleinere Ansichten (ab 960px und kleiner) */
@media (max-width: 960px) {
    .uk-progress-percentage {
        font-size: 11rem; /* Reduzierte Schriftgröße */
    }
}

.uk-titel-spenden {
    font-size: 5rem !important;
    line-height: 1.4;
    font-family: Inter;
    font-weight: 500;
}

.uk-titel-spenden {
    font-size: 5rem !important;
    line-height: 1.4;
    font-family: Inter;
    font-weight: 500;
}

/* Für kleinere Ansichten (bis 960px und kleiner) */
@media (max-width: 960px) {
    .uk-titel-spenden {
        font-size: 2.5rem !important; /* 50% der Originalgröße */
    }
}

.badge-overlay2 {
    position: absolute; /* Absolute Positionierung, damit es sich unabhängig bewegt */
    top: -25px;
    left: -90px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    font-size: 22px;
    font-weight: bold;
    padding: 5px 10px;
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    transform: rotate(-30deg) !important; /* Neigung des Badges */
    transform-origin: center;
    border-radius: 5px; /* Abgerundete Ecken */
    z-index: 1; /* Über dem Inhalt */
    display: inline-block; /* Stellt sicher, dass das Badge korrekt gerendert wird */
}

/* Für kleinere Bildschirme (unter 960px) */
@media (max-width: 960px) {
    .badge-overlay2 {
        top: -30px; /* Angepasste Position für kleinere Bildschirme */
        left: -70px; /* Angepasste horizontale Position */
        font-size: 18px; /* Kleinere Schriftgröße */
        padding: 3px 8px; /* Reduziertes Padding */
    }
}