/* Anmeldeseite „Aurora" (v3.6.1, 22.10.2026) — nur von login.html geladen.
   Glaskarte über weichem Nordlicht, neigt sich mit dem Zeiger und wendet sich nach erfolgreicher Anmeldung.
   Die Rechenprobe ist das echte Widget aus js/pruefung.js; es hängt seinen Grundstil (#pw-stil) NACH dieser
   Datei an — deshalb stehen die Widget-Regeln hier mit `.pruef` davor (höhere Spezifität). */
:root { --cyan: #5fd0e3; --gruen: #5fe0b0; --ok: #1fae7f; --rot: #b42323; --weich: cubic-bezier(.22, 1, .36, 1);
  --glas: rgba(255,255,255,.56); --glas-rand: rgba(255,255,255,.85);
  --glas-schatten: 0 40px 80px -30px rgba(11,113,137,.35), 0 12px 30px -18px rgba(20,40,50,.25);
  --pille: rgba(255,255,255,.7); --pille-rand: rgba(24,24,27,.12); --papier: #f3f1ec;
  --feld-ink: #18181b; --feld-label: #52525b; --text-ink: #18181b; --text-dim: #4a4a53; --text-faint: #5b5b64; }
:root[data-theme="dark"] { --rot: #ff9a9a; --glas: rgba(18,34,52,.46); --glas-rand: rgba(160,225,240,.22);
  --glas-schatten: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 80px -30px rgba(95,208,227,.25);
  --pille: rgba(6,16,28,.45); --pille-rand: rgba(190,235,245,.2); --papier: #050c18;
  --feld-ink: #ececee; --feld-label: #aab4bc; --text-ink: #f1f6f8; --text-dim: #b4c0c8; --text-faint: #98a6b0; }

* { box-sizing: border-box; }
html { background: var(--papier); }
body.seite-login { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden;
  padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); background: transparent; color: var(--text-ink); }
#aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.korn { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.buehne { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.marke { position: relative; width: 76px; height: 76px; margin-bottom: 26px; z-index: 2; opacity: 0;
  animation: auf .9s var(--weich) .1s forwards, schweben 7s ease-in-out 1s infinite; }
.marke img { display: block; width: 100%; height: 100%; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 22px 40px -14px rgba(11,113,137,.55), 0 0 60px -6px rgba(95,208,227,.55); }
.marke::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -22px; height: 12px; border-radius: 50%;
  background: rgba(11,60,75,.28); filter: blur(8px); z-index: -1; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.raum { width: 100%; perspective: 1100px; opacity: 0; animation: auf .9s var(--weich) .25s forwards; }
.karte { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; }
.seite { border-radius: 34px; overflow: hidden; background: var(--glas); border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: var(--glas-schatten), inset 0 1px 0 rgba(255,255,255,.55); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vorn { position: relative; padding: 38px 34px 30px; margin: 0; }
.hinten { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center; text-align: center; padding: 30px; }
.glanz { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: var(--ga, 0); mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(255,255,255,.55), rgba(255,255,255,.12) 38%, transparent 62%); }
:root[data-theme="dark"] .glanz { mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(190,240,250,.38), rgba(95,208,227,.08) 40%, transparent 62%); }
.vorn > *:not(.glanz) { position: relative; }

.gruss { font: .76rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; text-align: center; }
.vorn h1 { font: 600 1.95rem/1.1 var(--font-display); letter-spacing: -.035em; margin: 0 0 8px; text-align: center; color: var(--text-ink); min-height: 2.15rem; }
.unter { margin: 0 0 28px; text-align: center; color: var(--text-dim); font-size: .96rem; }
.inhalt.wackeln { animation: wackeln .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes wackeln { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

/* Felder: Pille mit Symbol und schwebender Beschriftung */
.feld { position: relative; margin-bottom: 12px; border-radius: 999px; }
.feld input { width: 100%; margin: 0; height: 58px; padding: 22px 52px 6px 54px; border-radius: 999px; font-size: 1rem; color: var(--feld-ink);
  background: var(--pille); border: 1px solid var(--pille-rand); transition: border-color .25s, box-shadow .35s, background .25s; }
.feld input:focus { outline: none; }
.feld input:focus-visible { border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 38%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--brand) 55%, transparent); }
.feld label { position: absolute; left: 54px; top: 50%; translate: 0 -50%; font-size: .96rem; color: var(--feld-label); pointer-events: none;
  text-transform: none; letter-spacing: 0; margin: 0; font-weight: 400; transition: top .3s var(--weich), font-size .3s var(--weich), color .3s; }
.feld input:focus + label, .feld input:not(:placeholder-shown) + label { top: 18px; font-size: .7rem; font-weight: 600; color: var(--brand); letter-spacing: .03em; }
:root[data-theme="dark"] .feld input:focus + label, :root[data-theme="dark"] .feld input:not(:placeholder-shown) + label { color: var(--cyan); }
.feld > svg { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--feld-label); pointer-events: none; transition: color .3s; }
.feld:focus-within > svg { color: var(--brand); }
:root[data-theme="dark"] .feld:focus-within > svg { color: var(--cyan); }
.auge { position: absolute; right: 9px; top: 50%; translate: 0 -50%; width: 40px !important; height: 40px; padding: 0 !important; margin: 0;
  display: grid; place-items: center; background: none !important; border: 0; border-radius: 50%; color: var(--feld-label); cursor: pointer; transition: color .2s, background .2s; }
.auge:hover { color: var(--feld-ink); background: color-mix(in srgb, var(--feld-ink) 8%, transparent) !important; }
.auge:focus-visible, .knopf:focus-visible, .pruef .pw-knopf:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.auge svg { width: 18px; height: 18px; }
.auge .zu { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .35s var(--weich); }
.auge[aria-pressed="true"] .zu { stroke-dashoffset: 0; }
.caps { height: 0; overflow: hidden; margin: 0; padding-left: 20px; font-size: .78rem; color: #92600f; transition: height .3s var(--weich), margin .3s; }
:root[data-theme="dark"] .caps { color: #f0c36a; }
.caps.an { height: 20px; margin: 0 0 6px; }

/* Rechenprobe: Pille um das echte Widget. Der Fortschrittsbalken des Widgets füllt die ganze Pille. */
.pruef { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px 10px 14px; margin: 6px 0 18px;
  cursor: pointer; overflow: hidden; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--text-faint) 70%, transparent);
  color: var(--text-ink); transition: border-color .4s, background .4s; }
.pruef:hover { border-color: var(--brand); }
.pruef:has(.pw-ok) { border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--gruen) 12%, transparent); cursor: default; }
.pruef:has(.pw-fehler) { border-style: solid; border-color: var(--rot); }
.pruef .pw-karte { position: static; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0; gap: 12px; border: 0; border-radius: 0; background: transparent; }
.pruef .pw-knopf { position: relative; z-index: 1; flex: none; width: 24px !important; height: 24px; min-width: 0; min-height: 0; padding: 0 !important; margin: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-faint) 80%, transparent); transition: background .3s, border-color .3s, transform .4s var(--weich); }
.pruef .pw-knopf:hover:not(:disabled) { border-color: var(--brand); }
.pruef .pw-knopf:disabled { opacity: 1; }
.pruef .pw-dreher { border-radius: 50%; border-top-color: var(--brand); }
.pruef .pw-ok .pw-knopf { background: var(--ok); border-color: var(--ok); transform: scale(1.08); }
.pruef .pw-haken { color: #fff; font-size: 14px; animation: auf .45s var(--weich); }
.pruef .pw-fehler .pw-knopf { border-color: var(--rot); }
.pruef .pw-text { position: relative; z-index: 1; font-size: .93rem; line-height: 1.25; }
.pruef .pw-unter { font: .68rem var(--font-mono); color: var(--text-faint); margin-top: 1px; transition: color .3s; }
.pruef .pw-unter:empty::before { content: "Rechenprobe"; }
.pruef .pw-ok .pw-unter { color: #0d7a57; }
:root[data-theme="dark"] .pruef .pw-ok .pw-unter { color: var(--gruen); }
.pruef .pw-fehler .pw-unter { color: var(--rot); }
.pruef .pw-balken { top: 0; bottom: 0; height: auto; z-index: 0; background: transparent; pointer-events: none; }
.pruef .pw-balken > i { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 26%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)); }

/* Zahnrad (Klassen setzt login.js: dreht · ok · fehler, Winkel über --drehung) */
.rad { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; color: var(--text-faint);
  transform: rotate(var(--drehung, 0deg)); transition: transform .65s cubic-bezier(.34, 1.56, .64, 1), color .3s; }
.rad.dreht { color: var(--brand); animation: rad-dreh .6s linear infinite; }
:root[data-theme="dark"] .rad.dreht { color: var(--cyan); }
.rad.ok { color: var(--ok); }
.rad.fehler { color: var(--rot); }
@keyframes rad-dreh { from { transform: rotate(var(--drehung, 0deg)); } to { transform: rotate(calc(var(--drehung, 0deg) + 360deg)); } }

/* Anmelden-Knopf; während der Anfrage (aria-busy, setzt login.js) schrumpft er zum Ladekreis */
.knopf { position: relative; width: 100%; height: 56px; margin: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 1rem var(--font-ui); color: #fff;
  background: linear-gradient(135deg, #0b7189, #0a5d72); box-shadow: 0 16px 30px -14px rgba(11,113,137,.85), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .3s var(--weich), box-shadow .3s, width .5s var(--weich), margin .5s var(--weich); }
:root[data-theme="dark"] .knopf { background: linear-gradient(135deg, #7fdcec, #2fa6bd); color: #04252d;
  box-shadow: 0 16px 34px -12px rgba(95,208,227,.55), inset 0 1px 0 rgba(255,255,255,.45); }
.knopf:hover { transform: translateY(-1px); box-shadow: 0 22px 36px -14px rgba(11,113,137,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.knopf:active { transform: scale(.98); }
.knopf:disabled { opacity: 1; cursor: progress; }
.knopf .pfeil { width: 18px; height: 18px; transition: transform .4s var(--weich); }
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf .kreis { display: none; width: 22px; height: 22px; animation: rad-dreh .8s linear infinite; }
.knopf[aria-busy="true"] { width: 56px; margin-left: calc(50% - 28px); }
.knopf[aria-busy="true"] .text, .knopf[aria-busy="true"] .pfeil { display: none; }
.knopf[aria-busy="true"] .kreis { display: block; }

/* Fehlertext: klappt auf, sobald login.js ihn füllt (auch mehrzeilige Servermeldungen) */
.fehler { max-height: 0; overflow: hidden; margin: 0; opacity: 0; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--rot);
  transition: max-height .3s var(--weich), margin .3s var(--weich), opacity .3s; }
.fehler:not(:empty) { max-height: 6em; margin-top: 12px; opacity: 1; }

.hinten .zeichen { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 24px; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 24px 44px -14px rgba(11,113,137,.6), 0 0 70px -6px rgba(95,208,227,.6); }
.hinten p { margin: 0 0 6px; font: 600 1.7rem/1.15 var(--font-display); letter-spacing: -.03em; color: var(--text-ink); overflow-wrap: anywhere; }
.hinten small { font: .76rem var(--font-mono); color: var(--text-dim); letter-spacing: .04em; }

.fuss { margin: 22px 0 0; text-align: center; font-size: .78rem; color: var(--text-dim); opacity: 0; animation: auf .9s var(--weich) .6s forwards; }
.fuss kbd { font: .7rem var(--font-mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--pille-rand); background: var(--pille); color: var(--text-ink); }
.fuss span { white-space: nowrap; }
@media (hover: none) { .nur-tastatur { display: none; } }

@media (max-width: 480px) {
  body.seite-login { padding-left: 14px; padding-right: 14px; }
  .vorn { padding: 32px 22px 26px; } .seite { border-radius: 30px; } .vorn h1 { font-size: 1.7rem; }
  .pruef { gap: 9px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marke, .raum, .fuss { opacity: 1; }
}