/* SPDX-License-Identifier: Apache-2.0 — Webkultur GmbH
 *
 * Die Anmeldeseite. Dieselben Tokens wie ueberall (`turnuswerk.css`), aber ein
 * anderes Layout: keine Kopfzeile, kein Raster, eine Karte in der Mitte.
 *
 * Warum eine eigene Datei und nicht ein paar Zeilen in `verwaltung.css`: die
 * Anmeldung ist die einzige Seite, die jemand OHNE Sitzung sieht — und die
 * erste, die ein Interessent sieht. Sie traegt genau eine Aufgabe, und das
 * Blatt soll das zeigen.
 */

.anmeldeseite {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--grund);
}

/* Leichte Aufhellung hinter der Karte: die Seite ist sonst eine grosse leere
   Flaeche, und die Karte schwebt darin ohne Bezug. Sehr zurueckhaltend --
   ein Verlauf, kein Bild, damit nichts aus dem Netz geholt werden muss. */
.anmeldeseite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--haupt) 10%, transparent), transparent 70%);
  pointer-events: none;
}

.anmelden {
  width: 100%;
  max-width: 23rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.anmelden-marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.anmelden-marke .marke-punkt { width: 0.6rem; height: 0.6rem; }
.anmelden-marke-name { letter-spacing: -0.01em; }

.anmelden-karte {
  width: 100%;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px -12px rgb(0 0 0 / 0.25);
  padding: 1.5rem;
}

.anmelden-karte h1 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.anmelden-karte > p { margin: 0.25rem 0 0; font-size: var(--bedien-groesse); color: var(--text-leise); }
.anmelden-karte .meldungen { margin-bottom: 0.9rem; }

/* Formular: die Felder duerfen hier gross sein, es sind nie mehr als zwei. */
.anmelden-formular { display: grid; gap: 0.8rem; margin: 1.1rem 0 0; }
.anmelden-formular .feld { font-size: 0.8rem; }
.anmelden-formular .feld input {
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
}
.anmelden-formular .knopf { justify-self: stretch; padding: 0.55rem; font-size: 0.9rem; }

/* Der Code wird abgetippt, oft am Handy — grosse Ziffern, weit auseinander. */
.anmelden-formular .anmelden-code {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem;
}

/* Mehrere Wege: jeder ein Knopf mit einer Zeile darunter, was er bedeutet. */
.anmelden-wege { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.anmelden-wege .knopf { display: block; text-align: center; padding: 0.55rem; font-size: 0.9rem; }
.anmelden-wege small { display: block; margin-top: 0.35rem; line-height: 1.4; }

/* Trenner zwischen den Wegen: „oder", nicht bloss Abstand. */
.anmelden-oder {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin: 0.2rem 0;
  font-size: 0.72rem;
  color: var(--text-schwach);
}
.anmelden-oder::before, .anmelden-oder::after { content: ""; height: 1px; background: var(--linie); }

.anmelden-hinweis {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-size: 0.78rem;
  color: var(--text-schwach);
  line-height: 1.5;
}
.anmelden-hinweis code { font-size: 0.9em; background: var(--flaeche-leise); padding: 0.05rem 0.3rem; border-radius: 3px; }

.anmelden-fuss { margin: 0; font-size: 0.72rem; color: var(--text-schwach); }
.anmelden-thema { margin: 0; }

@media (max-width: 420px) {
  .anmelden-karte { padding: 1.1rem; }
}

/* `main` bekommt in `turnuswerk.css` einen Innenabstand fuer die Modulseiten --
   hier traegt ihn die Karte, nicht der Rahmen. */
.anmeldeseite main { padding: 0; }