/**
 * Skeleton-Platzhalter beim Laden von Home-Feed und Messenger-Liste.
 */
@keyframes app-skeleton-welle {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.app-skeleton-basis {
  background: linear-gradient(
    90deg,
    var(--oberflaeche, #1f232d) 0%,
    var(--oberflaeche-erhoeht, #262b36) 45%,
    var(--oberflaeche, #1f232d) 90%
  );
  background-size: 200% 100%;
  animation: app-skeleton-welle 1.3s ease-in-out infinite;
  border-radius: 12px;
}

.app-skeleton-story {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin-right: 10px;
}

.app-skeleton-reel-karte {
  width: 100%;
  min-height: calc(100vh - 78px - env(safe-area-inset-bottom));
  border-radius: 0;
}

.app-skeleton-posteingang-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.app-skeleton-posteingang-zeile::before {
  content: '';
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.app-skeleton-posteingang-zeile::after {
  content: '';
  flex: 1 1 auto;
  height: 44px;
  border-radius: 10px;
}

.app-skeleton-posteingang-zeile::before,
.app-skeleton-posteingang-zeile::after,
.app-skeleton-story,
.app-skeleton-reel-karte {
  background: linear-gradient(
    90deg,
    var(--oberflaeche, #1f232d) 0%,
    var(--oberflaeche-erhoeht, #262b36) 45%,
    var(--oberflaeche, #1f232d) 90%
  );
  background-size: 200% 100%;
  animation: app-skeleton-welle 1.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .app-skeleton-basis,
  .app-skeleton-story,
  .app-skeleton-reel-karte,
  .app-skeleton-posteingang-zeile::before,
  .app-skeleton-posteingang-zeile::after {
    animation: none;
    background: var(--oberflaeche-erhoeht, #262b36);
  }
}