/* Anmeldeseite: eine Karte auf Papier, daneben drei Antworten. Baut auf stil.css auf. */

.zugang-seite { min-height: 100dvh; display: flex; flex-direction: column; }
.zugang-seite .fuss { margin-top: auto; }

.zugang { position: relative; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 36px 20px 80px; display: grid; gap: 44px; justify-items: center; overflow-x: clip; }
.zugang-glanz { position: absolute; left: 50%; top: 200px; width: 480px; height: 480px; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(60px); opacity: 0.5; background: var(--verlauf-glanz); pointer-events: none; }

.zugang-karte { position: relative; width: 100%; max-width: 520px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: 34px 26px 30px; box-shadow: var(--schatten); }
.zugang-titel { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); letter-spacing: -0.03em; }
.zugang-satz { color: var(--tinte-2); margin-top: 12px; font-size: 1.08rem; max-width: 38ch; }

.zugang-meldung { margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-feld); background: var(--akzent-hell); font-size: 0.98rem; }
.zugang-meldung.fehler { background: var(--fehler-flaeche); color: var(--fehler-flaeche-text); } /* Rollen: feste Hexwerte blieben im Dunkeln ein heller Kasten */
.zugang-meldung:empty { padding: 0; margin: 0; }
.zugang-wartet { display: none; }
.zugang-karte.wartet .zugang-wartet { display: block; margin-top: 26px; color: var(--tinte-2); animation: wartet-auf 200ms ease 300ms both; }
@keyframes wartet-auf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zugang-karte.wartet .zugang-wartet { animation: none; } }

/* Bis der Server gesagt hat, ob eine Sitzung besteht, bleibt der Weg unsichtbar; der Platz steht schon. */
.weg { margin-top: 26px; }
.zugang-karte.wartet .weg { visibility: hidden; }
.weg-titel { font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.15; }
.weg-satz { color: var(--tinte-2); margin: 10px 0 20px; max-width: 46ch; }
.knopf-breit { width: 100%; }
.weg-verweise { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; color: var(--tinte-2); font-size: 0.98rem; }
.weg-verweise a, .weg-verweise-einzeln a, .hilfe-liste a { color: var(--akzent-tief); font-weight: 600; }
.weg-verweise-einzeln { margin-top: 18px; color: var(--tinte-2); font-size: 0.98rem; }
.verweis-knopf { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--akzent-tief); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; }
.weg .formular-knoepfe { margin-top: 20px; }
/* Schmal: die Knöpfe stehen untereinander in ihrer Reihenfolge, der Hauptknopf zuunterst am Daumen. */
@media (max-width: 479px) { .weg .formular-knoepfe { flex-direction: column; } .weg .formular-knoepfe .knopf { width: 100%; } }
.weg-einladung { padding: 16px 18px; border-radius: var(--radius-feld); background: var(--akzent-hell); }
.weg-einladung strong { color: var(--tinte); }

/* Ein Knopf, der arbeitet: der Text weicht dem Rad, der Platz bleibt. Die Nachbarn sind derweil gesperrt. */
.knopf { position: relative; }
.knopf[aria-busy="true"] { color: transparent; opacity: 1; }
/* Das Rad traegt die Schriftfarbe des Knopfs (Tinte auf Rosa), nicht die Seitentinte: im Dunkeln drehte sonst ein heller Strich auf Pink. */
.knopf[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--akzent-text) 22%, transparent); border-top-color: var(--akzent-text); animation: rad 800ms linear infinite; }
.knopf-leise[aria-busy="true"]::after { border-color: color-mix(in oklab, var(--tinte) 22%, transparent); border-top-color: var(--tinte); }
.knopf.gesperrt { pointer-events: none; opacity: 0.5; }
@keyframes rad { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .knopf[aria-busy="true"] { color: inherit; opacity: 0.6; }
  .knopf[aria-busy="true"]::after { display: none; }
}

.zugang-hilfe { position: relative; width: 100%; max-width: 520px; }
.zugang-hilfe h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.hilfe-liste { margin: 0; display: grid; gap: 18px; }
.hilfe-liste dt { font-weight: 700; }
.hilfe-liste dd { margin: 4px 0 0; color: var(--tinte-2); max-width: 58ch; }

@media (min-width: 1000px) {
  .zugang { grid-template-columns: minmax(0, 520px) minmax(0, 400px); justify-content: center; align-items: start; column-gap: 72px; padding-top: 72px; }
  .zugang-glanz { left: calc(50% - 200px); top: 300px; width: 620px; height: 620px; }
  .zugang-karte { padding: 44px 40px 40px; }
  .zugang-hilfe { padding-top: 12px; }
}