/* SwiSEO – Kunden-Login /konto (lib/konto.php, Skript assets/login.js). Aus dem Mockup SEO-Checker/mockup/login.html (07.10.2026):
   Glas-Karte über Vollbild-Hintergrund (assets/img/login-bg.webp, KI-hochgerechnet), schwarze Pro-Karte, weisses Plakat mit Milchglas über oranger Kugel. */
@font-face{font-family:'Geist';font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2')}
:root{--ink:#0e0e0f;--mut:#56565a;--mut2:#8e8e92;--or:#F2511B;--or2:#ff6a33}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Geist,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:#e7e1db;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* Hintergrund */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(110% 90% at 18% 8%,#f6f2ee,#e8e1da 55%,#d9cfc5)}
.bg img{position:absolute;display:block;pointer-events:none}
.bg .photo{inset:0;width:100%;height:100%;object-fit:cover}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(20,14,10,.08))}

.top{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px 28px}
.back{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 6px;border-radius:999px;font:500 14px Geist;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.back i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;font-size:12px}

main{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:96px 24px 56px}
.stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;width:min(980px,100%)}

/* Logo (wie live) */
.lg{display:inline-flex;align-items:center;gap:11px}.lg svg{width:26px;height:26px;flex:none}
.lg b{display:block;font:500 12.5px 'Geist Mono';letter-spacing:.32em}

/* Glas-Login */
.auth{grid-column:1;position:relative;padding:26px 30px 24px;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(255,255,255,.34));border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -30px rgba(0,0,0,.35)}
.a-top{display:flex;justify-content:space-between;align-items:center}
.a-sw{border:0;background:none;cursor:pointer;padding:6px 2px;font:500 15px Geist}
.a-sw:hover{color:var(--or)}
.m{display:none}.m.on{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.a-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:40px 0 20px}
.a-h h1{margin:0;font:400 34px/1 Geist;letter-spacing:-.035em}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 5px;border-radius:999px;font:500 12.5px Geist;white-space:nowrap;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 14px -10px rgba(0,0,0,.35)}
.chip i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px}
.fld{display:flex;align-items:center;gap:12px;height:56px;padding:0 8px;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 8px 20px -14px rgba(0,0,0,.3);transition:box-shadow .25s,background .25s}
.fld+.fld{margin-top:12px}
.fld:focus-within{background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(242,81,27,.28),0 8px 20px -14px rgba(0,0,0,.3)}
.fld .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;font-size:14px;box-shadow:0 2px 6px -2px rgba(0,0,0,.18)}
.fld input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:400 15px Geist;color:var(--ink)}
.fld input::placeholder{color:#66666a}
.fld .in{flex:none;height:38px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;background:#fff;font:500 13px Geist;box-shadow:0 2px 6px -2px rgba(0,0,0,.18);transition:color .2s}
.fld .in:hover{color:var(--or)}
.fld .eye{flex:none;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;background:none;color:var(--mut);font-size:14px}
.fld .eye:hover{color:var(--ink)}
.a-f{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}
.a-f p{margin:0;max-width:310px;font-size:12px;line-height:1.55;color:#48484c}
.a-f p a{text-decoration:underline;text-underline-offset:2px}
.sub{flex:none;display:inline-flex;align-items:center;justify-content:flex-end;width:80px;height:54px;padding:0 6px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#1f1f22,#0e0e0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -14px rgba(0,0,0,.6)}
.sub .o{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;font-size:14px;
  background:radial-gradient(120% 120% at 30% 20%,var(--or2),var(--or) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px -4px rgba(242,81,27,.7);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sub:hover .o{transform:translateX(-4px) scale(1.05)}
.a-more{display:flex;justify-content:center;align-items:center;gap:8px;margin:24px 0 2px;font:500 13px Geist}
.a-more i{font-size:11px;transition:transform .25s}.a-more:hover i{transform:translateX(3px)}
.note{display:none;margin:14px 0 0;padding:10px 14px;border-radius:14px;font-size:12.5px;line-height:1.5;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9)}
.note.on{display:block}
.note i{color:var(--or);margin-right:6px}

/* schwarze Pro-Karte */
.pro{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;min-height:188px;padding:28px 30px 24px;border-radius:30px;color:#fff;
  background:linear-gradient(180deg,#1d1d1f,#0c0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.55)}
.pro h2{margin:0;font:400 36px/1.06 Geist;letter-spacing:-.035em}
.pro h2 span{display:block;color:#8e8e93}
.pro a{align-self:flex-end;display:inline-flex;align-items:center;gap:10px;font:500 15px Geist}
.pro a i{font-size:12px;transition:transform .25s}.pro a:hover i{transform:translateX(3px)}

/* weisses Plakat */
.poster{grid-column:2;grid-row:1/3;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:46% 1fr;padding:14px;border-radius:30px;
  background:#fbfbfa;box-shadow:inset 0 1px 0 #fff,0 30px 60px -30px rgba(0,0,0,.35)}
.orb{position:absolute;z-index:0;right:-8%;top:27%;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(60% 60% at 34% 28%,#ffc2a0,#ff7a45 42%,#F2511B 68%,#cf3f0c)}
.pn{position:relative;z-index:1;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:20px;
  background:rgba(238,238,236,.6);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%)}
.big{margin:0;font:400 66px/.94 Geist;letter-spacing:-.05em;white-space:nowrap}
.big span{display:block;color:#b2b2b5}
.meta{margin-top:auto;padding-top:40px;font:400 14px/1.55 Geist;color:#2f2f33}
.meta b{font-weight:500}
.pn .lg{align-self:center;margin-top:48px}
.side{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;padding:14px 6px 4px 12px;text-align:right}
.side p{margin:0;font:500 14px/1.45 Geist}
.hcta{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 4px 0 20px;border-radius:999px;font:500 14px Geist;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#1f1f22,#0e0e0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -16px rgba(0,0,0,.6)}
.hcta .o{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:13px;background:radial-gradient(120% 120% at 30% 20%,var(--or2),var(--or) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}

@media (max-width:860px){
  .stage{grid-template-columns:minmax(0,1fr);max-width:520px}
  .poster{display:none}
}
@media (max-width:520px){
  .top{padding:16px}
  main{padding:84px 14px 32px;place-items:start center}
  .auth{padding:22px 18px 20px;border-radius:26px}
  .a-h{margin:30px 0 18px}.a-h h1{font-size:28px}
  .fld{height:54px}
  .a-f{align-items:flex-end}
  .pro{min-height:160px;padding:24px 22px 20px;border-radius:26px}.pro h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.m.on{animation:none}}
/* Figur links frei lassen – Karten auf grossen Bildschirmen nach rechts */
.bg .photo{object-position:22% center}
@media (min-width:1100px){
  main{justify-items:end;padding-right:clamp(32px,5vw,110px)}
  .stage{width:min(840px,100%)}
  .poster{grid-template-columns:50% 1fr}
  .big{font-size:60px}
}

/* ---------- Live-Ergänzungen ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.a-sw{text-decoration:none}
.a-txt{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#2f2f33}
.a-txt b{font-weight:600;word-break:break-all}
.note.on i{color:var(--or)}
.note.ok i{color:#2f8f5b}.note.bad i{color:#c8361e}
.note.top{margin:18px 0 0}
/* Einwilligung (eigenes Kästchen statt nativer Checkbox) */
.cons{display:flex;align-items:flex-start;gap:10px;max-width:330px;margin:0;font-size:12px;line-height:1.55;color:#48484c}
.cons a{text-decoration:underline;text-underline-offset:2px}
.cb{flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:7px;cursor:pointer;color:transparent;font-size:11px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(14,14,15,.2),0 2px 6px -3px rgba(0,0,0,.25);transition:background .2s,color .2s,box-shadow .2s}
.cb[aria-checked="true"]{color:#fff;background:var(--or);box-shadow:inset 0 0 0 1px var(--or),0 4px 10px -4px rgba(242,81,27,.7)}
/* Stärke-Anzeige unter dem Passwort */
.pwm{display:flex;align-items:center;gap:4px;margin:8px 16px 0}
.pwm i{flex:1;height:3px;border-radius:2px;background:rgba(14,14,15,.12);transition:background .25s}
.pwm em{min-width:92px;margin-left:8px;font:500 11px Geist;font-style:normal;color:#55555a;white-space:nowrap;text-align:right}
.pwm[data-s="1"] i:nth-child(-n+1){background:#d9534f}
.pwm[data-s="2"] i:nth-child(-n+2){background:#f0a33a}
.pwm[data-s="3"] i:nth-child(-n+3){background:#7bc49a}
.pwm[data-s="4"] i:nth-child(-n+4){background:#2f8f5b}
.pwm+.fld{margin-top:12px}
/* breiter Knopf (Adresse bestätigen, neues Passwort) */
.wide{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;margin-top:20px;padding:0 6px 0 24px;border:0;border-radius:999px;cursor:pointer;
  font:500 15px Geist;color:#fff;background:linear-gradient(180deg,#1f1f22,#0e0e0f);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -14px rgba(0,0,0,.6)}
.wide .o{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-size:14px;background:radial-gradient(120% 120% at 30% 20%,var(--or2),var(--or) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sub.wait,.wide.wait{opacity:.6;pointer-events:none}
@media (max-width:520px){.cons{max-width:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.lnk{padding:0;border:0;background:none;cursor:pointer;font:500 12px Geist;color:#48484c;text-align:left;text-decoration:underline;text-underline-offset:2px}.lnk:hover{color:var(--or)}
/* User 07.10.: Login auf allen Grössen senkrecht mittig, Pro-Karte auf dem Handy als Glas, Eingaben ≥16 px (sonst zoomt iOS beim Tippen) */
main{min-height:100vh;min-height:100dvh;align-content:center;padding-top:92px;padding-bottom:92px}   /* oben/unten gleich → wirklich mittig */
@media (max-width:860px){
  main{place-items:center;padding:80px 16px}
  .fld input{font-size:16px}
  .pro{color:var(--ink);background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(255,255,255,.34));border:1px solid rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -30px rgba(0,0,0,.35)}
  .pro h2 span{color:#6a6a6f}
  .pro a{color:var(--ink)}
}
@media (max-width:520px){main{padding:72px 14px}}
@media (max-height:700px){main{padding-top:72px;padding-bottom:24px}}   /* kleine Bildschirme: lieber oben bündig als abgeschnitten */
/* Test (User 07.10.): Glas-Karten ohne weissen Rand – höchstens ein sehr helles Grau, ohne weisse Lichtkante */
.auth,.pro{border-color:rgba(214,214,218,.3)!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)!important}
.pro{border:1px solid transparent}

/* Zwei-Faktor-Schritt (08.10.2026): Code-Kästchen mit Partikel-Kugel (lib/otp.php, assets/otp.css/.js) ↔ normales Feld für den Wiederherstellungscode */
.rcf{display:none}
#sxMfa.rc .rcf{display:flex;margin-top:18px}
#sxMfa.rc .otp-box,#sxMfa.rc .otp-st{display:none}
#sxMfa .otp-orb{width:118px;height:118px;margin-top:6px}   /* etwas kleiner als im Admin: Karte + Pro-Karte sollen ohne Scrollen passen */
@media (min-width:861px) and (max-height:960px){#sxMfa .otp-orb{width:96px;height:96px}#sxMfa .otp-h{margin-top:12px}#sxMfa .otp-box{margin-top:14px}}
@media (min-width:861px) and (max-height:820px){#sxMfa .otp-orb{width:76px;height:76px;margin-top:0}#sxMfa .otp-h h1{font-size:26px}#sxMfa .otp-s{height:50px}#sxMfa .otp-st{margin-top:8px}}