<script>
    import { navigate } from "svelte-routing"
        // set 404 for ssr
    if (typeof window === "undefined") {
        // @ts-ignore
        if (context) context.is404 = true
    }
</script>

<svelte:head>
    <meta name="robots" content="noindex" />
    <meta http-equiv="refresh" content="5; URL=/" />
</svelte:head>

<div class="not-found">
    <div class="content">
        <h1>404</h1>
        <h2>Seite nicht gefunden</h2>
        <p>
            Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht
            verfügbar.
        </p>
        <button
            on:click="{() => {
                navigate('/')
            }}"
            class="back-home">Zurück zur Startseite</button
        >
    </div>
</div>

<style lang="less">
    @import "../lib/assets/css/variables.less";

    .not-found {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-size: @body-fontsize-mobile;

        @media @tablet {
            font-size: @body-fontsize-pc;
            line-height: @body-lineheight-pc;
        }

        .content {
            text-align: center;
            max-width: @body-small-maxwidth;
            padding: 2rem;
            background-color: var(--background-color-90);

            h1 {
                font-size: 6rem;
                color: var(--banner-color);
                margin-bottom: 2rem;
            }

            h2 {
                font-size: 2rem;
                color: var(--heading-font-color);
                margin-bottom: 1rem;
            }

            p {
                margin-bottom: 2rem;
            }

            .back-home {
                text-decoration: none;
                border: 1px solid black;
                padding: 0.5rem 1rem;
                transition: background-color 0.2s, color 0.2s;

                &:hover {
                    background-color: var(--hover-color);
                    color: var(--normal-font-color);
                }
            }
        }
    }
</style>
