/* Marke "ecma" — eigenes Stylesheet (Plan 20260915_KONZEPT_ecma_auf_auth_und_sse.adoc,
   Etappe E1b: „eigenes Layout je Marke"). Primärfarbe aus ecma-client-vue-quasar
   (src/css/quasar.variables.scss, $primary: #673ab7, deep-purple — SCSS-Default, kein
   Override in src/themes/palettes.ts aktiv; auch dort Default #673ab7). --primary-rgb
   speist den Fokusring in auth.css. */
:root {
  --primary: #673ab7;
  --primary-dark: #4527a0;
  --primary-rgb: 103, 58, 183;
}
/* Kopfleiste der Karte blau-grau wie die alte ECMA-Anmeldeseite (`bg-blue-grey glossy`,
   Quasar #607d8b) — MB 16.09.2026; Knopf und Links bleiben in der Primaerfarbe. */
.card__header {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%), #607d8b;
}

/* Rahmen der ECMA-Anmeldeseiten (Kopf-/Fußleiste, Support-Ausklapper) — Nachbau der alten
   ECMA-SPA-Anmeldeseite (ecma-client `LoginPage.vue`/`LoginLayout.vue`), MB 16.09.2026. Die
   Karte selbst kommt weiter aus auth.css/login.html, unveraendert. body bleibt flex-zentriert
   (auth.css) — die Leisten liegen fixed darueber/darunter, padding-top/bottom raeumt Platz frei,
   damit sie die Karte nicht ueberdecken. */
body {
  padding-top: 50px;
  padding-bottom: 40px;
  /* relativ zum Stylesheet: lokal haengt der Server unter /authz, absolut liefe das ins Leere */
  background-image: url("../img/ecma/architecture.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.ecma-header {
  position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 10;
  /* blau-grau wie die Karten-Kopfleiste (MB 16.09.2026: „auch die Seitenleiste auf das grau-blau") */
  background: linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%), #607d8b;
  color: #fff;
  display: flex; align-items: center; gap: .6rem; padding: 0 1rem;
}
.ecma-header img { flex: none; }
.ecma-header__title { flex: 1; font-size: 1rem; font-weight: 500; }
.ecma-header__btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: transparent; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ecma-header__btn:hover { background: rgba(255, 255, 255, .15); }
.ecma-header__btn svg { width: 20px; height: 20px; fill: currentColor; }

.ecma-drawer {
  position: fixed; top: 50px; bottom: 40px; right: 0; width: 300px; max-width: 100%;
  background: #fff; border-left: 1px solid var(--line); z-index: 9;
  transform: translateX(100%); transition: transform .2s ease-out;
  overflow-y: auto;
}
.ecma-drawer.is-open { transform: translateX(0); }
.ecma-drawer__list { list-style: none; margin: 0; padding: .5rem; }
.ecma-drawer__item { padding: .5rem .5rem; }
.ecma-drawer__row { display: flex; align-items: center; gap: .6rem; }
.ecma-drawer__row svg { width: 18px; height: 18px; fill: var(--muted); flex: none; }
.ecma-drawer__h5 { font-size: 1.3rem; color: var(--ink); }
.ecma-drawer__h6 { font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.ecma-drawer__overline { font-size: .75rem; text-transform: uppercase; color: var(--muted); }
.ecma-drawer__sep { height: 1px; background: var(--line); margin: .5rem 0; }

.ecma-footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 40px; z-index: 10;
  background: #eeeeee; color: #000;
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem; font-size: .9rem;
}
.ecma-footer a { color: inherit; text-decoration: none; }
.ecma-footer a:hover { text-decoration: underline; }
.ecma-footer__spacer { flex: 1; }