/* ============================================================================
   Listimo Score-Ring — EINE Grafik für alle Seiten (06.09.2026).
   Anlass (Enes): „diese runde Leiste, wo der Scorewert steht, bei allen einheitlich —
   so wie auf der Startseite". Vorher gab es vier Bauarten (Startseite conic-Ring mit
   Leuchtkopf, Features/Angebot SVG-Bogen, Listing-Check eigener Ring mit Funken,
   Generator/Seller-Paket/Admin je eigene). Jetzt: dieses Stylesheet + score-ring.js.

   Markup (liefert ListimoScoreRing.markup(score) oder steht statisch im HTML):
     <div class="lsr" data-score="63">
       <i class="lsr-track"></i><i class="lsr-arc"></i><i class="lsr-capstart"></i>
       <i class="lsr-head"><i></i></i>
       <div class="lsr-mitte"><b>0</b><span>von 100</span></div>
     </div>
   Größe über --lsr-size (Standard 132px), Zahl und Strich skalieren mit.
   Farbe folgt der Bahn (Rot am Start unten → Orange → Gelb → Kopf); die Kopffarbe
   hängt am Score: ab 60 grün, 40–59 gelb, darunter rot — ein 20er-Score bekommt
   keinen grünen Leuchtkopf. Animation: der Bogen läuft per CSS-Transition der
   registrierten Eigenschaften, die Zahl zählt per Skript synchron hoch (1,7 s),
   am Ende rastet sie mit einem kurzen Puls ein. Ohne @property (alte Safari)
   springt der Ring auf den Endzustand — Zahl und Farbe stimmen trotzdem.
   ============================================================================ */
@property --lsr-p { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --lsr-d { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.lsr {
  position: relative; width: var(--lsr-size, 132px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center; box-sizing: border-box;
  --lsr-p: 0%; --lsr-d: 0deg;
  --lsr-strich: calc(var(--lsr-size, 132px) * .083);
  --lsr-kopf: #34c759; --lsr-glow: rgba(52,199,89,.75);
  --lsr-grund: rgba(0,0,0,.07); --lsr-loch: #fff; --lsr-text: inherit; --lsr-sub: #6e6e73;
  transition: --lsr-p 1.7s cubic-bezier(.16,.84,.3,1), --lsr-d 1.7s cubic-bezier(.16,.84,.3,1);
}
.lsr.in { --lsr-p: var(--lsr-ziel-p, 0%); --lsr-d: var(--lsr-ziel-d, 0deg); }
.lsr.sofort { transition: none; }

.lsr-track, .lsr-arc {
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lsr-strich)), #000 calc(100% - var(--lsr-strich) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--lsr-strich)), #000 calc(100% - var(--lsr-strich) + 1px));
}
.lsr-track { background: var(--lsr-grund); }
.lsr-arc { background: conic-gradient(from 0deg, #ff453a 0%, #ff9f0a calc(var(--lsr-p) * .42), #ffd60a calc(var(--lsr-p) * .72), var(--lsr-kopf) var(--lsr-p), transparent var(--lsr-p)); }
/* Kopffarbe nach Score — der Verlauf endet in der Kopffarbe */
.lsr.ton-gelb { --lsr-kopf: #ffd60a; --lsr-glow: rgba(255,214,10,.75); }
.lsr.ton-gelb .lsr-arc { background: conic-gradient(from 0deg, #ff453a 0%, #ff9f0a calc(var(--lsr-p) * .55), var(--lsr-kopf) var(--lsr-p), transparent var(--lsr-p)); }
.lsr.ton-rot { --lsr-kopf: #ff6a3a; --lsr-glow: rgba(255,106,58,.7); }
.lsr.ton-rot .lsr-arc { background: conic-gradient(from 0deg, #ff453a 0%, var(--lsr-kopf) var(--lsr-p), transparent var(--lsr-p)); }

/* runde Enden: fester roter Punkt am Start (12 Uhr), mitlaufender Leuchtkopf am Ende */
.lsr-capstart, .lsr-head > i {
  position: absolute; width: var(--lsr-strich); height: var(--lsr-strich); border-radius: 50%;
  left: calc(50% - var(--lsr-strich) / 2); top: 0;
}
.lsr-capstart { background: #ff453a; }
.lsr-head { position: absolute; inset: 0; transform: rotate(var(--lsr-d)); }
.lsr-head > i { background: var(--lsr-kopf); box-shadow: 0 0 0 3px var(--lsr-loch), 0 0 12px 3px var(--lsr-glow); opacity: 0; transition: opacity .35s ease .25s; }
.lsr.in .lsr-head > i { opacity: 1; animation: lsr-atmen 2.2s ease-in-out 1.9s infinite; }
@keyframes lsr-atmen {
  0%, 100% { box-shadow: 0 0 0 3px var(--lsr-loch), 0 0 12px 3px var(--lsr-glow); }
  50% { box-shadow: 0 0 0 3px var(--lsr-loch), 0 0 18px 6px var(--lsr-glow); }
}

/* Zahl + „von 100" als EIN zentrierter Block */
.lsr-mitte { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--lsr-text); }
.lsr-mitte b { font-size: calc(var(--lsr-size, 132px) * .285); font-weight: 750; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.lsr-mitte b.rast { animation: lsr-rast .55s cubic-bezier(.2,.9,.3,1.4); }
@keyframes lsr-rast { 0% { transform: scale(1); } 38% { transform: scale(1.16); } 100% { transform: scale(1); } }
.lsr-mitte span { font-size: max(9px, calc(var(--lsr-size, 132px) * .08)); color: var(--lsr-sub); font-weight: 650; margin-top: 4px; letter-spacing: .02em; }

/* Puls beim Einrasten: ein weicher Ring läuft nach außen, wenn der Bogen steht */
.lsr::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(255,159,10,.55); opacity: 0; transform: scale(.9); pointer-events: none; }
.lsr.in:not(.sofort)::before { animation: lsr-puls 1.1s ease-out 1.45s 1; }
@keyframes lsr-puls { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.32); } }

/* Auf dunklem Grund (Loch und Spur passen sich an) */
.lsr.dunkel { --lsr-loch: #12131a; --lsr-grund: rgba(255,255,255,.12); --lsr-text: #fff; --lsr-sub: rgba(255,255,255,.65); }

@media (prefers-reduced-motion: reduce) {
  .lsr, .lsr-head > i { transition: none; }
  .lsr.in .lsr-head > i, .lsr.in::before, .lsr-mitte b.rast { animation: none; }
}