/* pull-to-refresh.css — Pull-to-Refresh-Indikator (Mobile/Tablet).
 aus components.css extrahiert.

 Sitzt absolut im scrollbaren Container UNTERHALB der Toolbar, zentriert,
 kommt beim Pull nach unten aus dem Content. Design: kreisrunder Fluent-
 Spinner, Rotation proportional zum Pull (var --app-ptr-rot), Farbwechsel
 ab Threshold via .is-ready. Sichtbar nur auf Mobile/Tablet (Modul
 entscheidet viewport-seitig). */
.app-ptr-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -40px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  --app-ptr-rot: 0deg;
}
.app-ptr-spinner {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--lod-gray-200);
  border-top-color: var(--lod-darkblue);
  transform: rotate(var(--app-ptr-rot));
}
.app-ptr-indicator.is-ready .app-ptr-spinner {
  border-top-color: var(--lod-turquoise);
  transform: rotate(var(--app-ptr-rot)) scale(1.1);
  transition: border-top-color var(--duration-snappy) var(--ease-soft), transform var(--duration-snappy) var(--ease-soft);
}
.app-ptr-indicator.is-loading .app-ptr-spinner {
  border-top-color: var(--lod-darkblue);
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
}