/* ============================================================================
   ZEROMOTE — Keycloak Login-Theme  ·  R17-Markenfamilie (docs/DESIGN.md)
   Heller Modus (DESIGN §5: Login/öffentliche Seiten hell). Sun-Orange = Aktion/Marke,
   Deep-Navy = Struktur/Text. Schriften lokal gebündelt (SIL OFL), kein externer Call.
   ============================================================================ */

/* --- Schriften (lokal) ----------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* --- R17-Tokens ------------------------------------------------------------ */
:root {
  --orange-500:#FF6F43; --orange-600:#E55A28; --orange-700:#CC4715; --orange-100:#FFE4D9;
  --navy-900:#0D1B2A;  --navy-700:#1F3462;  --navy-500:#3D5489;
  --gray-50:#F9FAFB;   --gray-200:#E5E7EB;  --gray-300:#D1D5DB;  --gray-500:#6B7280;  --gray-700:#374151;
  --error-500:#EF4444; --error-100:#FEE2E2; --error-800:#991B1B;
}

/* --- Seite ----------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; }
.login-pf { background: none; }
body.login-pf, .login-pf body {
  background: var(--gray-50);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--navy-900);
}
.login-pf-page { padding-top: 6vh; }

/* --- Wortmarke ZERO|MOTE ----------------------------------------------------
   Selbst­enthaltenes SVG mit eingebetteter Space-Grotesk (Pipe orange). Liegt IM Theme,
   nicht in der geteilten realm.displayNameHtml — so bleibt das Branding pro Produkt/Client.
   Der (geteilte) Realm-Anzeigename wird visuell ausgeblendet. */
#kc-header { width: 100%; }
#kc-header-wrapper {
  height: 52px; margin: 0 auto 24px; padding: 0;
  font-size: 0; color: transparent; text-shadow: none; letter-spacing: 0; text-transform: none;
  background-image: url('../img/logo.svg');
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* --- Login-Card ------------------------------------------------------------ */
.card-pf {
  border: 1px solid var(--gray-200); border-top: 4px solid var(--orange-500);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 32px; max-width: 420px; margin: 0 auto; background: #fff;
}
#kc-page-title, #kc-content-wrapper h1, #kc-content-wrapper h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 22px;
  color: var(--navy-900); margin-bottom: 20px;
}

/* --- Formular: Labels + Inputs --------------------------------------------- */
label, .control-label, .pf-c-form__label {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--gray-700);
}
#kc-form-login input[type="text"], #kc-form-login input[type="password"],
input.form-control, .pf-c-form-control {
  border: 2px solid var(--gray-300); border-radius: 8px; padding: 10px 12px; height: auto;
  font-family: 'Inter', sans-serif; font-size: 16px; color: var(--navy-900);
  background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
#kc-form-login input[type="text"]:focus, #kc-form-login input[type="password"]:focus,
input.form-control:focus, .pf-c-form-control:focus {
  border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--orange-100); outline: none;
}

/* --- Primärbutton (Anmelden) ----------------------------------------------- */
.btn-primary, #kc-login, input[type="submit"].btn-primary {
  background: var(--orange-500); border: none; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .3px;
  color: #fff; padding: 12px 24px; width: 100%; text-shadow: none;
  transition: background .15s; box-shadow: none;
}
.btn-primary:hover, #kc-login:hover, .btn-primary:focus, #kc-login:focus { background: var(--orange-600); color:#fff; }
.btn-primary:active, #kc-login:active { background: var(--orange-700); }

/* Sekundärbutton (z. B. Abbrechen) — Navy-Outline */
.btn-default {
  background:#fff; border:2px solid var(--navy-900); color:var(--navy-900); border-radius:8px;
  font-family:'Inter',sans-serif; font-weight:600;
}
.btn-default:hover { background:var(--navy-900); color:#fff; }

/* --- Links (Orange + Unterstreichung, DESIGN §6) --------------------------- */
a, #kc-info a, .login-pf a { color: var(--orange-600); text-decoration: underline; }
a:hover { color: var(--orange-700); }

/* --- Alerts → Semantik-Skala ----------------------------------------------- */
.alert-error, .pf-c-alert.pf-m-danger {
  border: none; border-left: 4px solid var(--error-500);
  background: var(--error-100); color: var(--error-800); border-radius: 8px;
}
.alert-success { border-left:4px solid #22C55E; background:#DCFCE7; color:#166534; border-radius:8px; }

/* --- Checkbox "angemeldet bleiben" Akzent ---------------------------------- */
input[type="checkbox"] { accent-color: var(--orange-500); }

/* --- Footer / Hinweise: dezent (kein KC-Branding sichtbar) ------------------ */
#kc-info, #kc-info-wrapper { color: var(--gray-500); font-size: 12px; }
.pf-c-login__main-footer-band { display: none; }