// Äußere Hülle für alle Auth-Seiten: zentrierte Karte, dezenter Kupfer-Schein,
// opaker --rk-bg-Grund gegen den weißen Radial-Schimmer des body-Hintergrunds.
export function AuthShell({
children,
// Standard-Auth-Seiten (Login, Passwort vergessen/zurücksetzen, Verifizierung)
// haben nur 1-2 Felder und kommen mit der schmalen Karte gut aus. Die
// Registrierung hat deutlich mehr Felder (Name, Anschrift, Geburtsdatum
// usw.) und braucht mehr Breite — Nutzer-Meldung 04.10.2026: Seite wirkte
// zu schmal, Felder passten nicht zueinander. Fester Wert statt vw/clamp,
// siehe Projekt-Konvention (fixe Content-Breite, feste Breakpoints).
maxWidthClassName = "max-w-sm",
}: {
children: React.ReactNode;
maxWidthClassName?: string;
}) {
return (
{children}
);
}
// Titel + Akzentstrich + optionaler Untertitel + Karte um das Formular.
// Als eigene Komponente, damit der Login-Flow (2FA / erzwungener
// Passwortwechsel) je Schritt einen passenden Titel setzen kann, statt
// überall „Einloggen" stehen zu lassen (Till, 09.09.2026).
export function AuthCardBody({
title,
subtitle,
children,
}: {
title: string;
subtitle?: string;
children: React.ReactNode;
}) {
return (
<>
{title}
{/* Bei Untertitel steht der als Abschluss unter dem Titel (Register-
Mockup); ohne Untertitel schließt der Akzentstrich ab (Login-Mockup). */}
{subtitle ? (
{subtitle}
) : (
)}
{children}
);
}
// Bequemer Wrapper für die statischen Auth-Seiten (Registrieren, Passwort
// vergessen / zurücksetzen), die immer denselben Titel haben.
export function AuthCard({
title,
subtitle,
children,
maxWidthClassName,
}: {
title: string;
subtitle?: string;
children: React.ReactNode;
maxWidthClassName?: string;
}) {
return (
{children}
);
}