/* Start-Animation: verstreute Bausteine setzen sich zusammen, werden zum Lumi-Zeichen, dann erscheint der Name */
#splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#fff;color:#111;overflow:hidden;cursor:default;-webkit-user-select:none;user-select:none}
#splash .sp-stage{position:relative;width:0;height:0}
#splash .sp-t{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;opacity:0;will-change:transform,opacity}
#splash .sp-t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#splash .sp-ring{border:3px solid #111;background:#fff}
#splash .sp-solid{background:#111;color:#fff}
#splash .sp-ghost{border:2px solid #dcdce0;color:#cfcfd4}
#splash .sp-pill{width:60px;left:-30px;border-radius:14px}
#splash .sp-dot{width:12px;height:12px;left:-6px;top:-6px;border-radius:50%;background:#111}
#splash .sp-o{width:16px;height:16px;left:-8px;top:-8px;border-radius:50%;border:2.5px solid #111}
#splash .sp-doc{left:-44px;top:-44px;width:88px;height:88px;border-radius:24px;border:4px solid #111;background:#fff;display:block;opacity:0}
#splash .sp-doc i{position:absolute;left:18px;height:4px;border-radius:2px;background:#111}
#splash .sp-lock{position:absolute;left:0;top:0;display:flex;align-items:center;transform:translate(-50%,-50%);white-space:nowrap}
#splash .sp-logo{width:84px;height:84px;flex:none;opacity:0;background:url(logo.png) center/contain no-repeat}
#splash .sp-word{display:inline-block;overflow:hidden;max-width:0;font:700 66px/1 Inter,"SF Pro Display",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.045em;padding:6px 0}
#splash .sp-word span{display:inline-block;opacity:0}
#splash.out{pointer-events:none}
@media(max-width:560px){#splash .sp-stage{transform:scale(.72)}#splash .sp-logo{width:68px;height:68px}#splash .sp-word{font-size:54px}}
/* Login-Variante: Animation nur auf der linken Seite, rechts das Bild */
#splash.lg{display:block;background:#fff}
#splash.lg .sp-stage{position:absolute;left:calc(5 / 11 * 50%);top:50%}
#splash .sp-hero{display:none}
#splash.lg .sp-hero{display:block;position:absolute;top:14px;bottom:14px;right:14px;width:calc(6 / 11 * 100% - 14px);border-radius:34px;background:url(login-hero.webp) center/cover no-repeat #ddd}
html[data-theme="dark"] #splash.lg .sp-hero{filter:invert(1) hue-rotate(180deg)}