/* Moritzberg-Design für auth.moritzberg.cc – wie das Kundenportal der Werkstatt
   auf hub.moritzberg.cc: Seite in der Markenfarbe, Formular als weiße Karte,
   Schrift Inter. Authelia (ab 4.39) nutzt Tailwind/shadcn-Variablen, deshalb
   reicht es, die Variablen zu überschreiben. Eingehängt von auth-skin (nginx). */

@font-face {
  font-family: "Inter Variable";
  src: url("/moritzberg/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="light"], [data-theme="dark"], [data-theme="grey"] {
  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --default-font-family: var(--font-sans);
  --primary: #120a8f;
  --primary-foreground: #ffffff;
  --ring: #120a8f;
  --custom-loading-bar: #ffffff;
  --mb-page: #120a8f;
}
[data-theme="dark"] {
  /* Dunkelmodus wie in der Werkstatt: schwarzer Grund, etwas hellere Hauptfarbe */
  --primary: oklch(0.45 0.2 265);
  --ring: oklch(0.45 0.2 265);
  --mb-page: #000000;
}

html, body, #root {
  background: var(--mb-page) !important;
  font-family: var(--font-sans);
  min-height: 100%;
}

/* Kopfzeile (Sprachwahl) und Ladeanzeige stehen auf dem farbigen Grund */
header, header button { color: #fff !important; }
header button:hover { background: rgb(255 255 255 / 0.12) !important; }
.min-h-screen p { color: #fff; }

/* Jede Stufe (Anmeldung, zweiter Faktor, Passwort-Reset, Abmeldung …) als Karte */
.max-w-\[444px\] {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: 14px;
  padding: 28px 32px !important;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.28);
}
@media (max-width: 480px) {
  .max-w-\[444px\] { margin: 0 12px; padding: 22px 20px !important; }
}

/* Logo: Wortmarke statt kleinem Quadrat */
.max-w-\[444px\] img {
  width: auto;
  max-width: 220px;
  height: auto;
  margin: 4px auto 14px;
}
[data-theme="dark"] .max-w-\[444px\] img { filter: invert(1); }

/* Überschrift ruhiger, Knopf wie in der Werkstatt (nicht in Großbuchstaben) */
.max-w-\[444px\] h5 { font-weight: 600; font-size: 1.35rem; }
#sign-in-button, .max-w-\[444px\] button.bg-primary {
  text-transform: none;
  font-size: 0.95rem;
  height: 2.6rem;
  border-radius: 8px;
}

/* Dunkelmodus: Links und aktive Feldbeschriftung auf dunkler Karte heller */
[data-theme="dark"] .max-w-\[444px\] .text-primary { color: oklch(0.72 0.14 265); }
[data-theme="dark"] .max-w-\[444px\] input:focus { border-color: oklch(0.6 0.18 265); }