/* ======== Die Anmeldeseite der Verwaltung (seit 2026-11-04) ========
 *
 * Für anmeldung.html (bauen.mjs --verwaltung legt sie neben die Verwaltung,
 * erreichbar unter admin.eförderungen.de/anmeldung). Gewählt am
 * 2026-11-04 aus drei Entwürfen: „Nimm Entwurf B“ — links das Markenfeld in
 * Navy (Logo, ein Satz, die Bildmarke negativ), rechts das Formular, der Code
 * in sechs Feldern. Farben und Schrift aus ../logo/tokens.css (über
 * /stil.css). Regeln: Beschriftung über dem Feld, Felder und Knöpfe 46 px,
 * eine gefüllte Schaltfläche in Navy, kein Verlauf, kein Glas, keine Schatten
 * auf ruhenden Flächen; jede Schrift mit mindestens 4,5 : 1 auf ihrem Grund.
 */

.anmeldung [hidden] { display: none !important; }

body.anmeldung {
  background: var(--weiss);
}

/* ---------------- Gemeinsam ---------------- */

.anm-logo {
  display: block;
  align-self: flex-start; /* sonst zieht eine Flex-Spalte das Bild breit, und das SVG zentriert sich darin */
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 40px;
}

.anm-titel {
  margin: 0;
  color: var(--marke-navy);
  font-size: 26px;
  font-weight: var(--schrift-gewicht-titel);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.anm-text {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

.anm-text strong {
  overflow-wrap: anywhere;
}

.anm-label {
  display: block;
  margin: 24px 0 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
}

.anm-feld,
.anm-ziffer {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 46px;
  padding: 0 14px;
  border: 1px solid #C4CDD8;
  border-radius: var(--anm-radius, 10px);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.anm-feld:focus,
.anm-ziffer:focus {
  border-color: var(--marke-navy);
  outline: 2px solid var(--marke-navy);
  outline-offset: 1px;
}

.anm-feld[aria-invalid="true"],
.anm-ziffern[aria-invalid="true"] .anm-ziffer {
  border-color: #C4242A;
}

/* Der Code: groß, mit Abstand zwischen den Ziffern, gleich breite Ziffern. */
.anm-code {
  block-size: 56px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.anm-knopf {
  display: block;
  inline-size: 100%;
  block-size: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--anm-radius, 10px);
  background: var(--marke-navy);
  color: var(--weiss);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.anm-knopf:hover {
  background: #072550;
}

/* Während die Anfrage läuft: nicht noch einmal abschicken. */
.anm-knopf:disabled {
  opacity: 0.7;
  cursor: progress;
}

.anm-knopf:focus-visible {
  outline: 2px solid var(--marke-navy);
  outline-offset: 3px;
}

.anm-fehler {
  margin: 8px 0 0;
  color: #C4242A; /* 5,6 : 1 auf Weiß */
  font-size: 14px;
}

.anm-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 16px;
  margin: 8px 0 0;
}

.anm-link {
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marke-navy);
  font: inherit;
  font-size: 14px;
  font-weight: var(--schrift-gewicht-betont);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.anm-link:hover {
  text-decoration-thickness: 2px;
}

.anm-link:focus-visible {
  outline: 2px solid var(--marke-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.anm-status {
  min-block-size: 1.5em;
  margin: 4px 0 0;
  color: var(--marke-gruen-dunkel); /* 5,51 : 1 auf Weiß */
  font-size: 14px;
}

.anm-fuss {
  margin: 16px 0 0;
  color: var(--text-leise);
  font-size: 14px;
}

.anm-fuss a {
  color: var(--text-leise);
}

/* ---------------- Die Seite: links das Markenfeld in Navy, rechts das Formular ---------------- */

.anm {
  --anm-radius: 8px;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.anm-marke {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px;
  background: var(--marke-navy);
  color: var(--weiss);
}

.anm-marke .anm-logo {
  block-size: 44px;
}

.anm-satz {
  max-inline-size: 16ch;
  margin: 0;
  color: var(--weiss);
  font-size: 30px;
  font-weight: var(--schrift-gewicht-titel);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.anm-marke-text {
  max-inline-size: 34ch;
  margin: 14px 0 0;
  color: #D5DEEA; /* 9,9 : 1 auf Navy */
  font-size: 16px;
  line-height: 1.55;
}

.anm-form {
  display: flex;
  align-items: center;
  padding: 48px;
}

.anm-spalte {
  inline-size: 100%;
  max-inline-size: 380px;
  margin-inline: auto;
}

/* Die Bildmarke groß, negativ (weiß und grün auf Navy, wie das Markenhandbuch
   es für dunklen Grund vorsieht). */
.anm-zeichen {
  align-self: flex-start;
  inline-size: min(300px, 70%);
  block-size: auto;
}

.anm .anm-titel {
  font-size: 30px;
}

.anm-ziffern {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.anm-ziffer {
  block-size: 58px;
  padding: 0;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .anm {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .anm-marke {
    gap: 16px;
    padding: 24px 20px;
  }

  .anm-marke .anm-logo {
    block-size: 34px;
  }

  .anm-zeichen {
    display: none;
  }

  .anm-satz {
    max-inline-size: none;
    font-size: 20px;
  }

  .anm-marke-text {
    font-size: 15px;
  }

  .anm-form {
    align-items: flex-start;
    padding: 32px 20px 40px;
  }

  .anm .anm-titel {
    font-size: 26px;
  }
}

/* Rückmeldung beim Drücken; „Bewegung reduzieren“ lässt sie weg. */
@media (prefers-reduced-motion: no-preference) {
  .anm-knopf {
    transition: background-color 0.15s, transform 0.1s;
  }

  .anm-knopf:active {
    transform: translateY(1px);
  }
}