:root {
  --text: #1d2433;
  --gedaempft: #5b6475;
  --flaeche: #f6f7f9;
  --linie: #d9dde4;
  --akzent: #1f3a68;
  --probe: #b4530b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--flaeche);
}

/* Nicht-live-Umgebungen tragen einen farbigen Rahmen, damit niemand im Test echte Arbeit ablegt. */
body.probelauf { border-top: 6px solid var(--probe); }

.umgebung {
  background: var(--probe);
  color: #fff;
  padding: 4px 16px;
  font-size: 14px;
}

.kopf {
  background: #fff;
  border-bottom: 1px solid var(--linie);
  padding: 12px 16px;
}

.marke { font-weight: 600; color: var(--akzent); }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

.stand { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; color: var(--gedaempft); }
.stand dt { font-weight: 600; }
.stand dd { margin: 0; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marke { text-decoration: none; }
.konto { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.konto a { color: var(--akzent); }
.konto form { margin: 0; }
.wer { color: var(--gedaempft); }

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.leise {
  background: none;
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.anmeldung { max-width: 420px; margin: 48px auto; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 24px; }
.fehler { color: #a11a1a; }
.hinweis { color: var(--gedaempft); }

.liste { width: 100%; border-collapse: collapse; background: #fff; margin: 12px 0 24px; font-size: 14px; }
.liste th, .liste td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.liste td form { margin: 0; }
.liste tr.gesperrt td { color: var(--gedaempft); text-decoration: line-through; }
.liste tr.gesperrt td:last-child { text-decoration: none; }

.zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.zeile label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; }
.zeile label.haken { flex-direction: row; align-items: center; }
.zeile input[type=email], .zeile input[type=text] { padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; font: inherit; min-width: 240px; }