<!-- Bootstrap -->
<main
    class="container-fluid d-flex justify-content-center align-items-center p-4 bg-light min-vh-100"
>
    <div class="card border-0 shadow-sm p-4 w-100">
        <h1 class="h3 text-center mb-4">Anmelden</h1>

        <form>
            <div class="mb-3">
                <label class="form-label small fw-medium">E‐Mail</label>

                <div class="input-group">
                    <span
                        class="input-group-text bg-transparent border-end-0"
                    >
                        <i class="bi bi-envelope-fill"></i>
                    </span>

                    <input
                        type="email"
                        class="form-control border-start-0"
                        placeholder="test@beispiel.de"
                    />
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label small fw-medium">Passwort</label>

                <div class="input-group">
                    <span
                        class="input-group-text bg-transparent border-end-0"
                    >
                        <i class="bi bi-key-fill"></i>
                    </span>

                    <input
                        type="password"
                        class="form-control border-start-0"
                    />
                </div>
                <div class="mt-2 text-end">
                    <a class="small text-decoration-none" href="#">
                        Passwort vergessen?
                    </a>
                </div>
            </div>

            <div class="d-grid">
                <button
                    type="submit"
                    class="btn btn-primary d-flex align-items-center justify-content-center gap-2"
                >
                    <i class="bi bi-box-arrow-in-right"></i>

                    Anmelden
                </button>
            </div>
        </form>
    </div>
</main>

<style>
    main .card {
        max-inline-style: 30rem;
        border-radius: 1.5rem;
    }
</style>

<!-- Placer Toolkit -->
<main class="main-content">
    <form class="pc-stack">
        <h1>Anmelden</h1>

        <pc-input label="E‐Mail" type="email" placeholder="test@beispiel.de">
            <pc-icon
                library="default"
                icon-style="solid"
                name="envelope"
                slot="prefix"
            ></pc-icon>
        </pc-input>

        <pc-input label="Passwort" type="password" password-toggle>
            <pc-icon
                library="default"
                icon-style="solid"
                name="key"
                slot="prefix"
            ></pc-icon>

            <a href="#" slot="hint">Passwort vergessen?</a>
        </pc-input>

        <pc-button appearance="primary">
            <pc-icon
                library="default"
                icon-style="solid"
                name="arrow-right-to-bracket"
                slot="prefix"
            ></pc-icon>

            Anmelden
        </pc-button>
    </form>
</main>

<style>
    .main-content {
        inline-size: 100%;
        background-color: var(--pc-color-surface-lowered);
    }

    .main-content form {
        padding: var(--pc-spacing-l);
        max-inline-size: 95%;
        inline-size: 30rem;
        background-color: var(--pc-color-surface-default);
        border-radius: var(--pc-border-radius-xl);
        box-shadow: var(--pc-shadow-m);
    }

    .main-content form h1 {
        font-size: var(--pc-font-size-xl);
        text-align: center;
    }
</style>