Flask pyScss svg-call via url() not working

Question

I'm trying to implement a Flask-Backend to an already existing Frontend. I got most of the things working. Right now I'm stuck with a quite difficult problem. on the website there is a star-rating which should look something like that:

The problem is that the stars are not shown on the flask-App:

I noticed, that if I hover the flask-version of the star-svg-url in the dev-tools of my browsers (edge & chrome), no popup-image of the svg appears whereas in the old version the image pops up:

not-Flask-Version:

Flask-Version:

I could not find any differences in the dev-tools whatsoever. I found, that the CSS variables are not translated correctly from the scss file:

it looks like the variables are being transformed into strings...

Does anyone have a clue what my problem could be?

HTML:

<div class="puzzle-card">
    <div class="puzzle-card__stripe">&nbsp;</div>
    <h4 class="puzzle-card__number">4</h4>
    <ul>
        <li><span class="puzzle-card__heading">Difficulty</span></li>
        <li><input class="puzzle-card__rating"
            max="5"
            step="0.1"
            style="--value:5"
            type="range"
            disabled>
        </li>
        <li><span class="puzzle-card__heading">Fastest:</span></li>
        <li>User</li>
        <li><span class="puzzle-card__heading">Average time:</span></li>
        <li>15 min</li>
    </ul>
</div>
                

SCSS:

.puzzle-card__rating{
    --dir: right;
    --fill: rgb(255, 238, 0);
    --fillbg: rgba(100, 100, 100, 0.15);
    --star: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>);
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    -webkit-appearance: none;
  
  [dir="rtl"] & {
    --dir: left;
  }
  &::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
  }
  &::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
  }
  &::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
  }
  &::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
  }
  &--nojs::-moz-range-track {
    background: var(--fillbg);
  }
  &--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
  }
  &--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
  }
  &--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
  }
  [dir="rtl"] &--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
  }
}

FLASK:

from flask import Flask, render_template
from flask_assets import Environment, Bundle

app = Flask(__name__)

assets = Environment(app)
assets.url = app.static_url_path
""" assets.debug = True """

scss = Bundle(
    'sass/main.scss',
    filters='pyscss',
    depends=('sass/**/*.scss'),
    output='gen/all.css')
assets.register('scss_all', scss)


@app.route('/')
def hello_world():
    return render_template('index.html')