/* Konto (A.16.0.0): eine Glas-Karte in der Mitte. */
.konto-bereich { display: grid; justify-items: center; gap: 14px; padding: 10px 16px 30px; }
.konto-karte {
  width: min(100%, 520px);
  padding: 26px 24px;
  border-radius: 26px;
  background: var(--flaeche);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-gross);
}
.konto-karte[hidden] { display: none; }
.konto-karte h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 6vw, 2.1rem); letter-spacing: -.02em; }
.konto-karte h2 { margin: 26px 0 6px; font-size: 1.15rem; }
.konto-karte p { margin: 0 0 12px; line-height: 1.5; }
.konto-leise { color: var(--tusche-weich); font-size: .95rem; }
.konto-form { display: grid; gap: 8px; margin-top: 16px; }
.konto-form[hidden] { display: none; }
.konto-form label { font-weight: 650; }
.konto-form input {
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid rgba(139, 92, 246, .25);
  border-radius: 16px;
  background: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tusche);
}
.konto-form input:focus { outline: none; border-color: var(--akzent); background: #fff; }
#codeFeld { letter-spacing: .4em; font-size: 1.5rem; text-align: center; }
.konto-form .knopf.haupt { margin-top: 6px; min-height: 54px; font-size: 1.1rem; }
.konto-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.konto-fehler { margin: 10px 0 0 !important; color: #be123c; font-weight: 650; }
.konto-fehler:empty { display: none; }
.konto-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.konto-stand div { padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .7); }
.konto-stand dt { font-size: .85rem; color: var(--tusche-weich); font-weight: 600; }
.konto-stand dd { margin: 2px 0 0; font-weight: 700; }
.knopf.rot { color: #be123c; }
.konto-unten { text-align: center; }