/* Manda Home – Kundenkonto: Anmeldebühne (Google/Apple/E-Mail-Link/Code), Willkommen, App-Installation. Hell (Creme) und Dunkel (Walnuss) über base.css-Variablen. */
.konto-stage{position:relative;padding:clamp(28px,6vw,84px) 0 64px;overflow:hidden;isolation:isolate}
.konto-stage::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 50% 20%,color-mix(in srgb,var(--gold) 26%,transparent),transparent 70%)}
.konto-wrap{max-width:860px;margin:0 auto}
.konto-eyebrow{margin:0 0 .6em;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
.konto-hero{text-align:center;margin:0 auto clamp(26px,4vw,44px);max-width:640px;animation:konto-rise .5s var(--ease,ease) both}
.konto-hero h1{font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.08;margin:0 0 .35em}
.konto-hero .lead{margin:0;color:var(--text-2)}
.konto-note{max-width:640px;margin:0 auto 22px}
.konto-note-soft{background:var(--accent-soft);border-left-color:var(--gold)}
.konto-way-t{text-align:center;color:var(--text-3);font-size:.92rem;font-weight:600;margin:0 0 14px}
/* Drei gleichwertige Wege */
.konto-ways{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));animation:konto-rise .5s .05s var(--ease,ease) both}
.konto-ways-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px;margin:0 auto}
.konto-ways-1{grid-template-columns:minmax(0,1fr);max-width:420px;margin:0 auto}
.konto-way{margin:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:0 18px 40px -28px rgba(46,36,32,.45);transition:transform .25s var(--ease,ease),box-shadow .25s,border-color .25s}
.konto-way:hover,.konto-way:focus-within{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 26px 48px -26px rgba(154,116,69,.55)}
.konto-way-btn{appearance:none;width:100%;min-height:150px;padding:22px 18px 20px;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border-radius:inherit}
.konto-way-btn b{font-family:var(--font-display);font-size:1.35rem;font-weight:500;line-height:1.1}
.konto-way-btn small{color:var(--text-3);font-size:.82rem;line-height:1.35;max-width:22ch}
.konto-way-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border-soft);margin-bottom:4px}
.konto-way-ico svg{width:26px;height:26px}
.konto-way-ico.apple{background:var(--text);color:var(--bg)} .konto-way-ico.mail{color:var(--accent-2)}
.konto-way-form{display:none;padding:0 18px 20px;gap:10px;border-top:1px solid var(--border-soft);margin-top:-6px;padding-top:16px}
.konto-way-mail.open .konto-way-form{display:block}
.konto-way-mail.open .konto-way-btn{min-height:0;padding-bottom:12px}
.konto-way-form .field{margin-bottom:10px}
/* Trenner „oder manuell“ */
.konto-or{display:flex;align-items:center;gap:16px;margin:clamp(24px,4vw,40px) 0 18px;color:var(--text-3);font-size:.9rem;font-weight:600;letter-spacing:.04em}
.konto-or::before,.konto-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent)}
/* Manuelles Formular */
.konto-manual{max-width:640px;margin:0 auto;padding:clamp(22px,3.5vw,36px);animation:konto-rise .5s .08s var(--ease,ease) both}
.konto-manual-t{margin:0 0 18px;color:var(--text-2)}
.konto-manual .field{margin-bottom:16px}
.konto-manual .row.c2,.konto-manual .row.c3{gap:0 14px}
.konto-manual .input,.konto-code-form .input,.konto-way-form .input{min-height:50px}
.konto-hint{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--text-3);margin:4px 0 18px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2)}
.konto-hint svg{width:20px;height:20px;flex:none;color:var(--accent-2)}
details.konto-addr,details.konto-code{border-top:1px solid var(--border-soft);margin:4px 0 14px;padding-top:4px}
details.konto-addr summary,details.konto-code summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;font-weight:600;color:var(--accent-2);user-select:none}
details.konto-addr summary::-webkit-details-marker,details.konto-code summary::-webkit-details-marker{display:none}
details.konto-addr summary i,details.konto-code summary i{margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
details[open].konto-addr summary i,details[open].konto-code summary i{transform:rotate(-135deg)}
details.konto-addr>:not(summary){animation:konto-fade .35s ease both}
/* Code aus der E-Mail */
details.konto-code.card{max-width:640px;margin:18px auto 0;border-top:1px solid var(--border-soft);padding-top:clamp(10px,2vw,14px);padding-bottom:clamp(14px,2vw,22px)}
.konto-sum-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none}
.konto-sum-ico svg{width:18px;height:18px}
.konto-code-form{margin-top:10px} .konto-code-form .field{margin-bottom:16px}
.konto-digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:420px}
.konto-digit{width:100%;min-height:58px;text-align:center;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);padding:0;caret-color:var(--accent);transition:border-color .15s,box-shadow .15s,transform .15s}
.konto-digit:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);transform:translateY(-1px)}
.konto-digit.full{border-color:var(--gold)}
/* Mail unterwegs */
.konto-sent{max-width:640px;margin:0 auto;text-align:center;padding:clamp(26px,4vw,44px);animation:konto-rise .5s var(--ease,ease) both}
.konto-sent-ico{width:96px;height:96px;margin:0 auto 14px;color:var(--accent-2)} .konto-sent-ico svg{width:100%;height:100%}
.konto-fly{animation:konto-fly 1.8s ease-in-out infinite}
.konto-sent h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .3em} .konto-sent .lead{margin:0 0 14px;color:var(--text-2)}
.konto-sent details.konto-code{text-align:left;margin-top:18px}
/* Willkommen */
.konto-welcome{position:relative;text-align:center;max-width:560px;margin:clamp(10px,4vw,40px) auto 30px;padding:clamp(28px,5vw,52px) 24px;animation:konto-rise .9s var(--ease,ease) both}
.konto-glow{position:absolute;inset:0;z-index:-1;border-radius:50%;filter:blur(40px);background:radial-gradient(circle,color-mix(in srgb,var(--gold) 38%,transparent),transparent 65%);animation:konto-glow 2.4s ease-in-out infinite alternate}
.konto-avatar{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:2.6rem;color:var(--on-accent,#fff8ee);background:linear-gradient(145deg,var(--accent-2),var(--gold));box-shadow:0 20px 44px -16px rgba(154,116,69,.75);animation:konto-pop .8s .15s cubic-bezier(.2,.9,.3,1.3) both}
.konto-welcome h1{font-size:clamp(2rem,5.2vw,3.2rem);margin:0 0 .3em;animation:konto-fade .9s .45s ease both}
.konto-welcome .lead{color:var(--text-2);margin:0 0 20px;animation:konto-fade .9s .7s ease both}
.konto-welcome .btn{animation:konto-fade .9s 1s ease both}
.konto-progress{height:3px;max-width:220px;margin:0 auto 22px;border-radius:3px;background:var(--border-soft);overflow:hidden}
.konto-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));animation:konto-bar 2.2s .6s linear both}
/* App installieren */
.konto-install{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:start;max-width:640px;margin:clamp(22px,4vw,36px) auto 0;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-soft) 70%,var(--surface)));border-color:color-mix(in srgb,var(--gold) 45%,var(--border-soft));animation:konto-rise .5s .1s var(--ease,ease) both}
.konto-install-account{margin-left:0;margin-right:0;max-width:none;margin-bottom:22px}
.konto-install-ico{width:64px;height:64px;color:var(--accent-2)} .konto-install-ico svg{width:100%;height:100%} .konto-install-badge{fill:var(--surface)}
.konto-install h3{margin:0 0 .25em;font-size:1.35rem} .konto-install-sub{margin:0 0 14px;color:var(--text-2)}
.konto-install .btn{display:inline-flex;align-items:center;gap:10px} .konto-install .btn svg{width:20px;height:20px}
.konto-ios{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.konto-ios li{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border-soft);font-weight:500}
.konto-ios li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent,#fff8ee);font-size:.78rem;font-weight:700;display:grid;place-items:center;flex:none}
.konto-ios-ico{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--accent-2)} .konto-ios-ico svg{width:18px;height:18px}
.konto-install-done{color:var(--gruen);font-weight:600;margin:0}
/* Kasse + Danke + Konto */
.konto-ck{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;margin:0 0 16px;border-radius:var(--radius-sm);background:var(--surface-2);font-size:.9rem;color:var(--text-2)}
.konto-ck-btns{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} .konto-ck-btns form{margin:0}
.konto-ck-in{display:flex;align-items:center;gap:10px;color:var(--gruen);font-weight:600;background:color-mix(in srgb,var(--gruen) 10%,var(--surface-2))} .konto-ck-in svg{width:20px;height:20px;flex:none}
.konto-thanks{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0}
.konto-thanks h3{margin:0 0 .2em} .konto-thanks p{margin:0}
.konto-linked{margin-top:10px}
/* Bewegung */
@keyframes konto-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes konto-fade{from{opacity:0}to{opacity:1}}
@keyframes konto-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes konto-glow{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
@keyframes konto-bar{to{width:100%}}
@keyframes konto-fly{0%,100%{transform:translate(0,0);opacity:.4}50%{transform:translate(4px,-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.konto-stage *{animation-duration:.01s!important;animation-delay:0s!important}}
.konto-still .konto-stage *,.konto-still .konto-install{animation:none!important}
.konto-install-home{margin:32px auto 56px}
/* Handy */
@media (max-width:760px){.konto-ways,.konto-ways-2{grid-template-columns:1fr;max-width:none}.konto-way-btn{min-height:0;display:grid;grid-template-columns:46px 1fr;column-gap:14px;row-gap:2px;text-align:left;padding:14px 16px;align-items:center}.konto-way-btn b{font-size:1.2rem}.konto-way-btn small{max-width:none}.konto-way-ico{width:46px;height:46px;margin:0;grid-row:1/3}
 .konto-install{grid-template-columns:1fr}.konto-install-ico{width:48px;height:48px}.konto-manual .row.c3{grid-template-columns:1fr 1fr}.konto-manual .row.c3 .field:last-child{grid-column:1/-1}.konto-digits{gap:6px}.konto-digit{min-height:52px;font-size:1.4rem}.konto-thanks .btn{width:100%}.konto-ck-btns{margin-left:0;width:100%}.konto-ck-btns .btn,.konto-ck-btns form{flex:1}.konto-ck-btns form .btn{width:100%}}