/* Registrierung (register.php): links Formular, rechts Foto mit Vorteilskarte.
   Die Formularbausteine (.field, .slug-input, .check, .reg-help …) kommen aus app.css. */

.auth-shell:has(> .rg) { display: block; min-height: 0; padding: 0; }

/* Links Formular (oben) und Rechtliches (unten), rechts das Foto über die volle Höhe.
   Im Quelltext steht das Rechtliche zuletzt, damit es auf dem Handy unter den Vorteilen landet. */
.rg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.rg-main { grid-column: 1; grid-row: 1; }
.rg-aside { grid-column: 2; grid-row: 1 / span 2; }
.rg-legal { grid-column: 1; grid-row: 2; }

/* ── Linke Spalte ─────────────────────────────────────────── */

.rg-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5) var(--space-7) 0;
}
.rg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.rg-logo { display: inline-flex; flex-shrink: 0; }
.rg-logo img { width: 124px; height: auto; }
.rg-login { margin: 0; font-size: 14px; color: var(--ink-muted); text-align: right; }
.rg-login a { font-weight: 700; }

.rg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-7) 0;
}
.rg-intro { text-align: center; margin-bottom: var(--space-6); }
.rg-intro h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.rg-intro p {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 16px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.rg-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.rg-card .lead { margin: 0 0 var(--space-5); font-size: 14.5px; color: var(--ink-muted); }
.rg-card .lead strong { color: var(--ink); }
.rg-card-title { margin: 0 0 var(--space-2); font-size: 21px; line-height: 1.25; }
.rg-card button[type=submit]:not(.link-button):not(.btn-secondary) { margin-top: var(--space-4); }
.rg-card .reg-footer { margin-top: var(--space-5); }

/* Fortschritt: ein Balken pro Schritt, darüber "Schritt x von 5". */
.rg-progress { margin-bottom: var(--space-5); }
.rg-progress-count {
  margin: 0 0 var(--space-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.rg-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rg-step {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.rg-step.is-done { background: var(--accent); }
.rg-step.is-current { background: var(--brand); }

.rg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rg-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0 var(--space-7) var(--space-5);
  font-size: 12.5px;
  color: var(--ink-subtle);
}
.rg-legal a { color: var(--ink-muted); text-decoration: none; }
.rg-legal a:hover, .rg-legal a:focus-visible { color: var(--brand-ink); text-decoration: underline; }

/* ── Rechte Spalte: Foto + Vorteile ───────────────────────── */

.rg-aside {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7);
  background-color: var(--surface-dark);
  background-image: url('img/register-photo.jpg');
  background-image: image-set(url('img/register-photo.webp') type('image/webp'), url('img/register-photo.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 60%;
  overflow: hidden;
}
.rg-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(32, 32, 30, 0.2);
  pointer-events: none;
}

.rg-benefits {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-6);
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(32, 32, 30, 0.25);
}
.rg-benefits h2 { margin: 0 0 var(--space-4); font-size: 20px; line-height: 1.3; }
.rg-benefits ul { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.rg-benefits li { display: flex; gap: var(--space-3); align-items: flex-start; }
.rg-benefits li svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.rg-benefits strong { display: block; font-size: 15px; line-height: 1.35; }
.rg-benefits span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }

/* ── Kleinere Bildschirme: kein Foto, Vorteile unter dem Formular ── */

@media (max-width: 1100px) {
  .rg-main { padding: var(--space-5) var(--space-5) 0; }
  .rg-legal { padding: 0 var(--space-5) var(--space-5); gap: var(--space-1) var(--space-3); }
  .rg-aside { padding: var(--space-5); }
}

@media (max-width: 900px) {
  .rg { grid-template-columns: 1fr; grid-template-rows: none; }
  .rg-main, .rg-aside, .rg-legal { grid-column: auto; grid-row: auto; }
  .rg-main { padding: var(--space-4) var(--space-4) 0; }
  .rg-legal { padding: 0 var(--space-4) var(--space-6); }
  .rg-body { padding: var(--space-6) 0 var(--space-5); }
  .rg-intro { margin-bottom: var(--space-5); }
  .rg-aside {
    position: static;
    height: auto;
    padding: 0 var(--space-4) var(--space-5);
    background: none;
  }
  .rg-aside::before { display: none; }
  .rg-benefits { max-width: 560px; box-shadow: none; border: 1px solid var(--border); }
}

@media (max-width: 520px) {
  .rg-logo img { width: 104px; }
  .rg-login { font-size: 13px; }
  .rg-login-text { display: none; }
  .rg-intro h1 { font-size: 26px; }
  .rg-intro p { font-size: 15px; }
  .rg-card { padding: var(--space-5) var(--space-4); }
  .rg-benefits { padding: var(--space-5) var(--space-4); }
}