/* ───────────────────────────────────────────────────────────────────
   AID Vorspann
   Die Marke wird von links nach rechts aufgedeckt, ein Strich laeuft
   der Kante voraus. Beim ersten Aufruf in voller Laenge, danach kurz.

   Das Ausblenden steckt in der CSS-Animation, nicht im Skript. Faellt
   JavaScript aus, verschwindet die Flaeche trotzdem und die Seite ist
   bedienbar. Das Skript entscheidet nur, welche Laenge laeuft.
   ─────────────────────────────────────────────────────────────────── */
@property --aid-a { syntax:'<percentage>'; inherits:false; initial-value:-24%; }
@property --aid-b { syntax:'<percentage>'; inherits:false; initial-value:-6%; }

.aid-vorspann{
  position:fixed; inset:0; z-index:99999;
  background:#000; display:grid; place-items:center;
  animation:aid-aufloesen .6s cubic-bezier(.76,0,.24,1) 1.45s forwards;
}
.aid-vorspann.aid-kurz{ animation-delay:.42s; animation-duration:.4s; }
.aid-vorspann.aid-hell{ background:#F0EFEC; }

@keyframes aid-aufloesen{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.aid-vorspann_marke{ position:relative; width:min(46vw,420px); }
.aid-vorspann_marke img{
  width:100%; display:block;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 var(--aid-a),transparent var(--aid-b),transparent 100%);
          mask-image:linear-gradient(100deg,#000 0%,#000 var(--aid-a),transparent var(--aid-b),transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  animation:aid-wischen 1.15s cubic-bezier(.62,.02,.2,1) forwards;
}
.aid-kurz .aid-vorspann_marke img{ animation-duration:.5s; }
@keyframes aid-wischen{ from{--aid-a:-24%;--aid-b:-6%;} to{--aid-a:106%;--aid-b:124%;} }

/* Der Strich vor der Kante */
.aid-vorspann_klinge{
  position:absolute; top:-14%; bottom:-14%; width:3px; left:0; opacity:0;
  background:#C0FF45;
  box-shadow:0 0 10px 1px rgba(192,255,69,.95), 0 0 30px 5px rgba(192,255,69,.6),
             0 0 72px 14px rgba(192,255,69,.26);
  animation:aid-klinge 1.15s cubic-bezier(.62,.02,.2,1) forwards;
}
.aid-hell .aid-vorspann_klinge{ background:#E31B23; box-shadow:0 0 18px 2px rgba(227,27,35,.45); }
.aid-kurz .aid-vorspann_klinge{ animation-duration:.5s; }
@keyframes aid-klinge{ 0%{left:-4%;opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{left:104%;opacity:0} }

.aid-vorspann_zeile{
  position:absolute; left:0; right:0; top:calc(100% + 16px); text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:#A8A8A8; opacity:0; animation:aid-einblenden .5s .72s ease forwards;
}
.aid-hell .aid-vorspann_zeile{ color:#6E6E6B; }
.aid-kurz .aid-vorspann_zeile{ animation:none; opacity:0; }
@keyframes aid-einblenden{ to{opacity:1} }

.aid-vorspann_balken{
  position:absolute; left:0; bottom:0; height:2px; width:0; background:#C0FF45;
  animation:aid-laden 1.35s cubic-bezier(.4,0,.2,1) forwards;
}
.aid-hell .aid-vorspann_balken{ background:#E31B23; }
.aid-kurz .aid-vorspann_balken{ animation:none; }
@keyframes aid-laden{ to{width:100%} }

/* Wer Bewegung reduziert haben will, bekommt nur ein kurzes Abblenden */
@media (prefers-reduced-motion:reduce){
  .aid-vorspann{ animation:aid-aufloesen .3s linear .2s forwards; }
  .aid-vorspann_marke img{ animation:none; -webkit-mask-image:none; mask-image:none; }
  .aid-vorspann_klinge,.aid-vorspann_balken{ display:none; }
  .aid-vorspann_zeile{ animation:none; opacity:1; }
}

/* Druck und Vorschaubilder sollen die Flaeche nie sehen */
@media print{ .aid-vorspann{ display:none; } }