/* WEB ANTON — Authelia (Login), dunkel. Stand 2026-10-19 (Authelia 4.39.28).
 * Authelia nutzt seit 4.39.2x Tailwind/shadcn: Die Oberflaeche haengt an wenigen
 * Farbvariablen. Hier werden NUR diese auf die Marken-Tokens (/brand/brand.css)
 * gemappt — keine Einzelselektoren auf Komponenten.
 * html [data-theme] schlaegt Authelias [data-theme="..."] (auch auf inneren Elementen) durch hoehere Spezifitaet. */
:root, html[data-theme], html [data-theme] {
  --background: var(--brand-space);
  --foreground: var(--brand-text);
  --card: var(--brand-surface);
  --card-foreground: var(--brand-text);
  --popover: var(--brand-surface);
  --popover-foreground: var(--brand-text);
  --primary: var(--brand-accent);
  --primary-foreground: var(--brand-on-accent);
  /* Authelia nutzt --secondary als TEXTfarbe fuer Links (Abmelden, Benutzer wechseln),
     im Original ein heller Akzent — daher hell, nicht als Flaeche. */
  --secondary: var(--brand-text-2);
  --secondary-foreground: var(--brand-space);
  --muted: var(--brand-alt);
  --muted-foreground: var(--brand-muted);
  --accent: var(--brand-raised);
  --accent-foreground: var(--brand-text);
  --destructive: var(--brand-error);
  --destructive-foreground: var(--brand-space);
  --success: var(--brand-ok);
  --success-foreground: var(--brand-space);
  --warning: var(--brand-star);
  --warning-foreground: var(--brand-space);
  --info: var(--brand-accent);
  --info-foreground: var(--brand-on-accent);
  --border: var(--brand-line-strong);
  --input: var(--brand-line-strong);
  --ring: var(--brand-accent);
  --radius: var(--brand-radius-sm);
  --custom-icon: var(--brand-text);
  --custom-loading-bar: var(--brand-accent);
  --divider: var(--brand-line);
  color-scheme: dark;
}

body {
  font-family: var(--brand-font-text);
  background-color: var(--brand-space);
  background-image:
    radial-gradient(1px 1px at 14% 22%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 12%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 67% 74%, rgba(159,211,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 83%, rgba(255,255,255,.30) 50%, transparent 51%);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-display); font-weight: 500; letter-spacing: -.01em; }

/* Wortmarke statt Avatar-Symbol (Login- und 2FA-Seite) */
#root svg.mx-auto.my-2.w-16 { display: none; }
#root div:has(> svg.mx-auto.my-2.w-16)::before {
  content: "";
  display: block;
  block-size: 26px;
  margin: 10px auto 6px;
  background: var(--brand-logo) no-repeat center / contain;
}

/* Login-Karte */
#root div.mx-auto.w-full.px-8:has(form),
#root div.mx-auto.w-full.px-8:has(#register-link),
#root div.mx-auto.w-full.px-8:has(#methods-button) {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  padding-block: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}