/* =========================================================================
   anmelden.css — Gestaltung der öffentlichen Anmelde-/Registrierseiten.
   Wird NUR von anmelden/registrieren geladen, immer NACH stil.css:
   Farbpalette (CSS-Variablen, hell/dunkel) und Formular-Grundstile kommen
   aus stil.css; hier stehen ausschließlich Bühne, Karte und Feinschliff.
   Keine Inline-Styles (CSP) — alles über Klassen.
   ========================================================================= */

/* ---------- Bühne: ruhiger Verlaufs-Hintergrund, alles mittig ---------- */
body.anmelde-body{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:32px 16px 20px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(74,127,181,.14), transparent 68%),
    radial-gradient(900px 460px at 88% 108%, rgba(217,161,59,.10), transparent 62%),
    linear-gradient(180deg, #eef2f7 0%, var(--bg) 55%);
  background-attachment:fixed;
}
.anmelde-buehne{
  width:100%; display:flex; flex-direction:column; align-items:center;
  flex:1; justify-content:center; gap:22px;
}

/* ---------- Karte ---------- */
.anmelde-karte{
  width:100%; max-width:400px;
  background:var(--flaeche);
  border:1px solid var(--rand);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 34px rgba(16,24,40,.12);
  padding:30px 30px 24px;
}
.anmelde-karte.breit{max-width:480px}

/* ---------- Markenblock: Logo, Produktname, Betreiber ---------- */
.anmelde-marke{text-align:center; margin-bottom:22px}
.anmelde-logo{
  display:block; margin:0 auto 14px; width:200px; max-width:80%; height:auto;
}
.anmelde-marke h1{
  font-size:21px; font-weight:700; letter-spacing:-.01em; margin:0;
  color:var(--marke-anthrazit);
}
.anmelde-betreiber{
  margin:3px 0 0; font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--marke-gold-dunkel);
}

/* Zwischentitel der Unteransichten (2FA, Kennwort vergessen, Registrieren) */
.anmelde-titel{margin:0 0 6px; font-size:16.5px}
.anmelde-karte .klein{margin-bottom:14px}

/* ---------- Meldungen: klar abgesetzt, aber ruhig ---------- */
.anmelde-karte .meldungen{margin-bottom:16px}
.anmelde-karte .meldung,
.anmelde-karte .hinweis{
  padding:10px 13px; border-radius:9px; font-size:13.5px; line-height:1.45;
  margin:0 0 10px;
}
.anmelde-karte .hinweis h3{margin:0 0 4px}

/* ---------- Formular ---------- */
.anmelde-karte form.formular{max-width:none}
.anmelde-karte form label{margin-top:14px}
.anmelde-karte form label:first-of-type{margin-top:0}
.anmelde-karte input[type=text],
.anmelde-karte input[type=password],
.anmelde-karte input[type=email],
.anmelde-karte input:not([type]){
  min-height:42px; padding:9px 13px; border-radius:9px;
}
.anmelde-karte input:focus{
  border-color:var(--marke-blau);
  box-shadow:0 0 0 3px rgba(74,127,181,.22);
}

/* Haupt-Knopf: volle Breite, Markenblau, spürbare Zustände */
.anmelde-karte form.formular button[type=submit]{
  width:100%; justify-content:center; margin-top:18px;
  min-height:44px; padding:10px 17px; border-radius:10px; font-size:14.5px;
  background:var(--marke-blau); border-color:var(--marke-blau);
  transition:background .12s, box-shadow .12s, transform .05s;
}
.anmelde-karte form.formular button[type=submit]:hover{
  background:var(--marke-blau-dunkel); border-color:var(--marke-blau-dunkel);
  box-shadow:0 2px 10px rgba(47,99,137,.30);
}
.anmelde-karte form.formular button[type=submit]:active{transform:translateY(1px)}

/* Zweitknopf (z. B. „Abbrechen" der 2FA-Stufe): dezent, volle Breite */
.anmelde-karte button.knopf.klein{
  width:100%; justify-content:center; margin-top:10px; min-height:38px;
  background:transparent; border-color:var(--rand-stark); color:var(--text-schwach);
  font-weight:500; white-space:normal; text-align:center;
}
.anmelde-karte button.knopf.klein:hover{background:var(--grau-bg); color:var(--text)}

/* ---------- Nebenlinks („Kennwort vergessen?" u. a.) ---------- */
.anmelde-links{margin:16px 0 0; text-align:center; font-size:13px}
.anmelde-links a{color:var(--text-schwach)}
.anmelde-links a:hover{color:var(--akzent)}
.anmelde-karte .sehr-klein{margin-top:14px}

/* ---------- Seitenfuß: Servicekontakt und Version, ruhig zentriert ------ */
.anmelde-fuss{
  text-align:center; font-size:12.5px; color:var(--text-sehr-schwach);
  padding:6px 10px 14px;
}
.anmelde-fuss p{margin:0 0 4px}
.anmelde-fuss a{color:var(--text-schwach)}

/* ---------- Dunkler Modus ----------
   Palette kommt aus stil.css; hier nur Bühne und Logo-Plakette:
   Das Logo ist transparent mit anthrazitfarbener Schrift und braucht
   auf dunkler Karte eine helle, weich gerundete Unterlage. */
@media (prefers-color-scheme: dark){
  body.anmelde-body{
    background:
      radial-gradient(1100px 520px at 50% -10%, rgba(74,127,181,.16), transparent 68%),
      radial-gradient(900px 460px at 88% 108%, rgba(217,161,59,.07), transparent 62%),
      linear-gradient(180deg, #10151b 0%, var(--bg) 55%);
    background-attachment:fixed;
  }
  .anmelde-karte{
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.55);
  }
  .anmelde-logo{
    background:#f5f7f9; border-radius:14px; padding:12px 16px;
    box-shadow:0 0 0 1px var(--rand);
  }
  .anmelde-marke h1{color:var(--text)}
}

/* ---------- Mobil: Karte füllt den Bildschirm angenehm ---------- */
@media (max-width:480px){
  body.anmelde-body{padding:18px 12px 14px}
  .anmelde-buehne{gap:16px}
  .anmelde-karte{padding:24px 18px 20px; border-radius:14px}
  .anmelde-logo{width:170px}
}