@font-face{font-family:"Saira";src:url(fonts/saira-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--display:"Saira","Arial Narrow",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.auth{min-height:100vh;font-family:var(--body);font-size:15px;line-height:1.5;color:#e9eef1;
  background:radial-gradient(120% 80% at 50% 0%,#1d262c 0%,#0e1215 55%,#090b0d 100%) fixed #090b0d;
  display:grid;place-items:center;padding:40px max(16px,env(safe-area-inset-left)) 32px max(16px,env(safe-area-inset-right));position:relative;overflow-x:hidden}
.auth .contours{position:fixed;inset:0;width:100%;height:100%;opacity:.13;pointer-events:none}
.auth .col{position:relative;width:100%;max-width:420px;display:grid;gap:22px;justify-items:center;text-align:center}
.auth .logo{width:170px;max-width:46vw;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.auth .sst-logo{display:block;width:100%;height:auto}
.auth .cls-3{fill:#2f5463}.auth .cls-5{fill:#4a7a91}.auth .cls-1{fill:#c4d2d9}.auth .cls-2{fill:#fff}.auth .cls-4{fill:#b9c0c4}
.auth .word{font-family:var(--display);font-weight:700;font-size:clamp(1rem,4.2vw,1.55rem);letter-spacing:.06em;line-height:1.1;white-space:nowrap}
.auth .word span{font-weight:500;color:#9fb0b9}
.auth .sub{color:#93a3ad;font-size:.9rem;margin-top:4px;letter-spacing:.14em;text-transform:uppercase}
.auth .card{width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:24px;backdrop-filter:blur(8px);display:grid;gap:14px}
.auth .card h1{margin:0;font:600 1.2rem var(--display);letter-spacing:.03em}
.auth .card p{margin:0;color:#93a3ad;font-size:.9rem}
.auth label{display:grid;gap:6px;font-size:.85rem;font-weight:500}
.auth input{font:inherit;font-size:1rem;padding:12px 14px;border-radius:9px;width:100%;background:#0c1013;border:1px solid #2b363e;color:#fff}
.auth input:focus{outline:none;border-color:#9fb6c0;box-shadow:0 0 0 3px rgba(159,182,192,.18)}
.auth .btn{font:600 1rem var(--body);padding:13px 16px;border-radius:9px;border:0;cursor:pointer;width:100%;background:linear-gradient(180deg,#e9eef1,#b9c5cc);color:#0d1114}
.auth .btn:hover{filter:brightness(1.06)}
.auth .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.auth .alert{width:100%;padding:11px 14px;border-radius:9px;font-size:.9rem;text-align:left}
.auth .alert-error{background:rgba(220,20,60,.14);border:1px solid rgba(220,20,60,.4);color:#ffb3c1}
.auth .alert-success{background:rgba(40,160,100,.14);border:1px solid rgba(40,160,100,.4);color:#a6efc7}
.auth .alert-info{background:rgba(159,182,192,.12);border:1px solid rgba(159,182,192,.3);color:#d5e1e6}
.auth .foot{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;color:#7f9099;font-size:.78rem}
.auth .foot img{height:30px;width:auto;display:block}
.auth .hint{color:#7f9099;font-size:.82rem}
/* Logo-Animation: WLAN-Wellen und Glanz */
.auth [data-p^="w"]{opacity:.25;animation:wifi 2.4s ease-in-out infinite}
.auth [data-p="wr2"],.auth [data-p="wl2"]{animation-delay:.2s}
.auth [data-p="wr3"],.auth [data-p="wl3"]{animation-delay:.4s}
.auth [data-p="wr4"],.auth [data-p="wl4"]{animation-delay:.6s}
.auth [data-p^="wl"]{animation-delay:1.2s}
@keyframes wifi{0%,100%{opacity:.25}35%,60%{opacity:1}}
.auth .shine{animation:shine 5.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes shine{0%{transform:translateX(-1400px)}45%,100%{transform:translateX(1400px)}}
@media (prefers-reduced-motion:reduce){.auth *{animation:none!important}.auth [data-p^="w"]{opacity:1}}