/* Authelia-Login im Stil der Website (wird von Caddy per replace-response in die Seite eingefügt, siehe sites/intern.caddy).
   Authelia nutzt Tailwind mit CSS-Variablen – wir setzen die Variablen um und stylen Karte, Button und Kopfzeile. */
:root, html, body, .light {
  --primary: #008ccd !important;
  --primary-foreground: #ffffff !important;
  --ring: #008ccd !important;
  --background: #002d55 !important;
  --foreground: #1f2d3a !important;
  --card: #ffffff !important;
  --card-foreground: #1f2d3a !important;
  --input: #c9d4de !important;
  --accent: #e6f4fb !important;
  --accent-foreground: #002d55 !important;
  --muted-foreground: #5b6a78 !important;
  --border: #dde4ea !important;
  --secondary: #002d55 !important;
  --custom-loading-bar: #7fc4e8 !important;
}
html, body, #root { min-height: 100%; }
body {
  background: linear-gradient(160deg, #002d55 0%, #004b85 60%, #0072ad 100%) fixed !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #1f2d3a !important;
}
header { background: transparent !important; }
#language-button { color: #ffffff !important; }
#language-button:hover { background: rgba(255, 255, 255, .12) !important; }

/* Karte: die Bühne (first-factor, second-factor, reset …) zentriert ein Inhaltselement */
[id$="-stage"] > div, [id$="-stage"] > form, main > div {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 34px 36px 26px !important;
  box-shadow: 0 24px 60px rgba(0, 20, 40, .35) !important;
  max-width: 460px !important;
}
[id$="-stage"] > div::before {
  content: "Interner Bereich · Wasserwacht Regenstauf";
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #008ccd; margin-bottom: 6px;
}
[id$="-stage"] > div::after {
  content: "Zugang nur für Mitglieder mit Konto. Fragen: Technische Leitung.";
  display: block; margin-top: 18px; font-size: 12px; line-height: 1.5; color: #8a97a3;
}
h5, h6, .text-2xl { color: #002d55 !important; font-weight: 700 !important; }
img[alt="Logo"], img[src*="logo"] { max-height: 84px; width: auto; }

input {
  background: #ffffff !important; color: #1f2d3a !important; border-color: #c9d4de !important; border-radius: 10px !important;
}
input:focus { border-color: #008ccd !important; box-shadow: 0 0 0 3px rgba(0, 140, 205, .18) !important; }
label { color: #5b6a78; }

#sign-in-button, button[type="submit"] {
  background: #008ccd !important; color: #ffffff !important; border-radius: 999px !important; text-transform: none !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; height: 48px !important;
  box-shadow: 0 8px 20px rgba(0, 140, 205, .35) !important;
}
#sign-in-button:hover, button[type="submit"]:hover { background: #0077ae !important; }
#reset-password-button, a { color: #008ccd !important; }
#remember-checkbox[data-state="checked"] { background: #008ccd !important; border-color: #008ccd !important; }

/* „Betrieben mit Authelia" ausblenden */
a[href="https://www.authelia.com"] { display: none !important; }