/* Anmeldeseite */

.an-seite{
  min-height:100dvh; display:grid; place-items:center; padding:24px 18px;
  background:linear-gradient(160deg,#F7F7FC 0%,#EFEFFA 46%,#F6F3FB 100%);
  overflow:hidden; position:relative;
}

.an-wolken{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.an-wolken i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42}
.an-wolken i:nth-child(1){width:44vw;height:44vw;min-width:340px;min-height:340px;
  left:-10vw;top:-12vw;background:#7C6CF5;animation:an-schweben 22s ease-in-out infinite}
.an-wolken i:nth-child(2){width:38vw;height:38vw;min-width:300px;min-height:300px;
  right:-8vw;bottom:-10vw;background:#F09ACB;animation:an-schweben 26s ease-in-out infinite reverse}
.an-wolken i:nth-child(3){width:30vw;height:30vw;min-width:240px;min-height:240px;
  right:22vw;top:8vh;background:#66D9D0;opacity:.3;animation:an-schweben 30s ease-in-out infinite}
@keyframes an-schweben{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3vw,4vh) scale(1.08)}
}

.an-mitte{width:100%;max-width:430px;position:relative;z-index:1}

.an-kasten{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px; padding:clamp(26px,5vw,38px);
  box-shadow:0 30px 70px -24px rgba(50,35,120,.32), 0 2px 6px rgba(50,35,120,.06);
  animation:an-auf .5s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes an-auf{from{opacity:0;transform:translateY(18px) scale(.985)}}

.an-marke{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:26px}
.an-logo-bild{height:46px;width:auto}
.an-marke p{font-size:13px;color:var(--text-3);line-height:1.4}

.an-form{margin-top:4px}
.an-form .ob-feld{margin-bottom:16px}

.an-eingabe{position:relative;display:flex;align-items:center}
.an-eingabe > [data-lucide]{position:absolute;left:13px;color:var(--text-3);
  width:17px;height:17px;pointer-events:none;z-index:1}
.an-eingabe .ob-eingabe{height:46px;padding-left:40px;padding-right:44px;font-size:15.5px;
  background:rgba(255,255,255,.75)}
.an-augen{position:absolute;right:6px;width:34px;height:34px;display:grid;place-items:center;
  color:var(--text-3);border-radius:8px}
.an-augen:hover{background:var(--flaeche-2);color:var(--text-2)}
.an-augen [data-lucide]{width:17px;height:17px}

.an-form .ob-knopf-haupt{margin-top:8px;height:48px;font-size:15px;
  background:linear-gradient(135deg,#5B4DE8,#7C5CF0);border-color:transparent;
  box-shadow:0 12px 28px -12px rgba(91,77,232,.9)}
.an-form .ob-knopf-haupt:hover{filter:brightness(1.07)}

.an-fuss{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;color:var(--text-3)}
.an-fuss [data-lucide]{width:14px;height:14px}

.an-seite .ob-meldung{margin-bottom:18px}

@media(max-width:480px){
  .an-kasten{border-radius:20px}
}

@media(prefers-color-scheme:dark){
  .an-seite{background:linear-gradient(160deg,#0F0E1A 0%,#151330 48%,#120F22 100%)}
  .an-kasten{background:rgba(28,26,48,.72);border-color:rgba(255,255,255,.1);
    box-shadow:0 30px 70px -24px rgba(0,0,0,.7)}
  .an-marke p,.an-fuss{color:#9A93BE}
  .an-eingabe .ob-eingabe{background:rgba(20,18,38,.7);border-color:rgba(255,255,255,.13);
    color:#F2F0FF}
  .an-eingabe .ob-eingabe::placeholder{color:#8A83AC}
  .an-form .ob-feld > label{color:#C6BFE6}
  .an-augen:hover{background:rgba(255,255,255,.08)}
  .an-wolken i{opacity:.3}
}