/* Pawol-Logo als Ladeanimation (Phil 28.10.2026: «dass einfach das Logo von Pawol sich bewegt, 2D, wie bei der Sanduhr»).
   Die weisse Marke (assets/pawol-mark-white.png) ist die Maske; darin läuft wie in einer Sanduhr ein Band in der Akzentfarbe
   von unten nach oben durch: die Marke füllt sich, hält kurz, leert sich nach oben, dazu atmet sie leicht. Darunter liegt die
   Marke blass als Geist, damit die Form immer lesbar bleibt. Grösse über --pl-size (Breite), Seitenverhältnis 393:295.
   Farben über --a/--a2 des Mandanten. Einsatz: ladescreen.html (Auswertung), vorbereitung.html (Prep), index.html (Coach). */
.pawol-lade { position: relative; width: var(--pl-size, 96px); aspect-ratio: 393 / 295; flex-shrink: 0; overflow: hidden;
  -webkit-mask: url("../assets/pawol-mark-white.png") center / contain no-repeat; mask: url("../assets/pawol-mark-white.png") center / contain no-repeat;
  animation: plAtmen 2.8s ease-in-out infinite; }
.pawol-lade::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .16; }
.pawol-lade .f { position: absolute; left: 0; right: 0; top: 0; height: 300%;
  background: linear-gradient(to top, transparent 0 33.4%, var(--a2, #FF7A3D) 33.4%, var(--a, #F7E600) 66.6%, transparent 66.6% 100%);
  animation: plSand 2.8s cubic-bezier(.4, 0, .3, 1) infinite; will-change: transform; }
/* Band startet unterhalb der Marke (nur der transparente Teil sichtbar), steigt bis sie voll ist, hält, zieht oben hinaus. */
@keyframes plSand {
  0%   { transform: translateY(0); }
  48%  { transform: translateY(-33.3%); }
  62%  { transform: translateY(-33.3%); }
  100% { transform: translateY(-66.7%); }
}
@keyframes plAtmen { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .pawol-lade { animation: none; } .pawol-lade .f { animation: none; transform: translateY(-33.3%); } }