:root {
  --sat: env(safe-area-inset-top);
}

/* Overlay: als eigener Compositing-Layer */
.ptr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  transform: translate3d(0, -72px, 0); /* initial versteckt */
  opacity: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;
  pointer-events: none;

  /* Performance-Tweaks */
  will-change: transform, opacity;
  contain: paint;
  backface-visibility: hidden;

  /* CI-Hintergrund leicht transparent */
  background: linear-gradient(to bottom, rgba(227,20,18,.98), rgba(227,20,18,.92));
  color: #fff;
  padding-top: var(--sat, 0);

  /* keine CSS-Transitions auf transform/opacity -> wir rendern per rAF */
}

/* Inhalt leichtgewichtig */
.ptr__inner {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Spinner: Animation standardmäßig pausiert → weniger CPU.
   Wird nur beim Ziehen/Refresh aktiviert. */
.ptr__spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: ptr-spin 1s linear infinite;
  animation-play-state: paused;
}

.ptr[data-anim="pull"] .ptr__spinner,
.ptr.ptr--refreshing .ptr__spinner {
  animation-play-state: running;
}

.ptr.ptr--refreshing {
  opacity: 1 !important; /* fixiert beim Refresh */
}

@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark) {
  .ptr {
	background: linear-gradient(to bottom, rgba(181,15,14,.98), rgba(181,15,14,.92));
  }
}