/* Azubix – Cortex-Look (dunkel, Glas, Eisblau). Aus azubix-cortex.html übernommen.
   Keine Inline-Styles im HTML (CSP: style-src 'self'). */
:root{
  --bg:#070B12; --bg2:#0C1422; --card:rgba(255,255,255,.055); --cardb:rgba(255,255,255,.1); --field:rgba(255,255,255,.07);
  --fg:#EAF2FF; --mut:#8A98B3; --acc:#5CE1FF; --acc2:#3B82F6; --accfg:#04121A;
  --good:#3DD68C; --gold:#FFC857; --bad:#FF6B73; --r:20px; --shadow:0 10px 40px rgba(0,0,0,.4);
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --fb:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --spring:cubic-bezier(.34,1.5,.5,1); --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 var(--fb);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;touch-action:manipulation}
input{font:inherit;font-size:16px;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 40% at 80% 0%,rgba(92,225,255,.16),transparent 70%),radial-gradient(50% 35% at 0% 30%,rgba(59,130,246,.12),transparent 70%)}
.stage{position:relative;z-index:1;max-width:430px;margin:0 auto;padding-block:max(18px,env(safe-area-inset-top,0px)) max(40px,env(safe-area-inset-bottom,0px))}
.view>*{animation:rise .55s var(--spring) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes shine{to{transform:translateX(100%)}}
@keyframes spinr{to{transform:rotate(360deg)}}
.ic{width:1.2em;height:1.2em;flex:none;display:block;fill:currentColor}
.mut{color:var(--mut)}
.wm{font:800 1.25rem var(--fd);letter-spacing:-.03em}
.lm{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--accfg)}
.card{background:var(--card);border:1px solid var(--cardb);border-radius:var(--r);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn{display:block;width:100%;padding:15px;border-radius:14px;font-weight:800;font-size:1rem;text-align:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--accfg);transition:transform .15s var(--spring),box-shadow .3s;position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--fg)}
.tiny{font-size:.76rem;color:var(--mut);text-align:center}

/* Anmelden */
.login{display:grid;gap:18px;padding-top:26px}
.lg-top{display:grid;justify-items:center;gap:10px;text-align:center}
.lg-top .wm{font-size:2.1rem}
.lg-top p{color:var(--mut)}
.lmw{position:relative;width:68px;height:68px;display:grid;place-items:center;margin-bottom:6px}
.lmw .lm{position:relative;width:68px;height:68px;border-radius:22px;transition:box-shadow .4s var(--ease)}
.lmw .lm .ic{width:38px;height:38px}
.glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(92,225,255,.8),rgba(59,130,246,.28) 45%,transparent 70%);opacity:.18;transform:scale(.8);transition:opacity .5s var(--ease),transform .6s var(--spring);pointer-events:none}
.lmw.typing .lm{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 30px rgba(92,225,255,.6)}
.lmw.ready .glow{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.rip{position:absolute;inset:0;border-radius:22px;border:2px solid var(--acc);pointer-events:none}
.lgc{padding:18px;display:grid;gap:14px;transition:border-color .25s,box-shadow .35s var(--ease)}
.lgc:focus-within{border-color:color-mix(in srgb,var(--acc) 45%,var(--cardb));box-shadow:var(--shadow),0 0 44px -12px rgba(92,225,255,.4)}
.lgc.err{border-color:var(--bad);box-shadow:var(--shadow),0 0 40px -10px rgba(255,107,115,.5)}
.lgc h1{font:800 1.35rem var(--fd);letter-spacing:-.03em}

.fld{display:grid;gap:6px}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fld label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700}
.caps{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--gold)}
.caps .ic{width:.9rem;height:.9rem}
.iw{position:relative}
.iw input{width:100%;padding:13px 44px 13px 14px;border-radius:12px;background:var(--field);border:1px solid var(--cardb);outline:none;transition:border-color .2s,box-shadow .25s,background .2s}
.iw.pw input{padding-right:80px}
.iw input::placeholder{color:rgba(138,152,179,.6)}
.iw input:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.fld[data-k="ok"] input{border-color:color-mix(in srgb,var(--good) 65%,transparent)}
.fld[data-k="warn"] input{border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.fld[data-k="bad"] input{border-color:var(--bad)}
.fld[data-k="ok"] input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 28%,transparent)}
.fld[data-k="bad"] input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 28%,transparent)}
.si{position:absolute;right:12px;top:50%;width:22px;height:22px;margin-top:-11px;display:grid;place-items:center;border-radius:50%;pointer-events:none}
.si .ic{width:14px;height:14px}
.si.pop{animation:pop .4s var(--spring) both}
.fld[data-k="ok"] .si{background:var(--good);color:var(--accfg)}
.fld[data-k="bad"] .si{background:var(--bad);color:var(--accfg)}
.eye{position:absolute;right:42px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border-radius:50%;color:var(--mut);transition:color .2s,transform .15s var(--spring)}
.eye:active{transform:scale(.88)}
.eye[aria-pressed="true"]{color:var(--acc)}
.hint{font-size:.76rem;min-height:1.15em;color:var(--mut);transition:color .2s}
.fld[data-k="ok"] .hint{color:var(--good)}
.fld[data-k="warn"] .hint{color:var(--gold)}
.fld[data-k="bad"] .hint{color:var(--bad)}

/* Passwortstärke: vier Segmente füllen sich nacheinander */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;--mc:var(--bad)}
.meter[data-lv="2"]{--mc:var(--gold)}
.meter[data-lv="3"]{--mc:var(--acc)}
.meter[data-lv="4"]{--mc:var(--good)}
.meter i{height:6px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.meter i::before{content:"";position:absolute;inset:0;background:var(--mc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring),background-color .3s}
.meter i:nth-child(2)::before{transition-delay:70ms,0s}
.meter i:nth-child(3)::before{transition-delay:140ms,0s}
.meter i:nth-child(4)::before{transition-delay:210ms,0s}
.meter i.on::before{transform:none}
.mrow{display:flex;justify-content:space-between;font-size:.76rem;color:var(--mut);margin-top:6px}
.mrow b{font-weight:700;color:var(--fg);transition:color .3s}
.meter[data-lv="1"]~.mrow b{color:var(--bad)}
.meter[data-lv="2"]~.mrow b{color:var(--gold)}
.meter[data-lv="3"]~.mrow b{color:var(--acc)}
.meter[data-lv="4"]~.mrow b{color:var(--good)}

/* Schalter: Angemeldet bleiben */
.sw{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;background:var(--field);border:1px solid var(--cardb);transition:transform .15s var(--spring),border-color .25s,background .25s}
.sw:active{transform:scale(.98)}
.sw[aria-checked="true"]{border-color:color-mix(in srgb,var(--acc) 40%,var(--cardb))}
.sw .tx{flex:1;min-width:0;display:grid}
.sw b{font-weight:700}
.sw small{color:var(--mut);font-size:.76rem}
.trk{position:relative;width:52px;height:32px;border-radius:99px;background:rgba(255,255,255,.14);flex:none;transition:background .3s}
.sw[aria-checked="true"] .trk{background:var(--acc)}
.trk i{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:99px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .45s var(--spring),width .2s var(--ease)}
.sw[aria-checked="true"] .trk i{transform:translateX(20px)}
.sw:active .trk i{width:32px}
.sw[aria-checked="true"]:active .trk i{transform:translateX(14px)}

/* Knopf mit drei Zuständen */
.go{display:grid;place-items:center;min-height:52px}
.go>span{grid-area:1/1;transition:opacity .25s,transform .35s var(--spring)}
.go .b-s,.go .b-d{opacity:0;transform:scale(.5)}
.go .b-s i{display:block;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(4,18,26,.25);border-top-color:var(--accfg);animation:spinr .7s linear infinite}
.go .b-d .ic{width:24px;height:24px}
.go[data-s="busy"] .b-l,.go[data-s="done"] .b-l{opacity:0;transform:translateY(-8px)}
.go[data-s="busy"] .b-s,.go[data-s="done"] .b-d{opacity:1;transform:none}
.go[data-s="done"] .b-s{opacity:0}
.go:disabled{opacity:.55;cursor:not-allowed}
.go.ready{box-shadow:0 0 28px -4px rgba(92,225,255,.55)}
.go.ready::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-100%);animation:shine 2.8s ease-in-out infinite}
.errw{display:grid;grid-template-rows:0fr;margin-block:-7px;transition:grid-template-rows .35s var(--ease),margin .35s var(--ease)}
.errw.show{grid-template-rows:1fr;margin-block:0}
.errl{min-height:0;overflow:hidden;text-align:center;font-size:.84rem;font-weight:700;color:var(--bad)}

/* Angemeldet (Platzhalter bis zum Gerüst) */
.home{display:grid;gap:14px;padding-top:26px}
.home .card{padding:20px;display:grid;gap:10px}
.home h1{font:800 1.5rem var(--fd);letter-spacing:-.03em}

@media (prefers-reduced-transparency: reduce){.card{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
}