/* MataMath - the pages that are not the game.
 *
 * konto, admin, impressum, datenschutz. They share the game's palette and
 * chrome so the site reads as one thing, but they are documents rather than a
 * playfield: readable measure, ordinary flow, no canvas.
 *
 * Loaded AFTER game.css, which owns the colour tokens. This file must not
 * redefine them.
 */

body.seite {
  display: block;
  padding: 24px 16px 48px;
  overflow-y: auto;
  min-height: 100vh;
}

.huelle.schmal { max-width: 620px; }
.huelle.breit  { max-width: 1180px; }

body.seite h1 { margin-bottom: 2px; }

.unterzeile {
  margin: 0 0 24px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}

body.seite h2 {
  font-size: 17px;
  margin: 28px 0 10px;
  color: var(--akzent, #7ee0ff);
}

body.seite h3 {
  font-size: 14px;
  margin: 24px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

body.seite p, body.seite li { line-height: 1.65; }
body.seite a { color: var(--akzent, #7ee0ff); }

.klein { font-size: 13px; color: var(--text-dim); }

/* ------------------------------------------------------------- forms */

form label {
  display: block;
  margin: 0 0 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.feldhilfe {
  display: block;
  margin: 3px 0 6px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  opacity: 0.8;
}

form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-top, #3d4860);
  border-radius: 8px;
  box-sizing: border-box;
}

form input:focus {
  outline: none;
  border-color: var(--akzent, #7ee0ff);
  box-shadow: 0 0 0 3px rgba(126, 224, 255, 0.15);
}

/* ------------------------------------------------------------ buttons */

.knopf.leise {
  background: transparent;
  border: 1px solid var(--panel-top, #3d4860);
  color: var(--text-dim);
}

/* Destructive, and it should look it. Deleting an account takes the runs and
   the per-problem history with it and cannot be undone. */
.knopf.gefahr {
  background: transparent;
  border: 1px solid #7a3550;
  color: #ff8a8a;
}

a.knopf { display: inline-block; text-decoration: none; }

/* ------------------------------------------------------------ notices */

.hinweis {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 9px;
  border-left: 3px solid var(--akzent, #7ee0ff);
  background: rgba(126, 224, 255, 0.07);
  font-size: 14px;
  line-height: 1.55;
}

.hinweis.gut  { border-left-color: #6ee7a0; background: rgba(110, 231, 160, 0.08); }
.hinweis.warn { border-left-color: #ff8a8a; background: rgba(255, 138, 138, 0.08); }

/* --------------------------------------------------------------- misc */

.fusszeile a { color: var(--text-dim); }

dl.angaben dt {
  margin-top: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
dl.angaben dd { margin: 2px 0 0; }

/* Wide content must scroll inside itself rather than pushing the page sideways. */
.tabellenrahmen { overflow-x: auto; margin: 12px 0 24px; }

table.daten {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
table.daten th, table.daten td {
  padding: 7px 11px;
  text-align: left;
  border-bottom: 1px solid rgba(125, 139, 163, 0.16);
}
table.daten th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  position: sticky;
  top: 0;
  background: #0f1626;
}
/* Numeric columns align right, HEADER INCLUDED. With only the cells aligned,
   a right-aligned number sits half a column away from the left-aligned label
   that names it, and wide columns make the two look unrelated. */
table.daten td.zahl,
table.daten th.zahl { text-align: right; }
table.daten td.zahl { font-variant-numeric: tabular-nums; }
table.daten tr:hover td { background: rgba(126, 224, 255, 0.04); }