/* SwiSEO – Zwei-Faktor-Code (lib/otp.php, assets/otp.js), genutzt von admin-gate.css (Admin) und login.css (Kunden).
   Nachbau der Vorlage «input-otp-10» in unserem Stil: dunkle Kugel mit oranger Partikel-Kugel (Farben des Tacho-Bogens), Glas-Kästchen, Erfolg grün. */

/* Kugel: Glühen, Ringe (aussen gepunktet = Spur des 30-s-Rings der App-Codes, innen gestrichelt gegenläufig), dunkler Kern, Erfolgs-Schild */
.otp-orb{position:relative;width:150px;height:150px;margin:24px auto 0}
.otp-glow{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,rgba(242,81,27,.3),rgba(242,81,27,0) 68%);animation:otpBreath 3s ease-in-out infinite;transition:background .5s}
.otp-orb>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.otp-orb .r1,.otp-orb .r2,.otp-orb .tm{transform-origin:80px 80px}
.otp-orb .r1{animation:otpSpin 60s linear infinite}
.otp-orb .r1 circle{stroke:rgba(242,81,27,.55);stroke-width:1.2;stroke-dasharray:1.4 5.6;stroke-linecap:round}
.otp-orb .r2{animation:otpSpin 30s linear infinite reverse}
.otp-orb .r2 circle{stroke:rgba(14,14,15,.2);stroke-width:1;stroke-dasharray:46 12 4 12}
.otp-orb .tm{stroke:var(--or,#F2511B);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100 100;transform:rotate(-90deg);transition:stroke-dasharray .9s linear,stroke .4s}
.otp-orb .tm.low{stroke:#DA291C}
.otp-core{position:absolute;inset:10%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 34% 28%,#2c2c31,#121214 58%,#0a0a0b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -14px 30px rgba(242,81,27,.16),0 16px 34px -14px rgba(242,81,27,.6),0 10px 24px -14px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .5s}
.otp-core canvas{display:block;width:100%;height:100%}
.otp-ok{position:absolute;inset:10%;display:grid;place-items:center;border-radius:50%;background:rgba(10,10,11,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.otp-ok svg{width:42%;height:42%;padding:9%;border-radius:50%;box-sizing:content-box;color:#86efb4;background:rgba(63,190,120,.22);box-shadow:inset 0 0 0 1px rgba(110,231,168,.55);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.otp.ok .otp-ok{opacity:1;transform:none}
.otp.ok .otp-core{transform:scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -14px 30px rgba(63,190,120,.18),0 16px 34px -14px rgba(47,158,102,.6),0 10px 24px -14px rgba(0,0,0,.6)}
.otp.ok .otp-glow{background:radial-gradient(circle,rgba(63,190,120,.32),rgba(63,190,120,0) 68%)}
.otp.ok .otp-orb .tm{stroke:#2f9e66}

/* Titel mittig unter der Kugel */
.otp-h{margin:16px 0 0;text-align:center}
.otp-h h1{margin:0;font:400 30px/1.05 Geist,system-ui,sans-serif;letter-spacing:-.035em}
.otp-h .a-txt{max-width:330px;margin:8px auto 0;font-size:13.5px;line-height:1.55}
.otp-h+.note{margin:16px 0 0}

/* Kästchen: ein echtes Feld liegt unsichtbar darüber (Einfügen, iOS-Code-Vorschlag, Passwortmanager) */
.otp-box{position:relative;max-width:340px;margin:18px auto 0}
.otp-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp-s{position:relative;display:grid;place-items:center;height:58px;border-radius:16px;background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(214,214,218,.5),0 8px 18px -14px rgba(0,0,0,.35);font:600 24px 'Geist Mono',ui-monospace,monospace;color:var(--ink,#0e0e0f);
  transition:background .25s,box-shadow .25s,color .25s}
.otp-s b{grid-area:1/1;font-weight:600}
.otp-s.fill{background:rgba(255,255,255,.82)}
.otp-s.on{background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1.5px rgba(242,81,27,.8),0 0 0 4px rgba(242,81,27,.16)}
.otp-s.on::before{content:"";grid-area:1/1;width:2px;height:24px;border-radius:2px;background:var(--or,#F2511B);animation:otpBlink 1s ease-in-out infinite}
.otp-s.pop b{animation:otpPop .42s cubic-bezier(.3,1.6,.5,1)}
.otp-s.pop::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--or,#F2511B);pointer-events:none;animation:otpRing .45s ease-out forwards}
.otp.ok .otp-s{background:rgba(63,163,107,.14);box-shadow:inset 0 0 0 1.5px rgba(47,158,102,.7);color:#1d7a4a}
.otp.ok .otp-s.pop::after{box-shadow:0 0 0 1.5px #2f9e66}
.otp.bad .otp-s{box-shadow:inset 0 0 0 1.5px rgba(200,54,30,.55)}
.otp.bad .otp-slots{animation:otpShake .5s cubic-bezier(.36,.07,.19,.97)}
.otp.live .otp-in{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;
  caret-color:transparent;font-size:16px;letter-spacing:-.5em;cursor:text}
.otp.live .otp-in::selection{background:transparent}
.otp.live .otp-in:-webkit-autofill{transition:background-color 99999s}
.otp:not(.live) .otp-slots,.otp:not(.live) .otp-st{display:none}
.otp:not(.live) .otp-in{display:block;width:100%;height:56px;padding:0 20px;border:0;outline:0;border-radius:999px;background:rgba(255,255,255,.72);
  font:500 22px 'Geist Mono',ui-monospace,monospace;letter-spacing:.35em;text-align:center;color:var(--ink,#0e0e0f)}
.otp-st{margin:12px 0 0;min-height:15px;text-align:center;font:500 10.5px/1.4 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6a6a70}
.otp.ok .otp-st{color:#1d7a4a}

@keyframes otpSpin{to{transform:rotate(360deg)}}
@keyframes otpBreath{50%{opacity:.45;transform:scale(1.04)}}
@keyframes otpBlink{50%{opacity:0}}
@keyframes otpPop{from{opacity:0;transform:translateY(6px) scale(.5)}to{opacity:1;transform:none}}
@keyframes otpRing{from{opacity:.8;transform:scale(.92)}to{opacity:0;transform:scale(1.32)}}
@keyframes otpShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (max-width:760px){.otp-orb{width:112px;height:112px;margin-top:18px}.otp-h h1{font-size:26px}.otp-slots{gap:6px}.otp-s{height:52px;border-radius:14px;font-size:21px}}
@media (max-height:820px) and (min-width:761px){.otp-orb{width:118px;height:118px;margin-top:18px}}
@media (prefers-reduced-motion:reduce){.otp-orb .r1,.otp-orb .r2,.otp-glow,.otp-s.on::before,.otp-s.pop b,.otp-s.pop::after,.otp.bad .otp-slots{animation:none}}