/* Ergänzungen für Anmeldung, Konto und Verwaltung. Farben nur über die Variablen aus /assets/css/style.css. */

.konto-seite { padding-top: 32px; padding-bottom: 48px; }
.konto-seite h1 { margin: 0 0 16px; }

.konto-karte {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  max-width: 720px;
  margin: 0 0 24px;
}
.konto-karte h1, .konto-karte h2 { margin-top: 0; }

.formular { display: grid; gap: 14px; max-width: 420px; }
.formular-raster { grid-template-columns: 1fr 1fr; max-width: none; }
.formular-raster .breit { grid-column: 1 / -1; }
@media (max-width: 600px) { .formular-raster { grid-template-columns: 1fr; } }

.formular label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.formular input, .formular select {
  font: inherit; font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
.formular input:disabled { background: var(--surface); color: var(--text-muted); }
.formular label.haken { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.formular label.haken input { width: auto; }

.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf {
  display: inline-block;
  font: inherit; font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  justify-self: start;
}
.knopf:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.knopf-zweit { background: transparent; color: var(--accent); }
.knopf-zweit:hover { background: var(--surface); color: var(--accent-hover); }

.meldung { padding: 12px 16px; border-radius: 6px; margin: 0 0 16px; max-width: 720px; border: 1px solid var(--border); background: var(--surface); }
.meldung-fehler { border-color: var(--accent); }
.hinweis { color: var(--text-muted); font-size: 0.9rem; }
.leise { color: var(--text-muted); }

.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 24px; }
.angaben dt { color: var(--text-muted); }
.angaben dd { margin: 0; }
.startpasswort { border-color: var(--accent); }
.passwort { font-size: 1.2rem; letter-spacing: 0.05em; }

.gruppe { margin-top: 28px; }
.anzahl { color: var(--text-muted); font-weight: 400; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabelle th { color: var(--text-muted); font-weight: 600; }

.konto-name { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .header-actions .konto-name { display: none; }
}

.unternavigation { display: flex; gap: 20px; margin: 0 0 20px; border-bottom: 1px solid var(--border); }
.unternavigation a { padding: 8px 0; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.unternavigation a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.unternavigation a:hover { color: var(--accent); }

.lehrjahre { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lehrjahre legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 6px; }
.tiles li { position: relative; }
.tile-lehrjahre { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }

.link-anzeige { display: block; word-break: break-all; padding: 10px 12px; background: var(--surface); border-radius: 6px; user-select: all; }