/* ===== Ladebildschirm: Logo füllt sich, wächst und gibt die Seite frei ===== */
html.pl-lock,html.pl-lock body{overflow:hidden!important;height:100%}
#pl{position:fixed;inset:0;z-index:9999;background:#3e3532;display:flex;align-items:center;justify-content:center;
  animation:plFailsafe 0s 9s forwards}
@keyframes plFailsafe{to{visibility:hidden;pointer-events:none}}

.pl-logo{width:min(64vw,440px);aspect-ratio:168/72.22;
  -webkit-mask:url(img/logo.svg) center/contain no-repeat;mask:url(img/logo.svg) center/contain no-repeat;
  background:
    linear-gradient(#eeeae3,#eeeae3) left bottom/100% 0% no-repeat,
    rgba(238,234,227,.16)}
#pl.fill .pl-logo{animation:plFill 1.9s cubic-bezier(.65,0,.35,1) forwards}
@keyframes plFill{to{background-size:100% 100%,auto}}

/* Logo wird zum "Fenster": die Seite scheint durch die Buchstaben */
#pl.open{
  -webkit-mask:url(img/logo.svg) center/min(64vw,440px) auto no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url(img/logo.svg) center/min(64vw,440px) auto no-repeat,linear-gradient(#000,#000);
  mask-composite:exclude;
  animation:plOpen 1.5s cubic-bezier(.75,0,.25,1) forwards}
#pl.open .pl-logo{display:none}
#pl .pl-svg{display:none}
@keyframes plOpen{
  0%{-webkit-mask-size:min(64vw,440px) auto,100% 100%;mask-size:min(64vw,440px) auto,100% 100%;opacity:1}
  80%{opacity:1}
  100%{-webkit-mask-size:9000px auto,100% 100%;mask-size:9000px auto,100% 100%;opacity:0}}

@media (prefers-reduced-motion:reduce){#pl{display:none}html.pl-lock,html.pl-lock body{overflow:auto!important}}