/* Cinderella Segmenter – Splash Screen als Overlay vor der App (UKE-CD, Werte aus dem CD-Manual) */
#splash, #login {
  --uke-blau: #004992; --uke-blau-70: #4D7FB3; --uke-blau-40: #99B6D3; --uke-blau-20: #CCDBE9; --uke-blau-flaeche: #E3E5F2;
  --uke-mocca: #AA9C8F; --uke-grau: #575756; --uke-grau-hell: #E6E7E8; --weiss: #FFFFFF;
  --sfont: "TheSans", "TheSansOSF", "Source Sans 3", "Source Sans Pro", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed; inset: 0; z-index: 1000;
  font-family: var(--sfont); color: var(--uke-grau);
  background: radial-gradient(circle at 50% 38%, var(--weiss) 0%, var(--weiss) 35%, var(--uke-blau-flaeche) 100%);
  display: flex; align-items: center; justify-content: center;
  -webkit-font-smoothing: antialiased;
  transition: opacity 700ms ease;
}
#splash.hide, #login.hide { opacity: 0; pointer-events: none; }
#login { z-index: 1100; }
#login.hidden, #splash.hidden { display: none; }
#splash .splash, #login .splash{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; animation: sp-fadeIn 900ms ease-out both; }
#splash .mark, #login .mark{ width: min(56vw, 380px); height: auto; margin-bottom: 1.6rem; animation: sp-rise 1100ms cubic-bezier(.2,.7,.2,1) both; }
#splash .wordmark, #login .wordmark{ width: min(70vw, 420px); height: auto; animation: sp-rise 1100ms 150ms cubic-bezier(.2,.7,.2,1) both; }
#splash .product, #login .product{ margin: .55rem 0 0; font-size: clamp(1.25rem, 3.4vw, 1.9rem); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--uke-blau); animation: sp-rise 1100ms 250ms cubic-bezier(.2,.7,.2,1) both; }
#splash .claim, #login .claim{ margin: 1.1rem 0 0; font-size: clamp(.9rem, 1.8vw, 1.05rem); font-weight: 300; letter-spacing: .04em; color: var(--uke-grau); animation: sp-rise 1100ms 350ms cubic-bezier(.2,.7,.2,1) both; }
#splash .loader, #login .loader{ position: relative; width: min(60vw, 260px); height: 2px; margin-top: 2.4rem; background: var(--uke-blau-20); border-radius: 1px; overflow: hidden; animation: sp-fadeIn 900ms 500ms both; }
#splash .loader::after, #login .loader::after{ content: ""; position: absolute; inset: 0; width: 40%; background: var(--uke-blau); border-radius: 1px; animation: sp-scan 1.6s cubic-bezier(.45,.05,.55,.95) infinite; }
#splash .status, #login .status{ margin-top: .8rem; font-size: .8rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--uke-blau-70); animation: sp-fadeIn 900ms 600ms both; }
#splash .footer, #login .footer{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.5rem 1.2rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; font-size: .78rem; font-weight: 300; color: var(--uke-grau); border-top: 1px solid var(--uke-grau-hell); background: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
#splash .footer strong, #login .footer strong{ font-weight: 600; color: var(--uke-blau); }
#splash .footer .version, #login .footer .version{ color: var(--uke-mocca); letter-spacing: .06em; }
#splash .skip, #login .skip{ position: fixed; top: 14px; right: 18px; z-index: 2; font-size: .78rem; letter-spacing: .08em; color: var(--uke-blau-70); background: none; border: 1px solid var(--uke-blau-20); border-radius: 2px; padding: 4px 10px; cursor: pointer; font-family: var(--sfont); }
#splash .skip:hover, #login .skip:hover{ color: var(--uke-blau); border-color: var(--uke-blau); }

@keyframes sp-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sp-scan { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes sp-appear { from { opacity: 0; transform: scale(0) rotate(-45deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sp-twinkle { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

#splash .draw-layer, #login .draw-layer{ opacity: 0; animation: sp-fadeIn 800ms both; }
#splash .draw-layer:nth-of-type(1), #login .draw-layer:nth-of-type(1){ animation-delay: 900ms; }
#splash .draw-layer:nth-of-type(2), #login .draw-layer:nth-of-type(2){ animation-delay: 1100ms; }
#splash .draw-layer:nth-of-type(3), #login .draw-layer:nth-of-type(3){ animation-delay: 1300ms; }
#splash .draw-layer:nth-of-type(4), #login .draw-layer:nth-of-type(4){ animation-delay: 1500ms; }
#splash .sparkle, #splash .dust, #login .sparkle, #splash .dust{ --d: 0s; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: sp-appear 500ms var(--d) cubic-bezier(.2,.8,.2,1) both, sp-twinkle 2.6s calc(var(--d) + 500ms) ease-in-out infinite; }
#splash .dust, #login .dust{ animation-duration: 500ms, 3.4s; }
#splash .bg-sparkles, #login .bg-sparkles{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#splash .bg-sparkles .sparkle, #splash .bg-sparkles .dust, #login .bg-sparkles .sparkle, #splash .bg-sparkles .dust{ animation-duration: 800ms, 5s; }

@media (prefers-reduced-motion: reduce) {
  #splash *, #splash *::before, #splash *::after, #login *, #login *::before, #login *::after { animation: none !important; }
  #splash .draw-layer { opacity: 1; }
  #splash .sparkle, #splash .dust { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 480px) { #splash .footer { flex-direction: column; align-items: center; text-align: center; } }
#splash .study, #login .study{ display: flex; align-items: center; gap: 14px; margin-top: 1.5rem; padding: 8px 16px; border: 1px solid var(--uke-blau-20); border-radius: 3px; background: rgba(255,255,255,.7); animation: sp-rise 1100ms 450ms cubic-bezier(.2,.7,.2,1) both; }
#splash .study-logo, #login .study-logo{ height: 44px; width: auto; display: block; }
#splash .study-text, #login .study-text{ font-size: .95rem; font-weight: 600; letter-spacing: .06em; color: var(--uke-blau); white-space: nowrap; }
#splash .c-star, #login .c-star{ animation: sp-appear 500ms var(--d) cubic-bezier(.2,.8,.2,1) both, sp-blink 1.4s calc(var(--d) + 500ms) ease-in-out infinite; }
@keyframes sp-blink { 0%,100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
#login .login-card .wordmark { width: min(60vw, 340px); }
#login .login-form { display: flex; flex-direction: column; gap: 12px; width: min(80vw, 320px); margin-top: 1.6rem; animation: sp-rise 1100ms 350ms cubic-bezier(.2,.7,.2,1) both; }
#login .login-form label { display: flex; flex-direction: column; align-items: stretch; text-align: left; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--uke-blau-70); gap: 4px; }
#login .login-form input { font-family: var(--sfont); font-size: 1rem; padding: 9px 12px; border: 1px solid var(--uke-blau-20); border-radius: 3px; background: rgba(255,255,255,.85); color: var(--uke-grau); outline: none; }
#login .login-form input:focus { border-color: var(--uke-blau); box-shadow: 0 0 0 3px rgba(0,73,146,.12); }
#login .login-btn { margin-top: 6px; font-family: var(--sfont); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border: none; border-radius: 3px; background: var(--uke-blau); color: #fff; cursor: pointer; }
#login .login-btn:hover { background: #003A75; }
#login .login-btn:disabled { opacity: .6; cursor: wait; }
#login .login-error { min-height: 1.2em; margin: 0; font-size: .85rem; color: #B22229; }
#login .login-error:empty { display: none; }