/* Ammann Tracking · Anmeldung: eine Quelle für den Look im Canvas (Anmeldung.dc.html) und auf der Live-Seite (live/index.html).
   Farben aus cc.css (hell und dunkel), Karte im Hintergrund aus cc-login-karte.js. Bewegung immer mindestens ease-in-out,
   Hover nur vergrößern (Eddie 09.10.: schnell starten, langsam ankommen), bei „Bewegung reduzieren“ steht alles still. */

/* Hülle, Karte und Schleier */
.an-shell{position:absolute;inset:0;overflow:hidden;background:var(--water);color:var(--ink);font:14px/1.45 Geist,"Geist Variable",ui-sans-serif,system-ui,sans-serif;letter-spacing:.005em}
.an-karte{position:absolute;inset:0;z-index:0;pointer-events:none}
.an-welt{position:absolute;inset:0}
.an-welt canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease-in-out}
.an-welt canvas.on{opacity:1}
/* Hell/Dunkel ohne View Transition (cc-theming in cc.css ersetzt jede transition): die Karte blendet im Takt der Seite */
html.cc-theming .an-welt canvas{transition:opacity .45s ease-in-out!important}
/* Schleier: links hinter der Überschrift ruhiger, an den Rändern dunkler, damit Text und Formular immer vorne stehen */
.an-karte::after{content:'';position:absolute;inset:0;
 background:radial-gradient(50% 58% at 24% 52%,rgba(var(--bgr),.66),rgba(var(--bgr),.24) 62%,rgba(var(--bgr),0) 100%),
  radial-gradient(130% 100% at 55% 50%,rgba(var(--bgr),0) 52%,rgba(var(--bgr2),.72) 100%),
  linear-gradient(180deg,rgba(var(--bgr),.4),rgba(var(--bgr),0) 22%,rgba(var(--bgr),0) 78%,rgba(var(--bgr),.5))}

/* Aufbau: Überschrift links, Anmeldefeld rechts; schmal untereinander */
.an{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.an-main{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:clamp(40px,6vw,112px);width:100%;max-width:1280px;margin:0 auto;padding:72px clamp(24px,5vw,72px) 12px;box-sizing:border-box}
.an-hero{display:flex;flex-direction:column;gap:20px;min-width:0;animation:anEin .9s cubic-bezier(.65,0,.35,1) both}
.an-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.an-title{margin:0;font-size:clamp(44px,6.1vw,92px);line-height:.94;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.an-title span{display:block;padding-bottom:.08em;background:linear-gradient(100deg,var(--acc2) 0%,var(--acc) 48%,rgba(var(--blur),1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.an-lead{margin:0;max-width:26em;text-wrap:balance;font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:var(--t2)}
.an-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:14px 16px 18px;font-size:11.5px;line-height:1.45;color:var(--fnt);text-align:center}
@keyframes anEin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Hell/Dunkel-Schalter */
.an-tg{all:unset;cursor:pointer;position:absolute;z-index:2;top:16px;right:16px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;font-size:12px;font-weight:500;color:var(--mut);
 background:linear-gradient(160deg,rgba(var(--g1),calc(.56*var(--gk))),rgba(var(--g2),calc(.48*var(--gk)))) padding-box,linear-gradient(150deg,rgba(255,255,255,.40),rgba(var(--fg),.06) 30%,rgba(var(--accr),.30)) border-box;border:1px solid transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.an-sw{position:relative;width:54px;height:28px;border-radius:14px;background:rgba(var(--fg),.08);border:1px solid rgba(var(--fg),.14);box-sizing:border-box}
.an-sw i{position:absolute;top:2px;left:2px;width:24px;height:22px;border-radius:11px;background:var(--acc);box-shadow:0 2px 8px rgba(var(--sh),calc(.4*var(--shk)));transition:transform .35s cubic-bezier(.65,0,.35,1)}
.an-sw svg{position:absolute;top:6px;width:14px;height:14px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease-in-out}

/* Glasfläche mit glänzender Kante */
.an-card{position:relative;width:100%;box-sizing:border-box;padding:26px 30px 24px;display:flex;flex-direction:column;gap:15px;border-radius:24px;border:1px solid transparent;
 background:linear-gradient(160deg,rgba(var(--g1),calc(.56*var(--gk))),rgba(var(--g2),calc(.48*var(--gk)))) padding-box,linear-gradient(150deg,rgba(255,255,255,.46),rgba(var(--fg),.07) 26%,rgba(var(--fg),.03) 60%,rgba(var(--accr),.40)) border-box;
 box-shadow:0 30px 70px -24px rgba(var(--sh),calc(.72*var(--shk))),inset 0 1px 0 rgba(var(--fg),.06);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);animation:anEin .8s .12s cubic-bezier(.65,0,.35,1) both}
.an-mark{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(var(--accr),.45),rgba(var(--blur),.08) 70%);border:1px solid rgba(var(--accr),.45)}
.an-mark i{width:12px;height:12px;border-radius:4px;transform:rotate(45deg);border:2px solid var(--acc2)}
.an-h{margin:2px 0 0;font-size:22px;font-weight:600;letter-spacing:-.015em}
.an-sub{margin:-8px 0 0;font-size:13.5px;line-height:1.5;color:var(--mut);text-wrap:pretty}
.an-sub b{color:var(--ink);font-weight:500}
.an-fld{display:flex;flex-direction:column;gap:6px}
.an-lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.an-in{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 6px 0 14px;border-radius:14px;background:rgba(var(--kbg),.55);border:1px solid rgba(var(--fg),.16);transition:border-color .25s ease-in-out,box-shadow .25s ease-in-out}
.an-in:focus-within{border-color:rgba(var(--accr),.55);box-shadow:0 0 0 3px rgba(var(--accr),.12)}
.an-in input{all:unset;flex:1;min-width:0;padding:12px 0;font-size:14.5px;color:var(--ink)}
.an-in input::placeholder{color:var(--fnt)}
.an-code input{font:600 24px 'Geist Mono',monospace;letter-spacing:.4em;text-align:center;padding:10px 0}
.an-eye{all:unset;cursor:pointer;flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--mut);transition:background .25s ease-in-out,color .25s ease-in-out}
.an-eye:hover{background:rgba(var(--fg),.07);color:var(--ink)}
.an-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.an-go{all:unset;box-sizing:border-box;cursor:pointer;position:relative;isolation:isolate;width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;font-size:14.5px;font-weight:600;color:var(--onacc);
 background:linear-gradient(135deg,rgba(var(--blur),.95),rgba(var(--accr),.85)) padding-box,linear-gradient(150deg,rgba(255,255,255,.9),rgba(var(--fg),.2)) border-box;border:1px solid transparent;box-shadow:0 12px 34px -12px rgba(var(--blur),.7);transition:opacity .25s ease-in-out}
.an-go[disabled]{cursor:default;opacity:.5}
.an-go2{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;font-size:14px;font-weight:500;border:1px solid rgba(var(--fg),.18);transition:background .25s ease-in-out}
.an-go2:hover{background:rgba(var(--fg),.06)}
.an-go2 svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.an-lnk{all:unset;cursor:pointer;font-size:13px;font-weight:500;color:var(--acc);transition:color .25s ease-in-out}
.an-lnk:hover{color:var(--acc2);text-decoration:underline}
.an-lnk:focus-visible,.an-go:focus-visible,.an-go2:focus-visible,.an-tg:focus-visible,.an-chip:focus-visible,.an-pf:focus-visible,.an-eye:focus-visible{outline:2px solid rgba(var(--accr),.7);outline-offset:2px}
.an-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-6px}
.an-right{display:flex;justify-content:flex-end;margin-top:-8px}
.an-or{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--fnt)}
.an-or::before,.an-or::after{content:'';flex:1;height:1px;background:rgba(var(--fg),.1)}
.an-hint{margin:-8px 0 0;font-size:12px;line-height:1.45;color:var(--mut);text-align:center}
.an-err{font-size:13px;line-height:1.45;color:var(--red2);background:rgba(var(--redr),.12);border:1px solid rgba(var(--redr),.35);border-radius:12px;padding:10px 12px;animation:pop .45s cubic-bezier(.65,0,.35,1)}
.an-ok{font-size:13.5px;line-height:1.55;color:var(--t2);background:rgba(var(--grnr),.10);border:1px solid rgba(var(--grnr),.35);border-radius:12px;padding:11px 13px;animation:fade .4s ease-in-out}
.an-info{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--t2);background:rgba(var(--accr),.10);border:1px solid rgba(var(--accr),.38);border-radius:12px;padding:11px 13px;animation:anEin .45s cubic-bezier(.65,0,.35,1)}
.an-info svg{flex-shrink:0;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.an-info b{color:var(--ink);font-weight:600}
.an-wait{display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.45;color:var(--amb2);background:rgba(var(--ambr),.10);border:1px solid rgba(var(--ambr),.4);border-radius:12px;padding:10px 12px;animation:pop .45s cubic-bezier(.65,0,.35,1)}
.an-wait b{font-family:'Geist Mono',monospace;font-weight:600}
.an-bar{height:4px;border-radius:2px;background:rgba(var(--ambr),.18);overflow:hidden}
.an-bar i{display:block;height:100%;border-radius:2px;background:var(--amb);transform-origin:left;transition:transform .25s ease-in-out}
.an-chk{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;user-select:none}
.an-box{flex-shrink:0;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;border:1px solid rgba(var(--fg),.28);transition:background .25s ease-in-out,border-color .25s ease-in-out}
.an-box.on{background:var(--acc);border-color:var(--acc)}
.an-box svg{width:12px;height:12px;fill:none;stroke:var(--onacc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.an-meter{display:flex;align-items:center;gap:10px;margin-top:-6px;font-size:12px;color:var(--mut)}
.an-meter span{flex:1;height:4px;border-radius:2px;background:rgba(var(--fg),.1);overflow:hidden}
.an-meter i{display:block;height:100%;border-radius:2px;transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.35,1),background .35s ease-in-out}
.an-match{margin-top:-8px;font-size:12px}
.an-pk{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:8px 0 2px}
.an-pki{width:72px;height:72px;border-radius:99px;display:grid;place-items:center;background:rgba(var(--accr),.12);border:1px solid rgba(var(--accr),.4);color:var(--acc)}
.an-pki.pulse{animation:anPulse 1.4s ease-in-out infinite}
.an-pki svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes anPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accr),.35);transform:scale(1)}50%{box-shadow:0 0 0 14px rgba(var(--accr),0);transform:scale(1.04)}}
.an-pk p{margin:0;font-size:13.5px;line-height:1.5;color:var(--t2);max-width:320px;text-wrap:pretty}
.an-demo{margin-top:2px;padding-top:14px;border-top:1px solid rgba(var(--fg),.08);display:flex;flex-direction:column;gap:9px}
.an-demo-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.an-demo-h span:last-child{letter-spacing:0;text-transform:none;font-size:12px}
.an-demo-h b{font:500 12px 'Geist Mono',monospace;color:var(--ink)}
.an-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.an-chip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:12px;background:rgba(var(--fg),.035);border:1px solid rgba(var(--fg),.09);transition:background .25s ease-in-out,border-color .25s ease-in-out}
.an-chip:hover{border-color:rgba(var(--fg),.3)}
.an-chip.on{background:rgba(var(--accr),.16);border-color:rgba(var(--accr),.55)}
.an-chip b{font-size:12.5px;font-weight:600}
.an-chip span{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-pf{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(var(--fg),.16);font-size:13px;font-weight:500;transition:background .25s ease-in-out}
.an-pf:hover{background:rgba(var(--fg),.06)}
.an-pf em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:var(--onacc);font:700 10.5px/18px 'Geist Mono',monospace;text-align:center}

/* Hover (Eddie 09.10.): nur vergrößern, kein Versatz; Schatten liegt fertig auf ::after, animiert wird nur seine Deckkraft */
.an-go::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
 box-shadow:0 1px 2px rgba(var(--sh),calc(.3*var(--shk))),0 8px 18px -6px rgba(var(--blur),.55),0 26px 48px -16px rgba(var(--blur),.75);transition:opacity .36s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
 .an-go,.an-go2,.an-tg,.an-pf,.an-chip{transition:transform .36s cubic-bezier(.22,1,.36,1),background .25s ease-in-out,border-color .25s ease-in-out,opacity .25s ease-in-out}
 .an-go:not([disabled]):hover,.an-go2:hover{transform:scale(1.02)}
 .an-go:not([disabled]):hover::after{opacity:1}
 .an-tg:hover,.an-pf:hover,.an-chip:hover{transform:scale(1.035)}
}

/* Breiten */
@media (max-width:960px){
 .an-main{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:30px;padding:80px 20px 8px}
 .an-hero{align-items:center;text-align:center;gap:16px}
 .an-title{font-size:clamp(34px,7.4vw,60px)}
 .an-title span{display:inline;padding:0}
 .an-card{max-width:440px}
 .an-karte::after{background:radial-gradient(70% 20% at 50% 30%,rgba(var(--bgr),.5),rgba(var(--bgr),0) 100%),
  radial-gradient(150% 110% at 50% 45%,rgba(var(--bgr),0) 55%,rgba(var(--bgr2),.55) 100%)}
}
@media (max-width:520px){
 .an-main{padding:68px 12px 4px;gap:22px}
 .an-eyebrow{font-size:11px;letter-spacing:.14em;gap:10px}
 .an-eyebrow .an-mark{width:28px;height:28px;border-radius:9px}
 .an-title{font-size:clamp(30px,10vw,44px);letter-spacing:-.035em}
 .an-lead{font-size:14.5px}
 .an-card{padding:22px 18px 20px;gap:14px}
 .an-h{font-size:20px}
 .an-acc{grid-template-columns:minmax(0,1fr)}
 .an-tg{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
 .an-welt canvas{transition:none}
 .an-hero,.an-card,.an-info,.an-err,.an-ok,.an-wait,.an-pki.pulse{animation:none}
}