/* oQueo Login - Erscheinungsbild nach oQueo Style Guide 1.0, Untermarke oQueo Software. */

@font-face { font-family: "Tommy Soft"; src: url(/_oqueo/fonts/MADE-Tommy-Soft-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Elms Sans"; src: url(/_oqueo/fonts/ElmsSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Elms Sans"; src: url(/_oqueo/fonts/ElmsSans-Bold.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --o-bg: #F8F6F2; --o-card: #FFFFFF; --o-text: #0E0C0A; --o-muted: #6F685E;
  --o-border: rgba(14, 12, 10, .10); --o-border-strong: rgba(14, 12, 10, .18);
  --o-accent: #1F88D4; --o-accent-ink: #1668A8; --o-accent-hover: #11558A; --o-accent-dim: #E3EFF9; --o-on-accent: #FFFFFF;
  --o-warn: #AE4015;
  --o-shadow: 0 1px 3px rgba(14, 12, 10, .06), 0 10px 30px rgba(14, 12, 10, .07);
  --o-net: url(/_oqueo/net-hell.svg);
  --o-mark: url(/_oqueo/bildmarke-hell.svg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --o-bg: #100E0C; --o-card: #242119; --o-text: #EDE9E3; --o-muted: #948B80;
    --o-border: rgba(237, 233, 227, .09); --o-border-strong: rgba(237, 233, 227, .17);
    --o-accent: #5ABEFF; --o-accent-ink: #5ABEFF; --o-accent-hover: #8FD3FF; --o-accent-dim: #10273A; --o-on-accent: #100E0C;
    --o-warn: #E26A3F;
    --o-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .3);
    --o-net: url(/_oqueo/net-dunkel.svg);
    --o-mark: url(/_oqueo/bildmarke-dunkel.svg);
  }
}

html, body {
  background: var(--o-bg) var(--o-net) center / cover no-repeat fixed !important;
  color: var(--o-text) !important;
}
body, #root, #root * { font-family: "Elms Sans", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; }

/* Formularbereich als Karte */
#root .MuiContainer-root {
  max-width: 420px !important;
  background: var(--o-card);
  border: 1px solid var(--o-border);
  border-radius: 12px;
  box-shadow: var(--o-shadow);
  padding: 34px 34px 28px !important;
  margin-top: 8vh !important;
  margin-bottom: 6vh !important;
}

/* Bildmarke statt Personensymbol */
#root img[alt="Logo"], #root img[src*="logo.png"] {
  content: var(--o-mark);
  width: 64px !important; height: 64px !important; max-width: 64px !important;
}
#root svg[data-testid="UserSvg"], #root .MuiAvatar-root { display: none !important; }

/* Überschriften */
#root .MuiTypography-h5, #root .MuiTypography-h4, #root .MuiTypography-h6 {
  font-family: "Tommy Soft", system-ui, sans-serif !important;
  font-weight: 400 !important; letter-spacing: -.005em !important; color: var(--o-text) !important;
}
#root .MuiTypography-h5 { font-size: 26px !important; }
#root .MuiTypography-root { color: var(--o-text); }
#root .MuiTypography-body2, #root .MuiFormHelperText-root { color: var(--o-muted) !important; }

/* Eingabefelder: auf Seitengrund, Rahmen 1,5 px, Radius 8 px, Fokus in Akzent mit zartem Ring */
#root .MuiOutlinedInput-root {
  background: var(--o-bg) !important;
  border-radius: 8px !important;
  color: var(--o-text) !important;
  transition: box-shadow .2s;
}
#root .MuiOutlinedInput-notchedOutline {
  border: 1.5px solid var(--o-border-strong) !important;
  border-radius: 8px !important;
}
#root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--o-muted) !important; }
#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--o-accent) !important; border-width: 1.5px !important; }
#root .MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px var(--o-accent-dim); }
#root .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--o-warn) !important; }
#root .MuiInputBase-input { font-size: 15px !important; color: var(--o-text) !important; }
#root .MuiInputBase-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--o-bg) inset !important; -webkit-text-fill-color: var(--o-text) !important; }
#root .MuiInputLabel-root { color: var(--o-muted) !important; }
#root .MuiInputLabel-root.Mui-focused { color: var(--o-accent-ink) !important; }
#root .MuiInputLabel-root.Mui-error { color: var(--o-warn) !important; }
#root .MuiInputAdornment-root .MuiIconButton-root, #root .MuiInputAdornment-root svg { color: var(--o-muted) !important; }

/* Buttons: Akzent, Weiß, fett, Radius 8 px, keine Versalien */
#root .MuiButton-root {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important;
  font-size: 15px !important; border-radius: 8px !important; box-shadow: none !important;
  padding: 10px 22px !important; min-height: 46px;
}
#root .MuiButton-contained, #root .MuiButton-containedPrimary {
  background: var(--o-accent-ink) !important; color: var(--o-on-accent) !important;
}
#root .MuiButton-contained:hover, #root .MuiButton-containedPrimary:hover { background: var(--o-accent-hover) !important; }
#root .MuiButton-contained.Mui-disabled { opacity: .55; }
#root .MuiButton-outlined, #root .MuiButton-text {
  background: transparent !important; color: var(--o-text) !important;
  border: 1.5px solid var(--o-border-strong) !important;
}
#root .MuiButton-outlined:hover, #root .MuiButton-text:hover { border-color: var(--o-accent) !important; color: var(--o-accent-ink) !important; }

/* Passkey als Zweitweg dezenter */
#root button[id*="passkey"] {
  background: transparent !important; color: var(--o-text) !important;
  border: 1.5px solid var(--o-border-strong) !important;
}
#root button[id*="passkey"]:hover { border-color: var(--o-accent) !important; color: var(--o-accent-ink) !important; background: transparent !important; }
#root button[id*="passkey"] svg { color: var(--o-accent-ink) !important; }

/* Kontrollkästchen, Trenner, Links */
#root .MuiCheckbox-root { color: var(--o-border-strong) !important; }
#root .MuiCheckbox-root.Mui-checked { color: var(--o-accent-ink) !important; }
#root .MuiFormControlLabel-label { font-size: 14px !important; }
#root .MuiDivider-root, #root .MuiDivider-root::before, #root .MuiDivider-root::after { border-color: var(--o-border) !important; }
#root .MuiDivider-wrapper, #root .MuiDivider-root .MuiTypography-root {
  color: var(--o-muted) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important;
}
#root a, #root .MuiLink-root {
  color: var(--o-accent-ink) !important; font-size: 14px !important;
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important;
}
#root a:hover, #root .MuiLink-root:hover { color: var(--o-accent-hover) !important; }

/* Kein Hinweis auf die eingesetzte Software */
#root a[href*="authelia.com"], #root a[href*="authelia.com"] * { display: none !important; }

/* Hinweise */
#root .MuiAlert-root { border-radius: 8px !important; }