:root{
    --size: 90px;               /* Durchmesser des Kreises */
    --stroke: 10px;             /* Dicke des Fortschritts-Balkens */
    --bg:  #e0e0e0;             /* Farbe für Hintergrundspur */
    --fg:#093;            	/* Fortschrittsfarbe */
    --text: #0b2545;
    --shadow: 0 6px 18px rgba(10,20,40,0.12);
  }


/* Container unten rechts */
  .scroll-progress {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: var(--size);
    height: var(--size);
    display: inline-grid;
    place-items: center;
    z-index: 9999;
    cursor: pointer;
    user-select: none;
  }

  .progress-outer{
    width:100%;
    height:100%;
    border-radius:50%;
/*    background:#fff;*/
    box-shadow: var(--shadow);
    display:grid;
    place-items:center;
    position:relative;
  }

  .scroll-progress svg { 
    width: calc(var(--size) - 12px);
    height: calc(var(--size) - 12px);
    transform: rotate(-90deg);
  }

  .progress-bg {
    stroke: var(--bg);
    stroke-width: var(--stroke);
    fill: none;
  }

  .progress-fg {
    stroke: var(--fg);
    stroke-width: var(--stroke);
    stroke-linecap: butt;   /* gerade Enden => Balken */
    fill: none;
    transition: stroke-dashoffset 200ms linear;
  }

  .progress-label {
    position: absolute;
    width: var(--size);
    height: var(--size);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    font-weight:600;
    font-size:1.2rem;
    color:var(--fg);
  }
  
  
@media (max-width: 767px) {  
	.scroll-progress { display:none; }
}