/* Finanzbastion design tokens and the handful of components the shell, the login panels
   and the apex landing page share. Kept in one file so the browser surfaces look like the
   Beratungswerkzeuge instead of like an admin console. No webfont request: DM Sans is used
   when the system has it, otherwise the Apple system font — the Mac app is often offline. */

:root {
  --fb-navy: #163a5f;
  --fb-navy-soft: #2e64a8;
  --fb-gold: #e8c547;
  --fb-surface: #ffffff;
  --fb-bg: #f6f4ef;
  --fb-ink: #1c2430;
  --fb-ink-muted: #5a6675;
  --fb-line: #e2ddd3;
  --fb-radius: 12px;
  --fb-radius-sm: 8px;
  --fb-shadow: 0 8px 24px rgba(22, 58, 95, 0.12);
  --fb-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.fb-body {
  margin: 0;
  min-height: 100vh;
  background: var(--fb-bg);
  color: var(--fb-ink);
  font-family: var(--fb-font);
  line-height: 1.5;
}

.fb-card {
  background: var(--fb-surface);
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow);
  padding: 2rem;
}

.fb-hero-title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fb-navy);
}

.fb-lead {
  margin: 0 0 1.25rem;
  color: var(--fb-ink-muted);
}

.fb-label {
  display: block;
  margin: 1rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fb-ink);
}

.fb-input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  background: var(--fb-surface);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius-sm);
}

.fb-input:focus {
  outline: 2px solid var(--fb-navy-soft);
  outline-offset: 1px;
  border-color: var(--fb-navy-soft);
}

.fb-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--fb-surface);
  background: var(--fb-navy);
  border: 1px solid var(--fb-navy);
  border-radius: var(--fb-radius-sm);
  cursor: pointer;
}

.fb-button:hover { background: var(--fb-navy-soft); border-color: var(--fb-navy-soft); }
.fb-button:disabled { opacity: 0.5; cursor: default; }

.fb-button-gold {
  color: var(--fb-navy);
  background: var(--fb-gold);
  border-color: var(--fb-gold);
}

.fb-button-gold:hover { filter: brightness(1.05); background: var(--fb-gold); border-color: var(--fb-gold); }

.fb-button-quiet {
  color: var(--fb-navy);
  background: transparent;
  border-color: var(--fb-line);
}

.fb-button-quiet:hover { background: #f2efe8; border-color: var(--fb-line); }

/* Numbered steps used on the sign-in panel: 1 E-Mail · 2 Link öffnen · 3 fertig. */
.fb-steps {
  display: flex;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.fb-steps li {
  flex: 1;
  font-size: 0.82rem;
  color: var(--fb-ink-muted);
}

.fb-steps li::before {
  content: counter(fb-step);
  counter-increment: fb-step;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--fb-navy);
  background: var(--fb-gold);
  border-radius: 50%;
}

.fb-steps { counter-reset: fb-step; }

/* Wofür / Wer / Was danach — the three answers the PIN panel owes the reader. */
.fb-why {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.fb-why dt {
  font-weight: 700;
  color: var(--fb-navy);
}

.fb-why dd {
  margin: 0 0 0.6rem;
  color: var(--fb-ink-muted);
}

/* "Noch kein Konto?" — same block on the dashboard login and the apex landing page. */
.fb-noaccount {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fb-line);
}

.fb-noaccount h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fb-navy);
}

.fb-noaccount p { margin: 0 0 0.6rem; color: var(--fb-ink-muted); font-size: 0.9rem; }
.fb-noaccount ul { margin: 0 0 0.9rem; padding-left: 1.1rem; color: var(--fb-ink-muted); font-size: 0.9rem; }
.fb-noaccount li { margin-bottom: 0.25rem; }

.fb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fb-actions .fb-button { margin-top: 0; }

.fb-status { min-height: 1.4rem; font-size: 0.88rem; color: var(--fb-ink-muted); }
.fb-status[data-tone="error"] { color: #a12b2b; }
.fb-status[data-tone="ok"] { color: #1f6b46; }

/* Team & Rechte in the main area: person cards, read-only chips, invite switches. */
.fb-main-panel {
  height: 100%;
  overflow: auto;
  padding: 2rem;
  box-sizing: border-box;
}

.fb-person {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--fb-surface);
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius);
}

.fb-person strong { display: block; color: var(--fb-navy); }
.fb-person small { color: var(--fb-ink-muted); }

.fb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.fb-chip {
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  color: var(--fb-navy);
  background: #eef2f7;
  border-radius: 999px;
}

.fb-rights { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }

.fb-right {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.9rem;
}

.fb-right input { width: auto; margin: 0; }
.fb-right strong { display: block; font-weight: 600; }
.fb-right small { display: block; color: var(--fb-ink-muted); }

.fb-empty {
  max-width: 26rem;
  margin: 18vh auto;
  text-align: center;
  color: var(--fb-ink-muted);
}

.fb-empty h2 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--fb-navy); }