/* THE WINE CLUB / Login-Bühne: laufendes Fotoraster, Pill-Buttons, schrittweise Formulare */
.login-screen{--lw:#8f2338;--lw-dark:#6e1728;--lw-ink:#1f1a17;--lw-muted:#6d625a;--lw-line:#d9cfc6;--lw-bg:#fffdfb;
 min-height:100vh;min-height:100dvh;background:var(--lw-bg);color:var(--lw-ink);display:flex;flex-direction:column;
 font-family:'DM Sans',sans-serif;position:relative;overflow:hidden}

/* Fotoraster: zwei Spalten, versetzt, laufen langsam gegenläufig */
.login-gallery{position:relative;flex:1 1 auto;min-height:44vh;max-height:58vh;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px;overflow:hidden}
.login-gallery:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,var(--lw-bg));pointer-events:none}
.login-col{overflow:hidden;position:relative}
.login-col-track{display:flex;flex-direction:column;gap:14px;animation:loginDrift 48s linear infinite}
.login-col-down .login-col-track{animation-direction:reverse;margin-top:-60px}
@keyframes loginDrift{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
.login-tile{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;flex:none}
.login-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Ohne eigene Fotos: warme Farbflächen mit Glas-Silhouette */
.login-tile-0{background:linear-gradient(160deg,#f3e3dc,#e2c3b8)}
.login-tile-1{background:linear-gradient(160deg,#7d2436,#b85468)}
.login-tile-2{background:linear-gradient(160deg,#efe6d6,#d8c3a2)}
.login-tile-3{background:linear-gradient(160deg,#f6ecd8,#e8cf9d)}
.login-tile-4{background:linear-gradient(160deg,#4a1a24,#8f2338)}
.login-tile-5{background:linear-gradient(160deg,#ebe3dc,#cdbfb3)}
.login-tile:not(:has(img)):before{content:"";position:absolute;left:50%;top:50%;width:34%;height:52%;transform:translate(-50%,-50%);
 border:2px solid rgba(255,255,255,.55);border-radius:45% 45% 50% 50%/35% 35% 65% 65%;border-bottom-width:0}
.login-tile:not(:has(img)):after{content:"";position:absolute;left:50%;top:74%;width:2px;height:16%;background:rgba(255,255,255,.55);transform:translateX(-50%);box-shadow:0 14px 0 8px transparent}

.login-panel{position:relative;z-index:1;padding:4px 24px calc(22px + env(safe-area-inset-bottom));width:100%;max-width:460px;margin:-40px auto 0;text-align:center}
.login-logo{width:68px;height:68px;object-fit:contain;display:block;margin:0 auto 10px}
.login-title{font:600 clamp(32px,8vw,42px)/1.05 'Playfair Display',Georgia,serif;letter-spacing:-.035em;color:var(--lw);margin:0 0 10px}
.login-tagline{font-size:17px;line-height:1.45;color:var(--lw-ink);margin:0 auto 24px;max-width:330px;font-weight:500}
.login-actions{display:grid;gap:12px}

.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 22px;border-radius:999px!important;
 font:600 16px/1.2 'DM Sans',sans-serif;letter-spacing:.005em;border:1.5px solid transparent;position:relative;transition:background .15s ease,border-color .15s ease,transform .1s ease}
.login-btn:active{transform:scale(.985)}
.login-btn-primary{background:var(--lw);color:#fff;border-color:var(--lw)}
.login-btn-primary:hover{background:var(--lw-dark);border-color:var(--lw-dark)}
.login-btn-outline{background:#fff;color:var(--lw-ink);border-color:var(--lw-ink)}
.login-btn-outline svg{position:absolute;left:22px}
.login-btn-outline:hover{background:#f7f2ee}
.login-btn-quiet{background:transparent;color:var(--lw-ink);min-height:48px;text-decoration:underline;text-underline-offset:4px;font-weight:500}

/* Schritt-Ansichten (Login, Kontodetails, Codes) */
.login-step{padding:calc(16px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom))}
.login-back{width:52px;height:52px;border-radius:50%!important;border:0;background:#fff;box-shadow:0 6px 22px rgba(40,24,20,.12);display:grid;place-items:center;color:var(--lw-ink);margin-bottom:22px;flex:none}
.login-step-body{width:100%;max-width:460px;margin:0 auto;flex:1}
.login-step:not(:has(.login-back)) .login-step-body{padding-top:48px}
.login-step-title{font:600 clamp(30px,7vw,36px)/1.1 'DM Sans',sans-serif;letter-spacing:-.03em;margin:0 0 10px;color:var(--lw-ink)}
.login-step-copy{font-size:17px;line-height:1.5;color:var(--lw-muted);margin:0 0 26px}
.login-step-icon{width:56px;height:56px;border-radius:18px;background:#f6e6e9;color:var(--lw);display:grid;place-items:center;margin-bottom:18px}

.login-screen .auth-form{display:grid;gap:14px;margin:0}
.login-screen .auth-field{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--lw-line);border-radius:16px;padding:11px 18px 10px;background:#fff;transition:border-color .15s ease}
.login-screen .auth-field:focus-within{border-color:var(--lw)}
.login-screen .auth-field>span{font-size:13px;color:var(--lw-muted);font-weight:500}
.login-screen .auth-field input{border:0;outline:0;background:transparent;padding:2px 0;font-size:18px;font-weight:600;color:var(--lw-ink);width:100%;min-width:0}
.login-screen .auth-field input::placeholder{color:#b5aaa1;font-weight:400}
.login-screen .auth-field small{font-size:11px;color:var(--lw-muted);margin-top:3px}
.login-screen .auth-code-input{font-size:30px!important;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.login-screen .auth-form .login-btn{margin-top:10px}

/* Schalter statt Häkchen */
.login-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;font-size:16px;line-height:1.45;color:var(--lw-ink);cursor:pointer}
.login-toggle>span button{border:0;background:none;padding:0;font:inherit;color:var(--lw-muted);text-decoration:underline;text-underline-offset:3px}
.login-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.login-toggle i{flex:none;width:64px;height:38px;border-radius:99px;background:#e4dcd5;position:relative;transition:background .18s ease}
.login-toggle i:after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .18s ease}
.login-toggle input:checked+i{background:var(--lw)}
.login-toggle input:checked+i:after{transform:translateX(26px)}
.login-toggle input:focus-visible+i{outline:3px solid #d9a3ae;outline-offset:2px}

.login-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:18px}
.login-screen .auth-link{border:0;background:none;padding:6px 0;color:var(--lw);font-weight:600;font-size:15px}
.login-switch{margin:26px 0 0;text-align:center;font-size:15px;color:var(--lw-muted)}
.login-switch button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--lw)}
.login-fineprint{font-size:13px;color:var(--lw-muted);margin-top:14px}
.login-screen .auth-notice{margin:0 0 18px;text-align:left;border-radius:12px}
.login-screen .auth-legal{margin-top:20px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--lw-muted)}
.login-screen .auth-legal button{border:0;background:none;padding:0;color:var(--lw-muted);text-decoration:underline;font-size:12px}

/* Plan-Auswahl nach der Registrierung */
.plan-card{display:block;width:100%;text-align:left;border:1.5px solid var(--lw-line);border-radius:22px!important;background:#fff;padding:20px 22px;margin:0 0 12px;color:var(--lw-ink)}
.plan-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.plan-card b{font-size:19px}
.plan-card em{font-style:normal;background:#1f7a55;color:#fff;border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600}
.plan-card small{display:block;font-size:15px;line-height:1.5;color:var(--lw-muted)}
.plan-card-pro{border:2.5px solid var(--lw-ink)}
.login-plan .login-btn{margin-top:14px}

/* 2FA-Dialog in den Einstellungen */
.mfa-copy{font-size:13px;line-height:1.6;color:var(--muted)}
.mfa-status{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.mfa-status span{display:grid;gap:4px}.mfa-status b{font-size:14px}.mfa-status small{font-size:12px;line-height:1.5}
.mfa-on{border-color:#b9d4c4;background:#f1f8f4;color:#1f5e41}
.mfa-qr{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:6px 0 12px}
.mfa-qr img{width:200px;height:200px}
.mfa-secret{display:inline-block;margin-top:6px;padding:6px 9px;background:var(--sand);border-radius:8px;font-size:13px;letter-spacing:.08em;word-break:break-all;user-select:all}
.modal-box .auth-code-input{font-size:24px!important;letter-spacing:.3em;text-align:center}

@media(min-width:900px){
 .login-start{flex-direction:row}
 .login-start .login-gallery{max-height:none;min-height:100vh;flex:1.1;padding:0 24px}
 .login-start .login-gallery:after{top:0;left:auto;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--lw-bg))}
 .login-start .login-panel{margin:auto;flex:1;padding:40px}
}
@media(prefers-reduced-motion:reduce){.login-col-track{animation:none}}

/* ===== Animationen: Einstieg (gestaffelt) und Code-Bestätigung – Farben unverändert ===== */
@keyframes loginRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes loginPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes loginGlow{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:.5;transform:scale(1.25)}}
/* Startseite: Logo pulsiert, Titel, Text und Buttons gleiten nacheinander herein */
.login-start .login-logo{animation:loginPulse 2.8s ease-in-out infinite}
.login-start .login-panel{position:relative}
.login-anim.login-start .login-logo,.login-anim.login-start .login-title,.login-anim.login-start .login-tagline,
.login-anim.login-start .login-actions>*,.login-anim.login-start .auth-legal{opacity:0;animation:loginRise .55s cubic-bezier(.2,.8,.2,1) forwards}
.login-anim.login-start .login-logo{animation:loginRise .55s cubic-bezier(.2,.8,.2,1) forwards,loginPulse 2.8s ease-in-out .7s infinite}
.login-anim.login-start .login-title{animation-delay:.08s}
.login-anim.login-start .login-tagline{animation-delay:.16s}
.login-anim.login-start .login-actions>*:nth-child(1){animation-delay:.26s}
.login-anim.login-start .login-actions>*:nth-child(2){animation-delay:.34s}
.login-anim.login-start .login-actions>*:nth-child(3){animation-delay:.42s}
.login-anim.login-start .login-actions>*:nth-child(4){animation-delay:.50s}
.login-anim.login-start .auth-legal{animation-delay:.58s}
/* Schritte: Zurück-Button, Überschrift, Text, dann jedes Feld und der Button nacheinander */
.login-anim .login-back,.login-anim .login-step-icon,.login-anim .login-step-title,.login-anim .login-step-copy,
.login-anim .auth-form>*,.login-anim .login-links,.login-anim .login-switch,.login-anim .login-fineprint{opacity:0;animation:loginRise .5s cubic-bezier(.2,.8,.2,1) forwards}
.login-anim .login-step-icon{animation:loginRise .5s cubic-bezier(.2,.8,.2,1) forwards,loginPulse 2.8s ease-in-out .6s infinite}
.login-anim .login-step-title{animation-delay:.06s}
.login-anim .login-step-copy{animation-delay:.12s}
.login-anim .auth-form>*:nth-child(1){animation-delay:.2s}
.login-anim .auth-form>*:nth-child(2){animation-delay:.27s}
.login-anim .auth-form>*:nth-child(3){animation-delay:.34s}
.login-anim .auth-form>*:nth-child(4){animation-delay:.41s}
.login-anim .auth-form>*:nth-child(5){animation-delay:.48s}
.login-anim .auth-form>*:nth-child(6){animation-delay:.55s}
.login-anim .auth-form>*:nth-child(n+7){animation-delay:.62s}
.login-anim .login-links,.login-anim .login-switch,.login-anim .login-fineprint{animation-delay:.6s}

/* Falscher Code: Feld wackelt */
@keyframes codeShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-10px)}30%{transform:translateX(9px)}45%{transform:translateX(-7px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.login-screen .auth-field:has(.auth-code-input.is-wrong){animation:codeShake .5s cubic-bezier(.36,.07,.19,.97) both;border-color:var(--lw)}

/* Richtiger Code: Kreis zeichnet sich, Häkchen erscheint */
.auth-success{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(255,253,251,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:asFade .25s ease both}
.auth-success svg{width:96px;height:96px}
.auth-success .as-circle{fill:none;stroke:var(--lw);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:asDraw .55s cubic-bezier(.65,0,.45,1) .05s forwards}
.auth-success .as-check{fill:none;stroke:var(--lw);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:asDraw .35s cubic-bezier(.65,0,.45,1) .55s forwards}
.auth-success svg{animation:asPop .4s cubic-bezier(.3,1.5,.5,1) .85s both}
.auth-success b{font:700 18px/1.2 'DM Sans',sans-serif;color:var(--lw-ink);opacity:0;animation:loginRise .35s ease .7s forwards}
.auth-success.static,.auth-success.static *{animation:none!important}
.auth-success.static .as-circle,.auth-success.static .as-check{stroke-dashoffset:0}
.auth-success.static b{opacity:1}
@keyframes asDraw{to{stroke-dashoffset:0}}
@keyframes asPop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes asFade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
 .login-anim *,.login-start .login-logo,.auth-success,.auth-success *{animation:none!important;opacity:1!important}
 .auth-success .as-circle,.auth-success .as-check{stroke-dashoffset:0}
 .login-screen .auth-field:has(.auth-code-input.is-wrong){outline:2px solid var(--lw)}
}