/* cassiopeia_kaefer user.css — KAEFER-Look für die com_users-Seiten (Plan T).
   Geltungsbereich: die Site rendert über das Template faktisch nur Login/Reset/Remind —
   App und Kundenlinks sind Standalone-Seiten der Komponente. */

/* Suisse Intl (Markenschrift, 2026-08-20) — Dateien liegen im Komponenten-Media-Ordner;
   relativer Pfad von media/templates/site/cassiopeia_kaefer/css/ aus. */
@font-face { font-family: "SuisseIntl"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../../../com_vertriebskonfigurator/app/fonts/SuisseIntl-Regular-WebXL.woff") format("woff"); }
@font-face { font-family: "SuisseIntl"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../../../../com_vertriebskonfigurator/app/fonts/SuisseIntl-SemiBold-WebXL.woff") format("woff"); }
@font-face { font-family: "SuisseIntl"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../../../../com_vertriebskonfigurator/app/fonts/SuisseIntl-Bold-WebXL.woff") format("woff"); }
body.site, body.site input, body.site button, body.site select, body.site textarea {
  font-family: "SuisseIntl", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

:root {
  --kaefer-rot: #DE3518; --kaefer-rot-dunkel: #C02E15; --kaefer-slate: #2C414A;
  /* Typo-Farbe #333333 (Jan-Wunsch 2026-08-24, gleiche Regel wie in der App):
     jeder Schwarz-/Grau-Ton der Schrift läuft auf --kaefer-tinte; Slate bleibt
     FLÄCHE (Seitenhintergrund/Header). --kaefer-grau behält seine Sekundär-Rolle
     (Labels, Links) und trägt denselben Wert. */
  --kaefer-tinte: #333333;
  --kaefer-grau: #333333; --kaefer-linie: #e4e9ec; --kaefer-linie-stark: #cfd8dc;
  --kaefer-flaeche: #f4f6f7;
  /* Silvergrey für Sekundär-Buttons — identisch zur App (Jan-Wunsch 2026-08-24). */
  --kaefer-silber: #D8DCDF; --kaefer-silber-dunkel: #CACFD4;
}

/* ---------- Seite & Cassiopeia-Chrome (nur com_users-Seiten sichtbar) ---------- */
/* Dunkel A (Spec 2026-08-02): Slate-Fläche, Header dunkler abgesetzt — Karte bleibt weiß. */
body.site { background: var(--kaefer-slate); }
.container-header { background: #24363E; background-image: none;
  border-bottom: 1px solid rgba(255,255,255,.06); }
.container-header .navbar-brand { color: #fff; font-weight: 400; }
.container-header .navbar-brand:hover { color: #fff; }
.container-topbar, .container-banner, .container-below-top { display: none; }
.container-footer { display: none; }
.container-component { padding: 0 20px; }

/* ---------- Login-Karte (Backend-Login-Look) ---------- */
.vk-login { max-width: 420px; margin: 56px auto 72px; background: #fff;
  border-top: 3px solid var(--kaefer-rot); border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 24px 60px rgba(0,0,0,.35);
  padding: 40px 36px; }
.vk-login-marke { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 28px; }
.vk-login-marke img { height: 42px; }
.vk-login-marke span { color: var(--kaefer-grau); font-size: 14px; }

.vk-login .control-group, .vk-login .com-users-login__input { margin-bottom: 14px; }
.vk-login label { display: block; font-size: 13px; color: var(--kaefer-grau); margin-bottom: 4px; }
.vk-login input[type="text"], .vk-login input[type="password"] {
  width: 100%; padding: 11px 12px; border: 1px solid var(--kaefer-linie-stark);
  border-radius: 0; background: #fff; font: inherit; }
.vk-login input[type="text"]:focus, .vk-login input[type="password"]:focus {
  outline: 2px solid var(--kaefer-rot); outline-offset: 1px; border-color: var(--kaefer-rot); box-shadow: none; }

.vk-login .input-group { display: flex; }
.vk-login .input-group input[type="password"] { width: 1%; flex: 1 1 auto; }
.vk-login .input-group .input-password-toggle { border: 1px solid var(--kaefer-linie-stark); border-left: 0; border-radius: 0; background: #fff; color: var(--kaefer-grau); }

.vk-login .com-users-login__remember { margin: 4px 0 18px; }
.vk-login .form-check-label { font-size: 13.5px; color: var(--kaefer-grau); }

/* Button-Familie wie in der App (Jan-Wunsch 2026-08-24): versal mit .5px Laufweite,
   font-weight 600, Sekundär auf Silvergrey statt Weiß. */
.vk-login .btn { border-radius: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.vk-login .vk-login-submit { width: 100%; background: var(--kaefer-rot); border-color: var(--kaefer-rot);
  color: #fff; padding: 12px 24px; font-size: 15px; transition: background .15s; }
.vk-login .vk-login-submit:hover, .vk-login .vk-login-submit:focus {
  background: var(--kaefer-rot-dunkel); border-color: var(--kaefer-rot-dunkel); }
.vk-login .btn-secondary { background: var(--kaefer-silber); color: var(--kaefer-tinte);
  border: 1px solid var(--kaefer-linie-stark); font-weight: 600; }
.vk-login .btn-secondary:hover, .vk-login .btn-secondary:focus { background: var(--kaefer-silber-dunkel); }

.vk-login-links { margin-top: 22px; border-top: 1px solid var(--kaefer-linie); padding-top: 14px; }
.vk-login-links .list-group-item { border: 0; padding: 4px 0; background: none;
  color: var(--kaefer-grau); font-size: 13.5px; text-align: center; border-radius: 0; }
.vk-login-links .list-group-item:hover { color: var(--kaefer-tinte); text-decoration: underline; }

/* Joomla-Systemmeldungen (Fehl-Login) im CI-Stil über der Karte */
#system-message-container { max-width: 420px; margin: 24px auto -32px; }
#system-message-container .alert { border-radius: 0; border: 0;
  background: #fdecea; color: #8a1f0f; padding: 10px 14px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
#system-message-container .alert .alert-close, #system-message-container .alert .btn-close { display: none; }

/* Cassiopeia 5 rendert Systemmeldungen (JS aktiv) als <joomla-alert>-Custom-Element, nicht als .alert —
   .alert existiert nur im <noscript>-Fallback oben. Nur die Fehl-Varianten (Spec §3: "Fehl-Login etc.")
   auf KAEFER-Rot/scharf ziehen. Empirisch geprüft (Playwright-DOM): com_users rendert den Fehl-Login
   ("Username and password do not match…") mit type="warning", NICHT "error"/"danger" — deshalb hier
   warning+error+danger statt nur error/danger. notice/message/success/info (Reset-/Remind-Erfolgsmeldungen,
   RemindController/ResetController::request() = 'notice', ResetController::complete()-Default = 'message')
   bleiben bewusst außen vor (blau/grün, unverändert). Gleiche Spezifität wie das Vendor-CSS
   (joomla-alert[type="…"]), gewinnt durch spätere Ladeposition (user.css lädt zuletzt). */
#system-message-container joomla-alert[type="warning"],
#system-message-container joomla-alert[type="error"],
#system-message-container joomla-alert[type="danger"] {
  --alert-accent-color: var(--kaefer-rot); --alert-heading-text: #fff; --alert-close-button: var(--kaefer-rot);
  border-radius: 0; color: var(--kaefer-slate); box-shadow: 0 10px 30px rgba(0,0,0,.3); }

@media (max-width: 480px) {
  .vk-login { margin: 28px auto 48px; padding: 28px 20px; }
  #system-message-container { margin-top: 16px; }
}

/* ---------- Generische CI-Familie für übrige com_users-Seiten (reset/remind) ---------- */
/* Die generische Joomla-Seitenüberschrift (Cassiopeia `.page-header h1`, z. B.
   „Konfigurator" über Reset-/Remind-/Profil-Seiten) stand noch auf dem
   Cassiopeia-Default #22262A — nachgezogen auf die Typo-Farbe (Jan-Wunsch
   2026-08-24). Nur die Farbe; Größe/Gewicht/Abstände bleiben Cassiopeia. */
.container-component .page-header h1 { color: var(--kaefer-tinte); }
.com-users-reset, .com-users-remind, .com-users-reset-confirm, .com-users-reset-complete {
  max-width: 420px; margin: 56px auto 72px; background: #fff;
  border-top: 3px solid var(--kaefer-rot); border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 24px 60px rgba(0,0,0,.35); padding: 40px 36px; }
.com-users-reset legend, .com-users-remind legend,
.com-users-reset-confirm legend, .com-users-reset-complete legend {
  font-size: 18px; font-weight: 700; color: var(--kaefer-tinte); }
.com-users-reset label, .com-users-remind label,
.com-users-reset-confirm label, .com-users-reset-complete label {
  display: block; font-size: 13px; color: var(--kaefer-grau); margin-bottom: 4px; }
.com-users-reset input, .com-users-remind input,
.com-users-reset-confirm input, .com-users-reset-complete input {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--kaefer-linie-stark); border-radius: 0; font: inherit; }
.com-users-reset .btn-primary, .com-users-remind .btn-primary,
.com-users-reset-confirm .btn-primary, .com-users-reset-complete .btn-primary {
  width: 100%; border-radius: 0; text-transform: uppercase; letter-spacing: .5px;
  background: var(--kaefer-rot); border-color: var(--kaefer-rot); font-weight: 600; padding: 12px 24px; }
.com-users-reset .btn-primary:hover, .com-users-remind .btn-primary:hover,
.com-users-reset-confirm .btn-primary:hover, .com-users-reset-complete .btn-primary:hover {
  background: var(--kaefer-rot-dunkel); border-color: var(--kaefer-rot-dunkel); }