usbcheck.it/partials/landing/login/login.php

<section id="auth" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
    <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
        <div class="mb-10 text-center space-y-3">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="auth_kicker">
                Account &amp; Login
            </p>
            <h1 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="auth_title">
                Melde dich bei USBCheck an
            </h1>
            <p class="text-sm sm:text-base text-brand-muted max-w-2xl mx-auto" data-i18n="auth_intro">
                Mit einem Account kannst du Tests speichern, Reports exportieren und den Pro-Modus auf mehreren Geräten nutzen. Die Registrierung ist kostenlos – du kannst später jederzeit auf Pro upgraden.
            </p>
        </div>

        <div class="grid gap-8 md:grid-cols-2 items-start">
            <!-- Login -->
            <div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-5">
                <h2 class="font-heading text-lg font-semibold text-white" data-i18n="auth_login_title">
                    Login
                </h2>
                <p class="text-sm text-brand-muted" data-i18n="auth_login_text">
                    Melde dich mit deiner E-Mail-Adresse und deinem Passwort an.
                </p>

                <form method="post" action="/login/" class="space-y-4" autocomplete="on">
                    <div class="space-y-1">
                        <label for="login_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_email_label">
                            E-Mail-Adresse
                        </label>
                        <input
                            type="email"
                            id="login_email"
                            name="email"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="you@example.com"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="login_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_password_label">
                            Passwort
                        </label>
                        <input
                            type="password"
                            id="login_password"
                            name="password"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="••••••••"
                        >
                    </div>

                    <!-- Platzhalter für Fehlermeldungen (später per PHP / JS) -->
                    <p class="text-xs text-red-400 hidden" id="login_error">
                        <!-- Wird später dynamisch gefüllt -->
                    </p>

                    <button
                        type="submit"
                        class="w-full inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
                        data-i18n="auth_login_submit">
                        Einloggen
                    </button>

                    <div class="flex justify-between items-center text-xs text-brand-muted mt-1">
                        <a href="#" class="hover:text-brand-primary transition-colors" data-i18n="auth_login_forgot">
                            Passwort vergessen?
                        </a>
                    </div>
                </form>
            </div>

            <!-- Registrierung -->
            <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
                <h2 class="font-heading text-lg font-semibold text-white" data-i18n="auth_register_title">
                    Kostenlos registrieren
                </h2>
                <p class="text-sm text-brand-muted" data-i18n="auth_register_text">
                    Erstelle einen kostenlosen Account, um Tests zu speichern, Berichte zu exportieren und den Pro-Modus später freizuschalten.
                </p>

                <form method="post" action="/login/" class="space-y-4" autocomplete="on">
                    <input type="hidden" name="action" value="register">

                    <div class="space-y-1">
                        <label for="reg_name" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_name_label">
                            Name
                        </label>
                        <input
                            type="text"
                            id="reg_name"
                            name="name"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="Dein Name"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="reg_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_email_label">
                            E-Mail-Adresse
                        </label>
                        <input
                            type="email"
                            id="reg_email"
                            name="email"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="you@example.com"
                        >
                    </div>

                    <div class="space-y-1">
                        <label for="reg_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_password_label">
                            Passwort
                        </label>
                        <input
                            type="password"
                            id="reg_password"
                            name="password"
                            required
                            class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
                            placeholder="Mindestens 8 Zeichen"
                        >
                    </div>

                    <!-- Platzhalter für Fehlermeldungen (später per PHP / JS) -->
                    <p class="text-xs text-red-400 hidden" id="register_error">
                        <!-- Wird später dynamisch gefüllt -->
                    </p>

                    <button
                        type="submit"
                        class="w-full inline-flex items-center justify-center rounded-full border border-brand-primary bg-brand-bg/80 px-4 py-2.5 text-sm font-semibold text-brand-primary hover:bg-brand-primary hover:text-brand-bg transition-colors"
                        data-i18n="auth_register_submit">
                        Account erstellen
                    </button>

                    <p class="text-[11px] text-brand-muted/80 mt-1" data-i18n="auth_register_hint">
                        Durch die Registrierung akzeptierst du die Datenschutzerklärung und das Impressum von USBCheck.
                    </p>
                </form>
            </div>
        </div>
    </div>
</section>