/* DIE FUSSZEILE (server/src/seitenfuss.ts) — Charakterseite, Vorplatz,
   Rechtsseiten. Fest am unteren Rand; jede Seite hält darüber so viel Platz
   frei, wie sie hoch ist (--seitenfuss-hoehe). Alle Maße in rem: Die Seiten
   skalieren über ihre Wurzelschrift, und die Fußzeile skaliert mit. */
:root { --seitenfuss-hoehe: 2.3rem; }

.seitenfuss {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--seitenfuss-hoehe);
  box-sizing: border-box;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: #8a8375;
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.55), rgba(10, 12, 15, 0.92));
  border-top: 1px solid rgba(143, 110, 52, 0.35);
}
/* ui.css gibt jedem Link eine Messinglinie darunter — hier nicht. */
.seitenfuss a { color: inherit; text-decoration: none; border-bottom: 0; }
.seitenfuss a:hover, .seitenfuss a:focus-visible { color: var(--brass-light, #e0c27a); }

.sf-wer { justify-self: start; white-space: nowrap; }
.sf-alpha { color: var(--brass, #c9a55a); }
/* Die Uhr bis zum Alpha-Test (alphauhr.js): Ziffern gleich breit, damit
   nichts wackelt, wenn eine Sekunde umspringt. */
.sf-uhr { color: var(--brass, #c9a55a); font-variant-numeric: tabular-nums; }
.sf-uhr[hidden] { display: none; }

.sf-recht { display: flex; gap: 1.4rem; white-space: nowrap; }

.sf-rechts { justify-self: end; display: flex; align-items: center; gap: 1.2rem; }
.sf-sprache { display: flex; gap: 0.2rem; }
/* Abmelden (Charakterseite) — ein Formular, und ui.css macht jedes Formular
   zu einer Spalte mit fester Breite und jeden Knopf zu einem großen: beides
   hier ausdrücklich zurück. */
.seitenfuss form.sf-abmelden { display: inline-flex; flex-direction: row; max-width: none; margin: 0; gap: 0; }
.seitenfuss .sf-abmelden button {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0.12rem 0.6rem;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 1px solid rgba(143, 110, 52, 0.55);
  border-radius: 2px;
  box-shadow: none;
  text-shadow: none;
  cursor: var(--cursor-gold);
}
.seitenfuss .sf-abmelden button:hover,
.seitenfuss .sf-abmelden button:focus-visible { color: var(--brass-light, #e0c27a); border-color: var(--brass-light, #e0c27a); }
.sf-lang {
  padding: 0.12rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
}
.sf-lang.aktiv { color: var(--brass-light, #e0c27a); border-color: rgba(143, 110, 52, 0.55); }
.sf-lang.gesperrt { opacity: 0.5; cursor: var(--cursor-kupfer); }

/* Das Versionsschild sitzt sonst unten links auf der Fußzeile. */
body:has(.seitenfuss) .versionsschild { bottom: calc(var(--seitenfuss-hoehe) + 0.35rem); }
@media (max-width: 700px) {
  :root { --seitenfuss-hoehe: 3.6rem; }
  .seitenfuss {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0.2rem;
    padding: 0.35rem 0.8rem;
    align-content: center;
  }
  .sf-recht { grid-column: 1 / -1; grid-row: 1; justify-self: center; gap: 1rem; }
  .sf-wer { grid-row: 2; }
  .sf-rechts { grid-row: 2; }
}