/* Modernere Lösung mit CSS Custom Properties */
.star-rating {
    --rating: 0;
    --star-size: 20px;
    --star-color: #ffc107;
    --star-background: #ddd;

    display: inline-block;
    font-size: var(--star-size);
    line-height: 1;
    margin-right: 10px;
    font-family: Arial, sans-serif;
}

.star-rating::before {
    content: "★★★★★";
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--star-color) calc(var(--rating) * 20%), var(--star-background) calc(var(--rating) * 20%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

div.note-klein .star-rating {
    --star-size: 11px;
}

div.note-klein .star-rating::before {
    letter-spacing: 0 !important;
}

/* Spezifische Rating-Klassen für die moderne Lösung */
.rating-1 { --rating: 1; }
.rating-1-5 { --rating: 1.5; }
.rating-2 { --rating: 2; }
.rating-2-5 { --rating: 2.5; }
.rating-3 { --rating: 3; }
.rating-3-5 { --rating: 3.5; }
.rating-4 { --rating: 4; }
.rating-4-5 { --rating: 4.5; }
.rating-5 { --rating: 5; }