/* AND-303389-CHG: Zierseite. Nur CSS, kein Skript, keine fremden Quellen. Hoechstens 3 Wechsel je Sekunde. */
:root { --g:#7dffb0; --a:#ffb347; --bg:#030504; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:var(--bg); overflow:hidden; }
i { display:block; font-style:normal; position:absolute; }
/* Das Bild deckt die Flaeche, die Lichter wandern mit, weil sie in Prozent des Bildes stehen. */
.bild { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max(100vw, calc(100vh * 1.7872)); aspect-ratio:1344/752; background:url(monitor.jpg) center/100% 100% no-repeat; }
@media (max-aspect-ratio:1/1) { .bild { width:150vw; } }

.schirm { position:absolute; left:30.9%; top:13.4%; width:38.2%; height:51.6%; border-radius:7%/10%; overflow:hidden; }
.zeile { position:absolute; left:0; right:0; height:14%; background:linear-gradient(to bottom, transparent, rgba(170,255,210,.13), transparent); animation:wandern 8s linear infinite; }
.cursor { left:8%; bottom:12%; width:4.2%; height:8%; background:#c8ffdf; box-shadow:0 0 1vw var(--g); animation:blinken 1.8s steps(1,end) infinite; }

.led, .punkt { aspect-ratio:1; border-radius:50%; color:var(--g); background:currentColor; box-shadow:0 0 .7vw currentColor; animation:blinken 3.1s steps(1,end) infinite; }
.led { width:1.05%; transform:translate(-50%,-50%); }
.m1 { left:21.15%; top:37.2%; } .m2 { left:78.6%; top:37.2%; animation-duration:4.3s; animation-delay:-1.4s; }
.taste { width:2.9%; height:1.5%; border-radius:1px; transform:translate(-50%,-50%); background:#b6ffd2; box-shadow:0 0 .8vw var(--g); animation:glimmen 4.3s ease-in-out infinite; }
.punkt { width:.5%; transform:translate(-50%,-50%); box-shadow:0 0 .35vw currentColor; }
.t0 { left:11.1%; top:81.6%; animation-duration:3.7s; animation-delay:-0.3s; }
.t1 { left:15.8%; top:81.6%; animation-duration:4.3s; animation-delay:-0.9s; }
.t2 { left:20.3%; top:81.6%; animation-duration:5.1s; animation-delay:-1.4s; }
.t3 { left:26.8%; top:79.1%; animation-duration:6.3s; animation-delay:-2.2s; }
.t4 { left:68.8%; top:78.9%; animation-duration:7.9s; animation-delay:-2.9s; }
.t5 { left:69.8%; top:82.3%; animation-duration:4.3s; animation-delay:-3.7s; }
.t6 { left:71.7%; top:88.1%; animation-duration:5.1s; animation-delay:-4.6s; }
.t7 { left:4.4%; top:84.5%; animation-duration:6.3s; animation-delay:-0.6s; }
.p0 { left:93.2%; top:31.0%; animation-duration:1.7s; animation-delay:-0.3s; color:var(--a); }
.p1 { left:95.4%; top:31.0%; animation-duration:2.3s; animation-delay:-0.9s; }
.p2 { left:97.6%; top:31.0%; animation-duration:3.1s; animation-delay:-1.4s; }
.p3 { left:93.2%; top:35.5%; animation-duration:4.3s; animation-delay:-2.2s; color:var(--a); }
.p4 { left:95.4%; top:35.5%; animation-duration:5.9s; animation-delay:-2.9s; }
.p5 { left:97.6%; top:35.5%; animation-duration:2.3s; animation-delay:-3.7s; }
.p6 { left:86.4%; top:32.0%; animation-duration:3.1s; animation-delay:-4.6s; color:var(--a); }
.p7 { left:87.8%; top:32.0%; animation-duration:4.3s; animation-delay:-0.6s; }
.p8 { left:86.4%; top:35.0%; animation-duration:1.7s; animation-delay:-0.3s; }
.p9 { left:87.8%; top:35.0%; animation-duration:2.3s; animation-delay:-0.9s; color:var(--a); }

@keyframes blinken { 0%,44% { opacity:1; } 45%,100% { opacity:.08; } }
@keyframes glimmen { 0%,100% { opacity:.12; } 50% { opacity:.85; } }
@keyframes wandern { from { top:-16%; } to { top:100%; } }
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; }
  .taste { opacity:.5; }
}