/* Anmeldeseite (Baukasten – in allen fünf Anwendungen gleich, nie einzeln ändern).
   Ganze Seite: ruhige, dauerhaft bewegte Szene (Lichter, Punkte, Wellen) + Karte in der Mitte.
   Farben kommen aus der Anwendung: Sie setzt auf .anm die Variablen
     --anm-grund, --anm-grund-2  dunkler Hintergrund (Verlauf)
     --anm-akzent, --anm-akzent-2  zwei Lichtfarben
     --anm-auf-akzent  Schrift auf dem Hauptknopf
     --anm-flaeche, --anm-flaeche-2, --anm-text, --anm-leise, --anm-linie  Karte
   Kein Inline-Skript, keine externen Schriften. Bewegung aus, wenn das System es wünscht. */
.anm-body { margin: 0; background: var(--anm-grund, #10162a); }
/* Vorgaben an :root, damit die Zuweisung der Anwendung an .anm immer gewinnt (unabhängig von der Ladereihenfolge). */
:root { --anm-grund: #10162a; --anm-grund-2: #252e54; --anm-akzent: #eea33a; --anm-akzent-2: #5b6cff; --anm-auf-akzent: #1b1403;
  --anm-flaeche: #fff; --anm-flaeche-2: #f4f3ef; --anm-text: #161b2b; --anm-leise: #626979; --anm-linie: #e2ded5; }
.anm { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 2rem 1rem; overflow: hidden;
  isolation: isolate; color: var(--anm-text);
  background: linear-gradient(160deg, var(--anm-grund) 0%, var(--anm-grund-2) 130%); }

/* ---------- Szene ---------- */
.anm-szene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.anm-licht { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.anm-licht.l1 { width: 58vmax; height: 58vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(circle, var(--anm-akzent) 0%, transparent 65%); animation: anm-zieh-1 46s ease-in-out infinite alternate; }
.anm-licht.l2 { width: 64vmax; height: 64vmax; right: -24vmax; bottom: -28vmax;
  background: radial-gradient(circle, var(--anm-akzent-2) 0%, transparent 65%); animation: anm-zieh-2 58s ease-in-out infinite alternate; }
.anm-licht.l3 { width: 36vmax; height: 36vmax; left: 46%; top: 54%; opacity: .28;
  background: radial-gradient(circle, var(--anm-akzent) 0%, transparent 65%); animation: anm-zieh-3 72s ease-in-out infinite alternate; }
.anm-punkte { position: absolute; inset: -50%; opacity: .5; will-change: transform;
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.6px); background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 68%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 68%); }
.anm-punkte.p1 { animation: anm-drift 120s linear infinite; }
.anm-punkte.p2 { background-size: 88px 88px; opacity: .35; animation: anm-drift 200s linear infinite reverse; }
.anm-ring { position: absolute; left: 50%; top: 50%; width: 36rem; height: 36rem; margin: -18rem 0 0 -18rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); opacity: 0; animation: anm-welle 12s cubic-bezier(.2,.6,.3,1) infinite; }
.anm-ring.r2 { animation-delay: 4s; }
.anm-ring.r3 { animation-delay: 8s; }
@keyframes anm-zieh-1 { to { transform: translate(16vmax, 12vmax) scale(1.15); } }
@keyframes anm-zieh-2 { to { transform: translate(-18vmax, -10vmax) scale(.9); } }
@keyframes anm-zieh-3 { 0% { transform: translate(-22vmax, 6vmax); } 100% { transform: translate(10vmax, -20vmax) scale(1.3); } }
@keyframes anm-drift { to { transform: translate(184px, 92px); } }
@keyframes anm-welle { 0% { transform: scale(.55); opacity: 0; } 18% { opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- Karte ---------- */
.anm-karte { width: 100%; min-width: 0; max-width: 27rem; background: var(--anm-flaeche); color: var(--anm-text); border-radius: 22px;
  padding: 1.6rem 1.9rem 1.5rem; border: 1px solid rgba(255,255,255,.1); position: relative;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.2); animation: anm-herein .7s cubic-bezier(.2,.8,.2,1) both; }
.anm-karte > * { animation: anm-zeile .6s cubic-bezier(.2,.8,.2,1) both; }
.anm-karte > :nth-child(2) { animation-delay: .06s; } .anm-karte > :nth-child(3) { animation-delay: .12s; }
.anm-karte > :nth-child(4) { animation-delay: .18s; } .anm-karte > :nth-child(5) { animation-delay: .24s; }
.anm-karte > :nth-child(n+6) { animation-delay: .3s; }
@keyframes anm-herein { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes anm-zeile { from { opacity: 0; transform: translateY(8px); } }
.anm-marke { display: flex; align-items: center; gap: .65rem; font-weight: 650; font-size: 1rem; letter-spacing: -.01em; margin: 0 0 1.2rem; }
.anm-zeichen { width: 2.1rem; height: 2.1rem; border-radius: 11px; background: var(--anm-akzent); color: var(--anm-auf-akzent);
  display: grid; place-items: center; flex: none; font-size: 1.05rem; }
.anm-zeichen svg { width: 1.2rem; height: 1.2rem; }
.anm-marke img { max-height: 2.1rem; max-width: 9rem; }

/* Umschalter „Persönlich | Administration“ – beide Wege gleich gut sichtbar */
.anm-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: 13px; background: var(--anm-flaeche-2);
  border: 1px solid var(--anm-linie); margin: 0 0 1.5rem; }
.anm-wahl a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .5rem; border-radius: 10px; text-decoration: none;
  font-weight: 600; font-size: .92rem; color: var(--anm-leise); transition: background .2s, color .2s, box-shadow .2s; }
.anm-wahl a:hover { color: var(--anm-text); }
.anm-wahl a[aria-current="page"] { background: var(--anm-flaeche); color: var(--anm-text); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px -6px rgba(0,0,0,.25); }
.anm-wahl svg { width: 1rem; height: 1rem; flex: none; }
.anm-wahl .anm-haken { color: #1a8a55; }

.anm-schritt { display: inline-block; font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--anm-leise); margin: 0 0 .4rem; }
.anm-karte h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.015em; }
.anm-text { color: var(--anm-leise); margin: 0 0 1.3rem; font-size: .95rem; line-height: 1.5; }
.anm-text strong { color: var(--anm-text); }

/* Hauptknopf mit Passkey-Zeichen; beim Warten auf das Gerät dreht sich der Ring */
.anm-knopf { width: 100%; display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.4rem; padding: .7rem 1.2rem;
  border: 0; border-radius: 14px; background: var(--anm-akzent); color: var(--anm-auf-akzent); font: inherit; font-weight: 650; font-size: 1.05rem;
  cursor: pointer; position: relative; overflow: hidden; text-decoration: none;
  box-shadow: 0 10px 26px -12px var(--anm-akzent); transition: transform .15s, box-shadow .2s, filter .2s; }
.anm-knopf::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: anm-glanz 5.5s ease-in-out infinite; }
@keyframes anm-glanz { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.anm-knopf:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 30px -12px var(--anm-akzent); }
.anm-knopf:active { transform: translateY(0) scale(.99); }
.anm-knopf:focus-visible { outline: 2px solid color-mix(in srgb, var(--anm-akzent) 55%, var(--anm-text)); outline-offset: 3px; }
.anm-knopf:disabled { cursor: progress; filter: saturate(.75); transform: none; }
.anm-knopf:disabled::after { animation: none; }
.anm-knopf.dunkel { background: var(--anm-text); color: var(--anm-flaeche); box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
.anm-pk { width: 1.7rem; height: 1.7rem; flex: none; position: relative; display: grid; place-items: center; }
.anm-pk svg { width: 1.25rem; height: 1.25rem; }
.anm-pk::before { content: ""; position: absolute; inset: -.2rem; border-radius: 50%; border: 2px solid currentColor; opacity: .28; animation: anm-puls 2.6s ease-out infinite; }
.anm-knopf:disabled .anm-pk::before { opacity: .9; border-color: currentColor transparent transparent transparent; animation: anm-dreh .8s linear infinite; }
@keyframes anm-puls { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes anm-dreh { to { transform: rotate(360deg); } }
.anm-zweit { display: block; text-align: center; margin: .9rem 0 0; font-size: .92rem; color: var(--anm-leise); }
.anm-meldung { min-height: 1.3rem; margin: .7rem 0 0; font-size: .88rem; text-align: center; color: var(--anm-leise); }
.anm-meldung.fehler, .anm-meldung[role="alert"] { color: #c0392b; font-weight: 550; }
.anm-hinweis { border-radius: 12px; padding: .7rem .85rem; font-size: .88rem; line-height: 1.45; background: var(--anm-flaeche-2); border: 1px solid var(--anm-linie); margin: 0 0 1rem; }
.anm-feld { margin: 0 0 1rem; }
.anm-feld label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 .3rem; }
.anm-feld input { width: 100%; min-height: 2.8rem; border-radius: 11px; border: 1px solid var(--anm-linie); background: var(--anm-flaeche);
  color: var(--anm-text); padding: .5rem .8rem; font: inherit; }

/* Fußzeile: nur das Nötigste, der Rest klappt auf */
.anm-fuss { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; margin: 1.4rem 0 0; padding: .95rem 0 0;
  border-top: 1px solid var(--anm-linie); font-size: .86rem; color: var(--anm-leise); }
.anm-fuss a, .anm-fuss summary { color: var(--anm-leise); text-decoration: underline; text-decoration-color: var(--anm-linie); text-underline-offset: 3px; cursor: pointer; }
.anm-fuss a:hover, .anm-fuss summary:hover { color: var(--anm-text); }
.anm-fuss summary { list-style: none; }
.anm-fuss summary::-webkit-details-marker { display: none; }
.anm-fuss details[open] { flex-basis: 100%; order: 9; }
.anm-fuss details[open] summary { color: var(--anm-text); font-weight: 600; text-decoration: none; }
.anm-fuss details > div { margin-top: .5rem; animation: anm-zeile .35s ease both; }
.anm-fuss details p { margin: 0 0 .5rem; line-height: 1.45; }
.anm-befehl { display: flex; align-items: stretch; gap: .4rem; margin: 0 0 .5rem; }
.anm-befehl code { flex: 1; min-width: 0; display: block; padding: .55rem .7rem; border-radius: 10px; background: #0f1424; color: #e8ecff;
  font: .78rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.anm-befehl button { flex: none; border: 1px solid var(--anm-linie); background: var(--anm-flaeche); color: var(--anm-text); border-radius: 10px;
  padding: 0 .7rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.anm-befehl button:hover { background: var(--anm-flaeche-2); }
.anm-unten { position: absolute; left: 0; right: 0; bottom: .9rem; text-align: center; font-size: .76rem; color: rgba(255,255,255,.5); letter-spacing: .02em; }

/* ---------- Erfolg: Haken zeichnet sich, Wellen laufen aus, dann weiter ---------- */
.anm-erfolg { position: absolute; inset: 0; border-radius: inherit; background: var(--anm-flaeche); display: grid; place-content: center; justify-items: center;
  gap: .3rem; text-align: center; padding: 1.5rem; z-index: 2; animation: anm-blende .35s ease both !important; }
.anm-erfolg svg { width: 5.2rem; height: 5.2rem; margin-bottom: .6rem; overflow: visible; }
.anm-erfolg .k { fill: none; stroke: #1a9a5c; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 202; stroke-dashoffset: 202;
  transform: rotate(-90deg); transform-origin: 36px 36px; animation: anm-strich .7s .15s cubic-bezier(.6,0,.2,1) forwards; }
.anm-erfolg .f { fill: #1a9a5c; opacity: 0; transform-origin: 36px 36px; animation: anm-fuell .45s .75s cubic-bezier(.2,.9,.3,1.3) forwards; }
.anm-erfolg .h { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: anm-strich .4s .95s cubic-bezier(.3,.8,.3,1) forwards; }
.anm-erfolg strong { font-size: 1.3rem; letter-spacing: -.01em; animation: anm-zeile .5s .9s both; }
.anm-erfolg span { color: var(--anm-leise); font-size: .92rem; animation: anm-zeile .5s 1.05s both; }
.anm-balken { width: 9rem; height: 3px; border-radius: 3px; background: var(--anm-linie); overflow: hidden; margin-top: 1rem; animation: anm-zeile .4s 1.1s both; }
.anm-balken i { display: block; height: 100%; width: 100%; background: #1a9a5c; transform: scaleX(0); transform-origin: left; animation: anm-lauf var(--anm-dauer, 2.4s) .2s linear forwards; }
@keyframes anm-blende { from { opacity: 0; } }
@keyframes anm-strich { to { stroke-dashoffset: 0; } }
@keyframes anm-fuell { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes anm-lauf { to { transform: scaleX(1); } }
.anm.fertig .anm-ring { border-color: rgba(120,230,170,.55); animation-duration: 1.6s; animation-iteration-count: 2; }
.anm.fertig .anm-ring.r2 { animation-delay: .25s; } .anm.fertig .anm-ring.r3 { animation-delay: .5s; }
.anm.fertig .anm-licht { transition: opacity 1.2s; opacity: .75; }
.anm.raus .anm-karte { transition: transform .45s cubic-bezier(.6,0,.8,.3), opacity .45s; transform: scale(1.06); opacity: 0; }
.anm.raus .anm-szene { transition: opacity .45s; opacity: .4; }

@media (max-width: 30rem) { .anm { padding: 1rem .7rem; } .anm-karte { padding: 1.3rem 1.2rem 1.2rem; border-radius: 18px; } .anm-karte h1 { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) {
  .anm *, .anm *::before, .anm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .anm-ring { display: none; }
}