/* Homie's look, after the slide "Dashboard & Technik-Stand". Shared by all pages. */

@font-face {
  font-family: "Fira Sans";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-sans-500.woff2") format("woff2");
}

:root {
  --lila: #cfa9cd;
  --lila-tief: #7f4f7c;      /* lila text and focus rings on light ground */
  --grund: #eeeeee;
  --flaeche: #ffffff;
  --text: #1f1f1f;
  --text-leise: #555555;
  --ausgegraut: #bfbfbf;
  --fehler: #a3262a;
  --radius: 1.1rem;
  font-family: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--grund); }

.marke { font-weight: 400; letter-spacing: 0.02em; margin: 0; }
.marke .trenner { margin: 0 0.4em; }

/* ── Login ─────────────────────────────────────────────────────────────────── */

.anmelden {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}
.anmelden .karte {
  width: min(28rem, 100%);
  background: var(--flaeche);
  border: 3px solid var(--lila);
  border-radius: var(--radius);
  padding: 2rem;
}
.anmelden .marke { font-size: 1.6rem; margin-bottom: 1.5rem; }
.anmelden form { display: grid; gap: 0.75rem; }
.anmelden label { font-size: 1.05rem; color: var(--text-leise); }
.anmelden input {
  font: inherit;
  font-size: 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--ausgegraut);
  border-radius: 0.6rem;
}
.anmelden input:focus-visible,
.anmelden button:focus-visible { outline: 3px solid var(--lila-tief); outline-offset: 2px; }
.anmelden button {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.75rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--lila);
  color: var(--text);
  cursor: pointer;
}
.anmelden button:hover { background: #c398c1; }
.anmelden .fehler { margin: 0; color: var(--fehler); font-weight: 500; }