body { min-height: 100vh; }

.anmelde-rahmen {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px 16px;
  background: #1F2433;
}

.anmelde-karte { width: 100%; max-width: 440px; padding: 30px 32px 28px; border-top: 4px solid var(--akzent); }

.anmelde-marke { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.anmelde-logo { width: 120px; height: auto; flex: none; }
.anmelde-marke h1 { font-size: 24px; font-weight: 600; color: var(--text-ueberschrift); margin-top: 2px; }

.anmelde-hinweis { color: var(--text-zweit); font-size: 13px; margin-bottom: 22px; }

.passwort-zeile { display: flex; gap: 8px; }
.passwort-zeile .eingabe { flex: 1; height: 40px; font-size: 14px; }
.passwort-zeile .knopf { height: 40px; }

.meldung {
  margin: 12px 0 0; padding: 9px 12px; border-radius: var(--radius-feld);
  font-size: 12.5px; font-weight: 600;
  color: var(--kritisch-fg); background: var(--kritisch-bg); border: 1px solid #E3C3C3;
}
.meldung.info { color: var(--warn-fg); background: #FFFAF0; border-color: #EAD9A7; }

#absenden { height: 40px; margin-top: 16px; }

.anmelde-fuss { font-size: 11px; color: #9BA1AB; }

/* Heuser-Keyvisual (Scheinwerfer, Figur, Glühbirne) links neben der Anmeldung */
@media (min-width: 900px) {
  body { display: grid; grid-template-columns: auto 1fr; background: #1F2433; }
  body::before { content: ""; width: min(46vw, calc(100vh * 941 / 1672)); background: url("/oeffentlich/heuser-keyvisual.jpg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent); mask-image: linear-gradient(to right, #000 75%, transparent); }
  .anmelde-logo { display: none; }
}