/* The „stage" (_layout/stage.html) — registration, authentication, invitations, the
   Stripe return pages. The class prefix stays `reg-` for historical reasons.
   Tones and fonts come globally from design/tokens.css; the website's editorial button
   (.ld-btn) is reproduced below because the stage shares its language. Here: the paper
   stage, a large serif headline left, the form as a card right. Everything is scoped
   under .reg-body so nothing leaks back into the application. */

.reg-body {
  /* Historical names — point at the global tokens. */
  --reg-muted: var(--ink-mute);
  --reg-ok: var(--pine);
  --reg-error: var(--seal);
  --reg-error-bg: var(--error-bg);
  font-size: 1rem;
  line-height: 1.55;
}

/* The app footer stays here (Impressum, Datenschutz) and is tuned to the paper stage. */
.reg-body .app-main > footer.app-footer {
  display: flex;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 2rem;
  border-top: 1px solid var(--rule);
}
.reg-body .app-footer-links a,
.reg-body .app-footer-note { color: var(--ink-soft); }

/* The website's editorial buttons, used on the stage cards. */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
  transition: background-color 150ms ease, border-color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.ld-btn:hover {
  background: var(--navy-bright);
  border-color: var(--navy-bright);
  /* Explicit: the global `a:hover` rule (type + pseudo-class) outranks `.ld-btn` alone
     and would recolour the label to seal on navy. */
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
.ld-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(14, 34, 48, 0.25); }
.ld-btn:focus-visible,
.ld-btn-ghost:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}
.ld-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.ld-btn-ghost:hover {
  border-color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  transform: translateY(-1px);
}

/* Stage (full width, subtle colour clouds + ship's wheel watermark). */
.reg-stage {
  position: relative;
  overflow: hidden;
  padding: 0 1.2rem 3.5rem;
}
.reg-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(28, 70, 99, 0.08), transparent 70%),
    radial-gradient(40% 30% at 0% 100%, rgba(150, 64, 46, 0.07), transparent 70%);
}
.reg-rose {
  position: absolute;
  right: -9rem;
  top: -9rem;
  width: 34rem;
  height: 34rem;
  color: rgba(28, 70, 99, 0.07);
  pointer-events: none;
}
.reg-rose svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .reg-rose { animation: reg-drift 160s linear infinite; }
  .reg-intro { animation: reg-rise 0.5s ease-out both; }
  .reg-card { animation: reg-rise 0.55s 0.08s ease-out both; }
}
@keyframes reg-drift { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes reg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Align flash messages (e.g. „Gutschein erkannt") to the stage width; the tonality (seal
   red / pine green) comes from the global .flash rules. */
.reg-body .flashes {
  max-width: 64rem;
  margin: 1.2rem auto -1.2rem;
  padding: 0 1.2rem;
  position: relative;
  z-index: 1;
}

.reg-wrap {
  position: relative;
  max-width: 64rem;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, 30rem);
  gap: 4rem;
  align-items: start;
}

/* --- Left column: route, headline, trust ------------------------------------------- */
.reg-intro { position: sticky; top: 5rem; }

.reg-route {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reg-route li {
  flex: 1;
  padding: 0.7rem 1rem 0.7rem 0;
  color: var(--reg-muted);
}
.reg-route li::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 0.7rem;
  border-radius: 2px;
  background: var(--rule);
}
.reg-route li.done { color: var(--reg-ok); }
.reg-route li.done::before { background: var(--reg-ok); }
.reg-route li.now { color: var(--seal); }
.reg-route li.now::before { background: var(--seal); }

.reg-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal);
}
.reg-intro h1 {
  margin: 0.6rem 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.reg-intro h1 em { font-style: italic; color: var(--navy); }
/* For dynamic, longer headlines (e.g. invitation notes). */
.reg-intro h1.reg-h1-sm { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.reg-lede {
  margin: 0 0 1.8rem;
  max-width: 38ch;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.reg-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.8rem;
  max-width: 30rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reg-trust li {
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.reg-trust b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}

/* --- Right column: the card ---------------------------------------------------------- */
.reg-card {
  position: relative;
  padding: 2rem 2.2rem 2.2rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 30px 60px -40px rgba(29, 38, 48, 0.35), 0 1px 0 #fff inset;
}
/* Inner hairline — the card reads as a form sheet. */
.reg-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 9px;
  pointer-events: none;
}
.reg-stamp {
  position: absolute;
  top: -1.1rem;
  right: 1.6rem;
  transform: rotate(3deg);
  padding: 0.42rem 0.75rem;
  border-radius: 3px;
  background: var(--seal);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(150, 64, 46, 0.8);
}
.reg-card h2 {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
}

/* Sections: mono legend + a short explanation of what the data is needed for. */
.reg-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.reg-section + .reg-section { margin-top: 1.5rem; }
.reg-section legend {
  padding: 0;
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reg-muted);
}
.reg-section-desc {
  margin: 0 0 0.9rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--reg-muted);
}

.reg-field { margin: 0 0 1rem; min-width: 0; }
.reg-field label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.reg-field label small { font-weight: 400; color: var(--reg-muted); }
.reg-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.reg-help { font-size: 0.78rem; color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.reg-help:hover { color: var(--seal); }
.reg-field input[type="text"],
.reg-field input[type="email"],
.reg-field input[type="password"] {
  width: 100%;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.reg-field input[type="text"]:focus,
.reg-field input[type="email"]:focus,
.reg-field input[type="password"]:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.reg-field input[aria-invalid="true"] { border-color: var(--reg-error); }
.reg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.reg-grid-plz { display: grid; grid-template-columns: 8rem 1fr; gap: 0 1rem; }

.reg-error {
  margin: -0.5rem 0 1rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: var(--reg-error-bg);
  color: var(--reg-error);
  font-size: 0.82rem;
}

/* The divider as its own element — as border-top of the <fieldset> it would run through
   the <legend>. */
.reg-divider { margin: 1.4rem 0 1rem; border-top: 1px dashed var(--rule); }
.reg-section + .reg-consent { margin-top: 0; }
.reg-check {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 0.55rem 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.reg-check input {
  margin: 0.2rem 0 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--navy);
}
.reg-check a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.reg-consent .reg-error { margin: 0.2rem 0 0.4rem; }

.reg-card .ld-btn { width: 100%; margin-top: 1.4rem; }
.reg-card .ld-btn .reg-arrow { transition: transform 0.2s; }
.reg-card .ld-btn:hover .reg-arrow { transform: translateX(3px); }
/* Text divider („Noch kein Zugang?") between the primary and the secondary action. */
.reg-divider-text {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.4rem 0 0.9rem;
  font-size: 0.78rem;
  color: var(--reg-muted);
}
.reg-divider-text::before,
.reg-divider-text::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.reg-version { margin: 1.2rem 0 0; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--reg-muted); }
.reg-trust li a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.reg-copy { margin: 0 0 0.9rem; color: var(--ink-soft); }
.reg-copy strong { color: var(--ink); }
/* Note inside the card („Nicht im Posteingang?" on the waiting page): amber paper with a
   dashed edge like the stage's dividers, mono eyebrow like a section legend. The amber
   tone appears nowhere else on the stage, which is what makes the note stand out without
   a louder device. */
.reg-notice {
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px dashed var(--warn-border);
  border-radius: 8px;
  background: var(--warn-bg);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}
.reg-notice p { margin: 0; }
.reg-notice p + p { margin-top: 0.45rem; }
.reg-notice strong { font-weight: 600; color: var(--ink); }
.reg-notice .reg-notice-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn-text);
}
.reg-notice .reg-notice-title svg { flex: none; }
/* Ghost button (e.g. „E-Mail erneut senden") at card width; visibly subdued while
   disabled during the cooldown. */
.reg-card .reg-btn-ghost {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
}
.reg-card .reg-btn-ghost:disabled { opacity: 0.55; cursor: default; transform: none; }
.reg-fine {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--reg-muted);
}
.reg-fine a { color: var(--ink-soft); }

/* Ghost button as the secondary action below the primary button (e.g. „Abmelden"). */
.reg-card .ld-btn + .reg-btn-ghost { margin-top: 0.7rem; }

/* MFA code: monospaced, centred, spaced — reads like the authenticator's display. */
.reg-code-input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.reg-code-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--brand-ring); }

/* Firm choice: one tile per firm, locked or disabled visibly subdued. */
.reg-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.reg-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.reg-tile-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; }
.reg-tile-arrow { color: var(--navy); transition: transform 0.2s; }
.reg-tile:hover:not(:disabled) { border-color: var(--navy); box-shadow: 0 8px 20px -14px rgba(28, 70, 99, 0.6); transform: translateY(-1px); }
.reg-tile:hover:not(:disabled) .reg-tile-arrow { transform: translateX(3px); }
.reg-tile:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--brand-ring); }
.reg-tile-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seal);
}
.reg-tile-off, .reg-tile:disabled { background: var(--paper-deep); color: var(--reg-muted); cursor: not-allowed; }
.reg-tile:disabled .reg-tile-status { color: var(--reg-muted); }

/* --- Completion („Willkommen") --------------------------------------------------------- */
.reg-done { text-align: center; padding: 0.6rem 0 0; }
.reg-done-ring {
  position: relative;
  width: 5.2rem;
  height: 5.2rem;
  margin: 0 auto 1.4rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--navy);
  border-radius: 50%;
  color: var(--navy);
}
.reg-done-ring svg { width: 2.2rem; height: 2.2rem; }
.reg-done-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .reg-done-ring::after { animation: reg-drift 40s linear infinite; }
}
.reg-done h2 { margin: 0 0 0.5rem; font-size: 2.2rem; font-weight: 400; }
.reg-done p { margin: 0.4rem auto; max-width: 36ch; color: var(--ink-soft); }
.reg-done p strong { color: var(--ink); }
.reg-trial {
  display: inline-block;
  margin: 1rem 0 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(28, 70, 99, 0.07);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reg-done-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.2rem;
  max-width: 22rem;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.reg-done-steps li { position: relative; padding: 0.35rem 0 0.35rem 1.5rem; }
.reg-done-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
}
.reg-done .ld-btn { margin-top: 0.4rem; }
.reg-done .ld-btn .muted-inverse { opacity: 0.75; font-weight: 400; }

/* --- Responsive ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .reg-wrap { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  /* Single column: route + headline on top, then the card, the trust anchors only below
     — otherwise the list pushes the form below the fold. */
  .reg-intro { display: contents; }
  .reg-intro > * { order: 1; }
  .reg-card { order: 2; margin-top: 1.6rem; padding: 1.6rem 1.3rem; }
  .reg-trust { order: 3; margin-top: 1.8rem; max-width: none; }
  .reg-route { margin-bottom: 1.4rem; }
  .reg-lede { margin-bottom: 0; }
}
@media (max-width: 520px) {
  .reg-trust, .reg-grid-2 { grid-template-columns: 1fr; }
  .reg-grid-plz { grid-template-columns: 6.5rem 1fr; }
  .reg-stamp { right: 1rem; }
}