/* Geteilte Struktur-Styles der Auth-Server-Seiten (Karte mit Kopfleiste, Formularfelder,
   Verlaufs-Hintergrund) — von craze- UND ecma-Templates eingebunden. Die Marken-Farbe
   (--primary/--primary-dark/--primary-rgb) liefert je Marke ein eigenes Stylesheet
   (craze.css/ecma.css), NACH diesem hier eingebunden (Plan
   20260915_KONZEPT_ecma_auf_auth_und_sse.adoc, Etappe E1b: „eigenes Layout je Marke"). */
:root {
  --ink: #33414f;
  --muted: #64748b;
  --line: #d5dbe3;
}
* { box-sizing: border-box; }
body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e3eaf4 0%, #cfd9e4 100%);
  color: var(--ink); padding: 1rem;
}
.card {
  background: #fff; width: 420px; max-width: 100%;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(20, 40, 80, .14); overflow: hidden;
}
.card__header {
  background: var(--primary); color: #fff; display: flex; align-items: center; gap: .55rem;
  padding: .9rem 1.25rem; font-size: 1.05rem; font-weight: 500;
}
.card__header svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.card__body { padding: 1.5rem 1.75rem 1.75rem; }

.field { margin-top: 1rem; }
.field:first-of-type { margin-top: 0; }
.field > label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.input {
  display: flex; align-items: center; gap: .4rem; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 0 .6rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.input > svg { width: 18px; height: 18px; fill: var(--muted); flex: none; }
.input input {
  border: none; outline: none; width: 100%; padding: .6rem .1rem; font-size: 1rem;
  background: transparent; color: var(--ink);
}
.input .reveal {
  border: none; background: none; cursor: pointer; padding: .2rem; display: flex; color: var(--muted);
}
.input .reveal svg { width: 18px; height: 18px; fill: currentColor; }

.btn {
  width: 100%; margin-top: 1.6rem; padding: .72rem; border: none; border-radius: 6px;
  background: var(--primary); color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--primary-dark); }

.error {
  background: #fdecea; color: #c0392b; border: 1px solid #f5c6c2;
  padding: .6rem .75rem; border-radius: 6px; font-size: .85rem; margin-bottom: 1rem;
}

.success {
  background: #e8f5e9; color: #2e7d32; border: 1px solid #c3e6cb;
  padding: .6rem .75rem; border-radius: 6px; font-size: .85rem; margin-bottom: 1rem;
}

.intro { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0 0 1.1rem; }
.done { text-align: center; }
.done .icon { width: 46px; height: 46px; fill: #2e7d32; margin: .25rem auto .75rem; display: block; }
.done h2 { font-size: 1.15rem; margin: 0 0 .6rem; color: var(--ink); }
.done p { color: var(--muted); line-height: 1.55; margin: .5rem 0; }
.done a { color: var(--primary); }

/* Absage-Seite */
.denied { text-align: center; }
.denied .icon { width: 46px; height: 46px; fill: #e0a500; margin: .25rem auto .75rem; display: block; }
.denied h2 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--ink); }
.denied p { color: var(--muted); line-height: 1.55; margin: .5rem 0; }
.denied a { color: var(--primary); }

/* Für Passwortmanager sichtbares, aber nicht am Layout beteiligtes Benutzername-Feld
   (kein type="hidden"/display:none — viele Manager ignorieren das und bieten dann
   auf reinen Passwort-Seiten kein „Passwort erzeugen" an, MB 18.09.2026). */
.visually-hidden {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}