Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

2022-05-24 16:44:55 +02:00
parent f4b6bb17ca
commit 47fdee2396
75 changed files with 2086 additions and 1234 deletions
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,6 +1,7 @@
 import { apiBaseURL } from "./config"
 import * as sentry from "./sentry"
 import * as SSR from "../api/hooks/lib/ssr.js"
+import config from "../api/hooks/config"

 // [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
 const _f = function (url, options): Promise<Response> {
@@ -74,9 +75,12 @@ export const api = async <T>(
        headers?: {
            [key: string]: string
        }
-        params?: {
-            [key: string]: string
-        }
+        params?: APIParams
+        body?: any
+        noToken?: boolean
+        signal?: AbortSignal
+        _groupBy?: string
+        showErrors?: boolean
    }
 ): Promise<{ data: T; count: number }> => {
    if (typeof window === "undefined") {
@@ -98,6 +102,7 @@ export const api = async <T>(
    }

    let method = "GET"
+    if (options?.method) method = options.method.toUpperCase()

    let query = "&count=1"
    if (options?.filter) query += "&filter=" + encodeURIComponent(JSON.stringify(options.filter))
@@ -105,6 +110,7 @@ export const api = async <T>(
    if (options?.limit) query += "&limit=" + options.limit
    if (options?.offset) query += "&offset=" + options.offset
    if (options?.projection) query += "&projection=" + options.projection
+    if (options?._groupBy) query += "&_groupBy=" + options._groupBy

    if (options?.params) {
        Object.keys(options.params).forEach((p) => {
@@ -116,9 +122,17 @@ export const api = async <T>(
        "Content-Type": "application/json",
    }

+    // send jwt
+    if (!options?.noToken) {
+        // try {
+        //     headers["Authorization"] =
+        //         "Bearer " + (await getLogin()).tokenString
+        // } catch (e) { }
+    }
+
    if (options?.headers) headers = { ...headers, ...options.headers }

-    let url = apiBaseURL + endpoint + (query ? "?" + query : "")
+    let url = apiBaseURL + endpoint + (query ? (endpoint.includes("?") ? query : "?" + query) : "")

    const span = sentry.currentTransaction()?.startChild({
        op: "fetch",
@@ -130,21 +144,46 @@ export const api = async <T>(
        headers["sentry-trace"] = trace_id
    }

-    const response = await _fetch(url, {
-        method,
-        mode: "cors",
-        headers,
+    try {
+        const response = await _fetch(url, {
+            method,
+            mode: "cors",
+            headers,
+            body: options?.body ? JSON.stringify(options.body) : null,
+            signal: options?.signal,
+        })
+
+        span?.finish()
+
+        // @ts-ignore
+        let data = (await response?.json()) || null
+
+        if (response?.status < 200 || response?.status >= 400) throw { response, data }
+
+        // @ts-ignore
+        return { data, count: response?.headers?.get("x-results-count") || 0 }
+    } catch (e) {
+        if (options?.showErrors && !(e instanceof DOMException)) {
+            // newNotification({
+            //     class: "error",
+            //     html: "Es ist ein Fehler aufgetreten! Bitte laden Sie die Seite neu und versuchen es später nocheinmal.",
+            //     timeout: 6000,
+            // })
+        }
+        throw e
+    }
+}
+
+export const sendEmail = async (type: string = "contactForm", data: any, noToken?: boolean) => {
+    await api("email?type=" + type, {
+        method: "post",
+        body: data,
+        noToken,
+        showErrors: true,
+        headers: {
+            token: config.publicToken,
+        },
    })
-
-    span?.finish()
-
-    // @ts-ignore
-    let data = (await response?.json()) || null
-
-    if (response?.status < 200 || response?.status >= 400) throw { response, data }
-
-    // @ts-ignore
-    return { data, count: response?.headers?.get("x-results-count") || 0 }
 }

 export const getContent = async (path: string): Promise<Content> => {
@@ -155,14 +194,14 @@ export const getContent = async (path: string): Promise<Content> => {
    return null
 }

-export const getGeneralInformation = async (): Promise<GeneralInformation[]> => {
+export const getGeneralInformation = async (): Promise<GeneralInfo[]> => {
    try {
-        let response = await api<GeneralInformation[]>("general", {
+        let response = await api<GeneralInfo[]>("general", {
            method: "get",
            offset: 0,
            limit: 1,
            filter: {
-                active: true,
+                public: true,
            },
        })
        return response.data
@@ -185,3 +224,38 @@ export const getArticles = async (): Promise<TibiArticle[]> => {
        return null
    }
 }
+
+export const getNavigations = async (l: Locale): Promise<Navigation[]> => {
+    try {
+        let response = await api<Navigation[]>("navigation", {
+            method: "get",
+            offset: 0,
+            filter: {
+                locale: l.key,
+            },
+        })
+        return response.data
+    } catch (e) {
+        return null
+    }
+}
+
+export const getGalleries = async (galIds: number[], params?: APIParams): Promise<Gallery[]> => {
+    try {
+        let response = await api<Gallery[]>("galleries", {
+            method: "get",
+            offset: 0,
+            params: {
+                sort: "title",
+                ...params,
+            },
+            filter: {
+                _id: { $in: galIds },
+            },
+        })
+
+        return response.data
+    } catch (e) {
+        return null
+    }
+}
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-    import { Router, Route, links } from "svelte-routing"
+    import { Router, Route } from "svelte-routing"
    import { scrollToTop } from "svelte-scrollto"
    import { location } from "../store"
+
+    import Home from "./routes/Home.svelte"
    import Content from "./routes/Content.svelte"

+    import Header from "./widgets/Header.svelte"
+    import Footer from "./widgets/Footer.svelte"
+
    export let url = ""
    if (url) {
        // ssr
@@ -24,23 +29,21 @@
    if (typeof window !== "undefined") console.log("App initialized")
 </script>

-<style lang="less" global>
-    @import "./../css/main.less";
-    h1 {
-        color: red;
-    }
-</style>
+<Header />

-<h1>__PROJECT_TITLE__</h1>
-
-<div use:links>
-    <a href="/test1">1</a>
-    <a href="/test2">2</a>
-    <a href="/test3">3</a>
-    <a href="/test4">4</a>
+<div>
    <Router url="{url}">
+        <Route path="/" let:params>
+            <Home />
+        </Route>
        <Route path="/*path" let:params>
            <Content path="/{params.path}" />
        </Route>
    </Router>
 </div>
+
+<Footer />
+
+<style lang="less" global>
+    @import "./../css/main.less";
+</style>
--- a/src/components/ContentBlocks.svelte
+++ b/src/components/ContentBlocks.svelte
@@ -1,109 +0,0 @@
-<script lang="ts">
-    export let blocks: ContentBlock[]
-    export let imageBase: string
-
-    export let accordeon = false
-
-    let activeAccordeons: {
-        [key: number]: boolean
-    } = {}
-</script>
-
-<style lang="less">
-    .acc_trigger {
-        display: flex;
-        display: -webkit-flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        border-bottom: solid 1px #ccc;
-        padding-bottom: 10px;
-        .icon {
-            display: flex;
-            display: -webkit-flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 30px;
-            transform: rotate(0deg);
-            transition: all 0.3s;
-        }
-        &.active {
-            .icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .hideText {
-        display: none;
-    }
-</style>
-
-{#if blocks?.length}
-    <section class="section_padding">
-        <div class="container">
-            {#each blocks as box, idx}
-                <!-- Teaserbox -->
-                <div class="row center_row">
-                    {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                    {#if box.text || box.title || (box.button_text && box.button_url)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            {#if box.subtitle}
-                                <div class="subline">{box.subtitle}</div>
-                            {/if}
-                            {#if box.title}
-                                {#if accordeon == true}
-                                    <h2
-                                        class="h2_nooffset acc_trigger"
-                                        class:active="{activeAccordeons[idx]}"
-                                        on:click="{() => {
-                                            activeAccordeons[idx] =
-                                                !activeAccordeons[idx]
-                                        }}"
-                                    >
-                                        {box.title}
-                                        <span class="icon">\/</span>
-                                    </h2>
-                                {:else}
-                                    <h2 class="h2_nooffset">{box.title}</h2>
-                                {/if}
-                            {/if}
-                            <div
-                                class="boxText"
-                                class:hideText="{accordeon &&
-                                    box.title &&
-                                    !activeAccordeons[idx]}"
-                            >
-                                {@html box.text}
-                                {#if box.button_text && box.button_url}
-                                    <a
-                                        href="{box.button_url}"
-                                        class="btn btn_blue"
-                                        >{box.button_text}</a
-                                    >
-                                {/if}
-                            </div>
-                        </div>
-                    {/if}
-                    {#if box.images?.length && (box.layout == 2 || box.layout == 4)}
-                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
-                            <img
-                                loading="lazy"
-                                src="{imageBase + box.images[0].file.src}"
-                                alt="{box.images[0].label || ''}"
-                            />
-                        </div>
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    </section>
-{/if}
--- a/src/components/PrototypeArticle.svelte
+++ b/src/components/PrototypeArticle.svelte
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { generalInformation } from "../store"
-    import { apiBaseURL } from "../config"
-
-    export let article: PrototypeArticle
-    export let details: boolean = false
-
-    const a = article.article
-    let cssClasses: string = "p_article"
-
-    cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
-    cssClasses += " " + Object.values(a.layout.margin).join(" ")
-    cssClasses += " " + Object.values(a.layout.padding).join(" ")
-
-    const getImageAlt = (image): string => {
-        if (image.alternateText) {
-            return image.alternateText
-        }
-        if (image.title) {
-            return image.title
-        }
-
-        return a.content.title
-    }
-
-    const getImageSrc = (file) => {
-        const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
-        console.log(url, file)
-        return url
-    }
-</script>
-
-{#if a.general.public}
-    <article class="{cssClasses}">
-        {#if !a.layout.variant || a.layout.variant === "top-left"}
-            {#if a.general.categories}
-                <div class="p_article-categories">
-                    {#each a.general.categories || [] as c}
-                        <span class="p_article-category">{c}</span>
-                    {/each}
-                </div>
-            {/if}
-            {#if a.content.types.contentMedia.mediaFiles}
-                <div class="p_article-images">
-                    {#each a.content.types.contentMedia.mediaFiles || [] as image}
-                        <!-- {JSON.stringify(image)} -->
-                        {#if image?.file?.path}
-                            {getImageSrc(image)}
-                            <!-- <img 
-                                src="{getImageSrc(image?.file)}" 
-                                id="{image?.id ? image?.id : ''}" 
-                                alt="{getImageAlt(image)}"
-                                class="p_article-image"
-                            /> -->
-                        {/if}
-                        {#if image?.caption}
-                            <div class="p_article-image-caption">{image?.caption}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-
-            {#if a.content.title}
-                <div class="p_article-title">{a.content.title}</div>
-            {/if}
-            {#if a.content.subtitle}
-                <div class="p_article-subtitle">{a.content.subtitle}</div>
-            {/if}
-            {#if a.content.types.teaser}
-                <div class="p_article-teaser">
-                    {@html a.content.types.teaser}
-                </div>
-            {/if}
-            {#if details && a.content.types.details}
-                <div class="p_article-details">
-                    {@html a.content.types.details}
-                </div>
-            {/if}
-            {#if a.link.url}
-                <a href="{a.link.url}" target="{a.link.target}">
-                    {a.link.text ? a.link.text : a.link.url}
-                </a>
-            {/if}
-            {#if a.content.types.contentAttachments.attachments}
-                <div class="p_article-attachments">
-                    {#each a.content.types.contentAttachments.attachments || [] as attachment}
-                        <a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
-                            {attachment.title ? attachment.title : attachment.file.path}
-                        </a>
-                    {/each}
-                </div>
-            {/if}
-        {/if}
-    </article>
-{/if}
--- a/src/components/routes/Content.svelte
+++ b/src/components/routes/Content.svelte
@@ -1,7 +1,49 @@
 <script lang="ts">
+    import { getContent } from "../../api"
+    // import { apiBaseURL } from "../../config"
+    import { generalInfo } from "../../store"
+
    export let path: string

-    console.log("Content: ", path)
+    let loading = true
+    let content: Content
+
+    function load() {
+        loading = true
+        getContent(path)
+            .then((c) => {
+                content = c
+            })
+            .finally(() => {
+                loading = false
+            })
+    }
+
+    $: if (path) load()
 </script>

-<h2>{path}</h2>
+<svelte:head>
+    <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            {#if loading}
+                <!-- Loader -->
+            {:else if content}
+                {#each content.blocks || [] as b}
+                    <h2>{b.title}</h2>
+                    <div>{@html b.text}</div>
+                {/each}
+            {:else}
+                <h1>Seite nicht gefunden</h1>
+                <div>Pfad: {path}</div>
+            {/if}
+        </div>
+    </div>
+</div>
--- a/src/components/routes/Home.svelte
+++ b/src/components/routes/Home.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+
+    import { generalInfo } from "../../store"
+
+    import GoogleMaps from "../widgets/GoogleMaps.svelte"
+    import ScrollTo from "../widgets/ScrollTo.svelte"
+    import ContactForm from "../widgets/ContactForm.svelte"
+
+    let expandedForm: string = "recipe"
+</script>
+
+<svelte:head>
+    <title>{$generalInfo?.meta?.metaTitle}</title>
+    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+</svelte:head>
+
+<section class="contact">
+    <div class="container">
+        <div class="row nospace">
+            <div class="col-md-6">
+                <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
+            </div>
+            <div class="col-md-6">
+                <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
+            </div>
+        </div>
+    </div>
+</section>
+
+<section>
+    <GoogleMaps />
+</section>
+
+<ScrollTo
+    on:scrollTo="{(e) => {
+        expandedForm = null
+        animateScroll.scrollTo({
+            delay: 100,
+            element: '#' + e.detail.element,
+            offset: -200,
+            onDone: () => {
+                expandedForm = e.detail.element
+            },
+        })
+    }}"
+/>
--- a/src/components/routes/PrototypeArticles.svelte
+++ b/src/components/routes/PrototypeArticles.svelte
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { getPrototypeArticles } from "../../api"
-
-    import Sidebar from "../page/Sidebar.svelte"
-    import PrototypeArticle from "../page/PrototypeArticle.svelte"
-
-    let articles: PrototypeArticle[] | []
-
-    const getArticles = async () => {
-        articles = await getPrototypeArticles()
-    }
-    getArticles()
-    
-</script>
-
-<div class="container">
-    <div class="row">
-        <div class="col-md-10">
-            
-            <div>
-                {#each articles || [] as article}
-                    <PrototypeArticle article="{article}" />
-                {/each}
-            </div>
-
-        </div>
-        <div class="col-md-2">
-            <Sidebar />
-        </div>
-    </div>
-</div>
--- a/src/components/widgets/Article.svelte
+++ b/src/components/widgets/Article.svelte
--- a/src/components/widgets/ContactForm.svelte
+++ b/src/components/widgets/ContactForm.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+    import { fade } from "svelte/transition"
+    import { mdiCheck, mdiChevronDown } from "@mdi/js"
+    import Icon from "mdi-svelte"
+
+    import { sendEmail } from "../../api"
+
+    export let type: string
+    export let collapsed: boolean = false
+
+    let formData: {
+        name: string
+        email: string
+        subject: string
+        message: string
+        privacy: boolean
+    } = {
+        name: null,
+        email: null,
+        subject: null,
+        message: null,
+        privacy: false,
+    }
+    let requestSucessfully: boolean = false
+    let requestPending: boolean = false
+
+    const submit = () => {
+        if (
+            formData["name"] &&
+            formData["email"] &&
+            formData["subject"] &&
+            formData["message"] &&
+            formData["privacy"]
+        ) {
+            requestPending = true
+            sendEmail(type + "Form", formData)
+                .then(() => {
+                    resetForm()
+                    requestSucessfully = true
+                    requestPending = false
+
+                    setTimeout(() => {
+                        requestSucessfully = false
+                    }, 10000)
+                })
+                .catch((e) => {
+                    console.error(e)
+                    requestPending = false
+                })
+                .finally(() => {
+                    requestPending = false
+                })
+        }
+    }
+
+    const resetForm = () => {
+        formData = {
+            name: null,
+            email: null,
+            subject: null,
+            message: null,
+            privacy: false,
+        }
+    }
+
+    $: isValid =
+        formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
+</script>
+
+<div id="{type}">
+    <form on:submit|preventDefault="{submit}" class="mt-lg">
+        <div class="layout justify-content-space-between layout-gap-md">
+            <div class="hidden-sm icon {type}">
+                <!-- <img src="img/icon/{type}.svg" alt="" /> -->
+            </div>
+            <div class="titles" on:click="{() => (collapsed = !collapsed)}">
+                <h3 class="title">
+                    {type === "contact" ? "Kontakt" : ""}
+                    {type === "recipe" ? "Rezeptanfrage" : ""}
+                </h3>
+                <h4 class="subTitle">
+                    {type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
+                    {type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
+                </h4>
+            </div>
+            <div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
+                <Icon path="{mdiChevronDown}" size="2" />
+            </div>
+        </div>
+        {#if !collapsed}
+            <div>
+                <div class="row">
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['name']}"
+                            placeholder="Name"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                    <div class="col-md-6 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['email']}"
+                            placeholder="E-Mail Adresse"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <input
+                            type="text"
+                            bind:value="{formData['subject']}"
+                            placeholder="Betreff"
+                            readonly="{requestPending}"
+                        />
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
+                    </div>
+                </div>
+                <div class="row nospace">
+                    <div class="col-md-12 mt-sm">
+                        <div class="layout layout-gap-md align-items-center">
+                            <div
+                                class="checkbox"
+                                on:click="{() => {
+                                    formData.privacy = !formData.privacy
+                                }}"
+                            >
+                                {#if formData.privacy}
+                                    <div class="icon">
+                                        <Icon path="{mdiCheck}" size="2" />
+                                    </div>
+                                {/if}
+                            </div>
+                            <div on:click="{() => (formData.privacy = !formData.privacy)}">
+                                <a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {#if requestSucessfully}
+                    <div class="mt-sm" transition:fade>
+                        <div>
+                            <strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
+                        </div>
+                        <p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
+                    </div>
+                {/if}
+                <div class="layout justify-content-end mt-sm">
+                    <button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
+                </div>
+            </div>
+        {/if}
+    </form>
+</div>
--- a/src/components/widgets/ContactInformation.svelte
+++ b/src/components/widgets/ContactInformation.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+</script>
+
+<div class="contact-information" id="contact-information">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">...</div>
+        </div>
+    </div>
+</div>
--- a/src/components/widgets/Footer.svelte
+++ b/src/components/widgets/Footer.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+</script>
+
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <Navigation ident="footer" />
+            </div>
+        </div>
+        {#if $generalInfo?.copyrightText}
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="copyright">
+                        {$generalInfo?.copyrightText}
+                    </div>
+                </div>
+            </div>
+        {/if}
+    </div>
+</footer>
--- a/src/components/widgets/Galleries.svelte
+++ b/src/components/widgets/Galleries.svelte
@@ -64,13 +64,9 @@
    {#each galleries || [] as gallery}
        <div class="gallery gallery-{gallery.variant}">
            {#each gallery.items || [] as image, index}
-                <div
-                    class="gallery-item"
-                    on:click="{() => showDetails(gallery, image)}"
-                >
+                <div class="gallery-item" on:click="{() => showDetails(gallery, image)}">
                    <img
-                        src="{apiBaseURL}galleries/{gallery.id}/{image.file
-                            .src}?filter=s"
+                        src="{apiBaseURL}galleries/{gallery.id}/{image.file.src}?filter=s"
                        alt="{image.alt ? image.alt : image.title}"
                    />
                    {#if gallery.variant === "simple-with-title"}
@@ -87,11 +83,8 @@
        <Modal show="{selectedGallery && selectedImage}">
            <div transition:fade class="gallery-image-details">
                <img
-                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
-                        .file.src}?filter=l"
-                    alt="{selectedImage.alt
-                        ? selectedImage.alt
-                        : selectedImage.title}"
+                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage.file.src}?filter=l"
+                    alt="{selectedImage.alt ? selectedImage.alt : selectedImage.title}"
                    on:click="{closeDetails}"
                />
                <div class="gallery-info">
--- a/src/components/widgets/GoogleMaps.svelte
+++ b/src/components/widgets/GoogleMaps.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { generalInfo, ccTags } from "../../store"
+
+    $: iframeTitle =
+        $generalInfo?.person?.salutation +
+        " " +
+        $generalInfo?.person?.firstname +
+        " " +
+        $generalInfo?.person?.lastname +
+        " - " +
+        $generalInfo?.person?.additional
+</script>
+
+{#if $ccTags?.includes("googleMaps")}
+    <iframe
+        id="googleMaps"
+        title="{iframeTitle}"
+        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1342.4197187151062!2d10.4164909278422!3d50.56856037791808!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a509772539d6c1b!2sDr.%20med.%20Christine%20Wedekind!5e0!3m2!1sde!2sde!4v1652861335963!5m2!1sde!2sde"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"></iframe>
+{/if}
--- a/src/components/widgets/Header.svelte
+++ b/src/components/widgets/Header.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { link } from "svelte-routing"
+
+    import { generalInfo } from "../../store"
+
+    import Navigation from "./Navigation.svelte"
+    import Image from "./Image.svelte"
+</script>
+
+<header>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="header-content">
+                    <a href="/" use:link>
+                        <Image
+                            file="{$generalInfo?.media?.brand}"
+                            alt="{$generalInfo?.meta?.metaTitle}"
+                            cssClass="brand"
+                        />
+                    </a>
+
+                    <div class="header-content-right">
+                        <Navigation />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
--- a/src/components/widgets/Image.svelte
+++ b/src/components/widgets/Image.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let file: File = null
+    export let alt: string = ""
+    export let cssClass: string = ""
+</script>
+
+{#if file}
+    <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
+{/if}
--- a/src/components/widgets/Modal.svelte
+++ b/src/components/widgets/Modal.svelte
--- a/src/components/widgets/Navigation.svelte
+++ b/src/components/widgets/Navigation.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import * as animateScroll from "svelte-scrollto"
+    import Icon from "mdi-svelte"
+    import { mdiMenu } from "@mdi/js"
+    // import { generalInfo } from "../../store"
+
+    import { links } from "svelte-routing"
+    import { navigations } from "../../store"
+
+    export let ident = "main"
+
+    let navigation: Navigation
+    let showMobileNav: boolean = false
+
+    $: {
+        $navigations?.map((nav) => {
+            if (nav.ident === ident) {
+                navigation = nav
+            }
+        })
+    }
+</script>
+
+{#if navigation}
+    <nav class="{ident}" use:links>
+        {#each navigation?.items || [] as item}
+            {#if item.settings.url.url}
+                <a
+                    href="{item.settings.url.url}"
+                    target="{item.settings.url.target}"
+                    on:click="{() => {
+                        animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                        showMobileNav = false
+                    }}"
+                >
+                    {item.settings.title}
+                </a>
+            {:else}
+                <a href="{item.settings.page}">
+                    {item.settings.title}
+                </a>
+            {/if}
+        {/each}
+    </nav>
+
+    {#if ident === "main"}
+        <div class="nav-mobile-toggle" on:click="{() => (showMobileNav = !showMobileNav)}">
+            <Icon path="{mdiMenu}" size="2" />
+        </div>
+
+        <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
+            <!-- <img src="img/body-image-left.svg" alt="" class="bg-image" /> -->
+
+            {#each navigation?.items || [] as item}
+                {#if item.settings.url.url}
+                    <div class="nav-item">
+                        <a
+                            href="{item.settings.url.url}"
+                            target="{item.settings.url.target}"
+                            on:click="{() => {
+                                animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
+                                showMobileNav = false
+                            }}"
+                        >
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {:else}
+                    <div class="nav-item">
+                        <a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}">
+                            {item.settings.title}
+                        </a>
+                    </div>
+                {/if}
+            {/each}
+        </nav>
+    {/if}
+{/if}
--- a/src/components/widgets/News.svelte
+++ b/src/components/widgets/News.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { news } from "../../store"
+
+    const getNewsDate = (news) => {
+        const from = news?.from ? new Date(news?.from) : null
+        const until = news?.until ? new Date(news?.until) : null
+        const options = { year: "numeric", month: "2-digit", day: "2-digit" }
+        let d = ""
+        if (from) {
+            // @ts-ignore
+            d += from.toLocaleDateString("de-DE", options)
+        }
+        if (until) {
+            // @ts-ignore
+            d += " bis " + until.toLocaleDateString("de-DE", options)
+        }
+
+        if (news.title) {
+            d += " - "
+        }
+        return d
+    }
+</script>
+
+{#if $news?.length}
+    <section class="news" id="news">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>Neuigkeiten</h2>
+                </div>
+            </div>
+            <div class="row">
+                {#each $news as n}
+                    {#if n.title || n.from || n.until}
+                        <div class="col-md-6">
+                            <article>
+                                <div class="title">
+                                    {getNewsDate(n)}
+                                    {#if n.title}
+                                        {@html n.title}
+                                    {/if}
+                                </div>
+                                {#if n.content}
+                                    <div class="content">
+                                        {@html n.content}
+                                    </div>
+                                {/if}
+                            </article>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    </section>
+{/if}
--- a/src/components/widgets/PromotionImage.svelte
+++ b/src/components/widgets/PromotionImage.svelte
@@ -0,0 +1,74 @@
+<svg
+    class="promotion-image-wave-top"
+    width="1920"
+    height="70"
+    viewBox="0 0 1920 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m1920 70-80-12c-80-12-240-36-400-42s-320 6-480 18-320 24-480 18S160 22 80 10L0-2v-108h1920V70z"
+        fill="#fff"></path>
+</svg>
+
+<!-- <img src="img/promotion/promotion-image.png" alt="" class="promotion-image" /> -->
+
+<svg class="promotion-image-wave-bottom" viewBox="0 0 1920 137" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#plkj8d2oga)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#iwnto70uxb)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
+        fill="url(#aco1fmuv9c)"></path>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 121.708 80 108.7c80-6.008 240-48.024 400-36.008 160 12.016 320 48.065 480 42.057 160-6.009 320-94.073 480-100.081 160-6.009 320 30.04 400 48.064l80 18.025V141H0v-19.292z"
+        fill="#fff"></path>
+    <defs>
+        <radialGradient
+            id="plkj8d2oga"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(960 0 0 41.5089 960 95.491)"
+        >
+            <stop stop-color="#FFFEFF"></stop>
+            <stop offset="1" stop-color="#D7FFFE"></stop>
+        </radialGradient>
+        <radialGradient
+            id="iwnto70uxb"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(-652.99956 -34.96514 36.02623 -672.81617 1033.5 102.034)"
+        >
+            <stop stop-color="#BCFFFD"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+        <radialGradient
+            id="aco1fmuv9c"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="rotate(8.473 63.69 3351.307) scale(825.005 723.955)"
+        >
+            <stop stop-color="#fff"></stop>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
+        </radialGradient>
+    </defs>
+</svg>
--- a/src/components/widgets/ScrollTo.svelte
+++ b/src/components/widgets/ScrollTo.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+
+    const dispatch = createEventDispatcher()
+</script>
+
+<div class="scroll-to-top">
+    <div class="circle-email">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'contact',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/contact.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-contact">
+        <a
+            href="/#"
+            on:click="{() => {
+                dispatch('scrollTo', {
+                    element: 'recipe',
+                })
+            }}"
+        >
+            <!-- <img src="img/icon/recipe.svg" alt="" /> -->
+        </a>
+    </div>
+    <div class="circle-top">
+        <a href="/#">
+            <!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
+        </a>
+    </div>
+</div>
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -1,3 +1 @@
-body {
-    background-color: #eee;
-}
+@import "theme-2022/main";
--- a/src/css/prototype-article.less
+++ b/src/css/prototype-article.less
@@ -1,5 +0,0 @@
-.p_article {
-    font-size: 14px;
-    border: 1px solid #000;
-    padding: 20px;
-}
--- a/src/css/theme-2022/components/article.less
+++ b/src/css/theme-2022/components/article.less
--- a/src/css/theme-2022/components/audio.less
+++ b/src/css/theme-2022/components/audio.less
--- a/src/css/theme-2022/components/carousel.less
+++ b/src/css/theme-2022/components/carousel.less
--- a/src/css/theme-2022/components/cc-bar.less
+++ b/src/css/theme-2022/components/cc-bar.less
--- a/src/css/theme-2022/components/contact-information.less
+++ b/src/css/theme-2022/components/contact-information.less
@@ -0,0 +1,59 @@
+.contact-information {
+    margin-top: -120px;
+    min-height: 1060px;
+    background: url("../css/theme-2022/components/img/union.svg") top no-repeat;
+    background-size: cover;
+
+    & > .container {
+        padding-top: 10rem;
+    }
+
+    .appointmentOfficeHour {
+        @media (max-width: 768px) {
+            font-size: 0.87em;
+            margin-bottom: @space-sm;
+        }
+
+        strong {
+            display: inline-block;
+            min-width: 120px;
+        }
+    }
+
+    .meeting-information {
+        margin-top: @space-xl;
+    }
+
+    ul {
+        list-style-type: none;
+        padding-left: 40px;
+        width: 100%;
+
+        li {
+            line-height: 30px;
+            padding-left: 0px;
+            font-weight: 400;
+            width: 50%;
+            display: inline-block;
+
+            @media (max-width: 768px) {
+                width: 100%;
+            }
+
+            &:before {
+                content: url("../css/theme-2022/components/img/check-bold.svg");
+                font-weight: 400;
+                top: 1px;
+                left: -30px;
+            }
+        }
+    }
+
+    @media (max-width: 1050px) {
+        padding-bottom: 10rem;
+    }
+
+    @media (max-width: 768px) {
+        margin-bottom: -90px;
+    }
+}
--- a/src/css/theme-2022/components/content.less
+++ b/src/css/theme-2022/components/content.less
--- a/src/css/theme-2022/components/event.less
+++ b/src/css/theme-2022/components/event.less
--- a/src/css/theme-2022/components/footer.less
+++ b/src/css/theme-2022/components/footer.less
@@ -0,0 +1,23 @@
+footer {
+    min-height: 70px;
+    margin-top: @space-md;
+
+    .copyright {
+        text-align: center;
+        margin: @space-md 0;
+    }
+
+    nav.footer {
+        display: flex;
+        justify-content: center;
+        gap: @space-md;
+
+        a {
+            color: @on-background;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
--- a/src/css/theme-2022/components/forms.less
+++ b/src/css/theme-2022/components/forms.less
@@ -0,0 +1,139 @@
+form {
+    background: @surface;
+    color: @on-surface;
+    padding: @space-md;
+    border-radius: 10px;
+    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+
+    strong {
+        color: @secondary;
+        font-weight: 700;
+    }
+
+    .titles {
+        flex-grow: 1;
+
+        .title,
+        .subTitle {
+            text-align: left;
+            color: @on-surface;
+            margin: 0;
+        }
+    }
+
+    .icon {
+        width: 80px;
+        height: 80px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        border-radius: 100%;
+
+        &.contact {
+            background-color: @secondary-light-green;
+        }
+        &.recipe {
+            background-color: @secondary-light;
+        }
+
+        img {
+            width: 50%;
+        }
+    }
+
+    .collapse-icon {
+        cursor: pointer;
+
+        svg {
+            transition: @transition-default;
+        }
+
+        &.collapsed svg {
+            transform: rotate(-90deg);
+        }
+    }
+
+    input,
+    textarea,
+    .checkbox {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        background: @surface;
+        color: @on-background;
+        padding: @space-sm @space-md;
+        width: 100%;
+        max-width: 100%;
+        transition: all 0.2s ease-in-out;
+        outline: none;
+
+        ::placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+        :-ms-input-placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+        ::-ms-input-placeholder {
+            color: @on-surface;
+            font-weight: 400;
+        }
+
+        &:focus {
+            border: 1px solid @secondary;
+            color: @primary;
+        }
+
+        &[readonly] {
+            opacity: 0.5;
+        }
+    }
+
+    .checkbox {
+        padding: 0;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: @secondary;
+
+        &:hover {
+            box-shadow: inset 0 0 10px 0 @secondary;
+        }
+    }
+
+    textarea {
+        height: 200px;
+    }
+
+    button {
+        width: 100%;
+        background: @secondary;
+        color: @on-secondary;
+        padding: @space-xs @space-md;
+        border-radius: 10px;
+        border: 1px solid transparent;
+        transition: @transition-default;
+        font-weight: 700;
+        cursor: pointer;
+
+        &:hover {
+            border-color: @on-secondary;
+            background-color: @primary;
+            color: @on-primary;
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+    }
+
+    .error {
+        background: @error;
+        color: @on-error;
+        padding: @space-md;
+    }
+}
--- a/src/css/theme-2022/components/general.less
+++ b/src/css/theme-2022/components/general.less
@@ -0,0 +1,108 @@
+html,
+body {
+    background: @background;
+    color: @on-background;
+    font-size: @font-size-default;
+    font-weight: @font-weight-default;
+    line-height: @font-line-height-default;
+    font-family: "Montserrat", sans-serif;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    overflow-x: hidden;
+    padding: @header-height + 60px 0 0 0;
+
+    @media (max-width: 768px) {
+        padding: @header-height-max-768 0 0 0;
+    }
+}
+
+// Body Images
+
+.body-image-left {
+    position: absolute;
+    left: 0;
+    top: 80rem;
+
+    @media (max-width: 900px) {
+        top: 90rem;
+    }
+}
+
+// Lists
+
+ul {
+    list-style-type: none;
+    padding-left: 15px;
+
+    li {
+        line-height: 30px;
+        padding-left: 0;
+        font-weight: 700;
+
+        &:before {
+            content: "\203A";
+            font-weight: 700;
+            position: absolute;
+            top: -1px;
+            left: -12px;
+        }
+    }
+}
+
+// Scroll To Top
+
+.scroll-to-top {
+    position: fixed;
+    z-index: 9999;
+    right: 5rem;
+    bottom: 5rem;
+
+    @media (max-width: 768px) {
+        right: 4rem;
+        bottom: 1rem;
+    }
+
+    .circle-top,
+    .circle-email,
+    .circle-contact {
+        width: 80px;
+        height: 80px;
+        border-radius: 100%;
+        background-color: @secondary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    }
+
+    .circle-email {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light;
+        position: absolute;
+        top: -20px;
+        right: -39px;
+    }
+
+    .circle-contact {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light-green;
+        position: absolute;
+        top: 23px;
+        right: -53px;
+    }
+}
+
+// Promotion
+
+.promotion-image-wave-top {
+    height: 70px;
+}
+
+.promotion-image-wave-bottom {
+    height: 137px;
+}
--- a/src/css/theme-2022/components/grid.less
+++ b/src/css/theme-2022/components/grid.less
@@ -2,7 +2,7 @@

@container_width: 1200px;
@columns: 12;
-@main_padding: 15px;
+@main_padding: 20px;

 // Grid

@@ -23,8 +23,8 @@
    @media (min-width: 992px) {
        width: 960px;
    }
-    @media (min-width: 1200px) {
-        width: 1140px;
+    @media (min-width: 1240px) {
+        width: 1200px;
    }
    @media (min-width: 1400px) {
        width: 1320px;
@@ -67,6 +67,10 @@
            justify-content: flex-end;
        }
    }
+
+    & ~ .row:not(.nospace) {
+        margin-top: @space-lg;
+    }
 }

 each(range(@columns), {
--- a/src/css/theme-2022/components/header.less
+++ b/src/css/theme-2022/components/header.less
@@ -0,0 +1,162 @@
+header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    transition: all 1s ease-in-out;
+    height: @header-height;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 9999;
+
+    @media (max-width: 992px) {
+        background-color: @surface;
+    }
+
+    @media (max-width: 768px) {
+        height: @header-height-max-768;
+    }
+
+    .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .header-content-right {
+            text-align: right;
+        }
+    }
+
+    .brand {
+        display: block;
+        margin: @space-md 0;
+
+        @media (max-width: 992px) {
+            width: 80%;
+        }
+    }
+
+    .tel-box {
+        display: inline-flex;
+        align-items: center;
+        gap: @space-sm;
+        background: @secondary;
+        color: @on-secondary;
+        font-weight: 700;
+        border-radius: 50px;
+        height: 40px;
+        padding-right: @space-md;
+        margin: @space-md 0 0 auto;
+        text-decoration: none;
+        white-space: nowrap;
+
+        .icon {
+            background: @secondary-light;
+            width: 40px;
+            height: 40px;
+            border-radius: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        @media (max-width: 992px) {
+            & {
+                display: none;
+            }
+            &.mobile {
+                display: inline-flex;
+                justify-content: center;
+            }
+        }
+    }
+
+    nav {
+        list-style-type: none;
+        margin-top: @space-md;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 992px) {
+            display: none;
+        }
+
+        & > * {
+            text-decoration: none;
+            color: @primary;
+            transition: @transition-default;
+            font-weight: 500;
+
+            &:hover {
+                color: @on-background;
+            }
+        }
+    }
+
+    .nav-mobile-toggle {
+        display: none;
+        cursor: pointer;
+        margin: @space-md 0 0 auto;
+
+        @media (max-width: 992px) {
+            display: block;
+        }
+    }
+
+    nav.main-mobile {
+        display: none;
+        position: fixed;
+        top: @header-height;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: @surface;
+        z-index: 9999;
+        margin: 0;
+        overflow-y: auto;
+
+        @media (max-width: 768px) {
+            top: @header-height-max-768;
+        }
+
+        &.show {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .bg-image {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        .nav-item {
+            align-self: center;
+            display: block;
+            text-align: center;
+            color: @primary;
+            font-size: 18px;
+            font-weight: 700;
+
+            a {
+                transition: @transition-default;
+                padding: @space-xs;
+
+                &:hover {
+                    color: @secondary;
+                }
+
+                &.tel-box {
+                    padding: 0 @space-md 0 0;
+                    margin-bottom: @space-md;
+                    color: @primary;
+                }
+            }
+        }
+    }
+}
--- a/src/css/theme-2022/components/history.less
+++ b/src/css/theme-2022/components/history.less
@@ -0,0 +1,50 @@
+.history {
+    font-size: 24px;
+    font-weight: 700;
+
+    .history-item {
+        min-height: 80px;
+
+        .date {
+            width: 80px;
+            height: 80px;
+            border-radius: 100%;
+            background-color: @secondary;
+            color: @on-secondary;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            position: absolute;
+            top: -21px;
+            left: calc(50% - 40px);
+        }
+        .text {
+            width: 41%;
+        }
+
+        &:nth-child(odd) {
+            .text {
+                margin-left: auto;
+            }
+        }
+
+        & ~ .history-item {
+            margin-top: @space-md;
+        }
+
+        @media (max-width: 900px) {
+            .date {
+                left: 0;
+            }
+            &:nth-child(odd),
+            &:nth-child(even) {
+                .text {
+                    width: 100%;
+                    padding-left: 100px;
+                    font-size: 0.7em;
+                }
+            }
+        }
+    }
+}
--- a/src/css/theme-2022/components/iframes.less
+++ b/src/css/theme-2022/components/iframes.less
@@ -0,0 +1,9 @@
+iframe {
+    width: 100%;
+    max-width: 100%;
+    border: 0;
+
+    &#googleMaps {
+        height: 720px;
+    }
+}
--- a/src/css/theme-2022/components/img/check-bold.svg
+++ b/src/css/theme-2022/components/img/check-bold.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m9 20.92-6.21-6.21 2.83-2.83L9 15.27l9.88-9.89 2.83 2.83L9 20.92z" fill="#72EFDD"/>
+</svg>
--- a/src/css/theme-2022/components/img/list-arrow-right.png
+++ b/src/css/theme-2022/components/img/list-arrow-right.png
--- a/src/css/theme-2022/components/img/top-bg.svg
+++ b/src/css/theme-2022/components/img/top-bg.svg
@@ -0,0 +1,39 @@
+<svg width="1920" height="1003" viewBox="0 0 1920 1003" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity=".5" clip-rule="evenodd">
+        <path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#s8guwl92ja)"/>
+        <path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#d44dn5xirb)"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#dzvpq96n6c)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#qmmqrfmedd)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#m8la3ielte)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#eyw4yzjlhf)"/>
+        <g opacity=".7" stroke="#72EFDD" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.3 0.3">
+        <path opacity=".7" d="m1135.97 730.546 423.2-439.715M1139.36 766.411l449.79-468.108M1152.96 791.375l462.52-481.691M1172.07 810.457l472.86-492.746M1186.97 834.023l487.67-508.552M1204.48 854.829l501.7-523.534M1221.84 875.77l508.48-530.757M1239.24 896.672l520.62-543.709M1257.19 917l526.69-550.204M1273.01 939.569l530.9-554.668M1290.99 959.877l535.48-559.572M1310.07 978.979l538.63-562.925M1326.14 1001.32l519.61-542.638"/>
+    </g>
+    <defs>
+        <radialGradient id="s8guwl92ja" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 495)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="d44dn5xirb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 550.678 196.962) scale(675.018 3192.21)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="dzvpq96n6c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 466)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="qmmqrfmedd" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 548.81 182.462) scale(675.018 3192.21)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="m8la3ielte" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.00191 594.50235 -1703.6414 2338.38377 494.5 132)">
+            <stop stop-color="#fff"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <linearGradient id="eyw4yzjlhf" x1="960" y1="-1" x2="960" y2="669" gradientUnits="userSpaceOnUse">
+            <stop offset=".083" stop-color="#fff"/>
+            <stop offset=".333" stop-color="#fff" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>
--- a/src/css/theme-2022/components/img/union.svg
+++ b/src/css/theme-2022/components/img/union.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 1920 1060" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#9fz5hy4h1a)"/>
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#e1z5hwatsb)"/>
+    <path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#nign7co5vc)"/>
+    <defs>
+        <radialGradient id="9fz5hy4h1a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 212.392 960 488.607)">
+            <stop stop-color="#FFFEFF"/>
+            <stop offset="1" stop-color="#D7FFFE"/>
+        </radialGradient>
+        <radialGradient id="e1z5hwatsb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-653.00038 -178.91022 879.8803 -3211.45532 1033.5 522.084)">
+            <stop stop-color="#BCFFFD"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="nign7co5vc" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.0031 622.01048 -1805.66361 2368.81393 494.5 139.154)">
+            <stop stop-color="#fff"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </radialGradient>
+    </defs>
+</svg>
--- a/src/css/theme-2022/components/layout.less
+++ b/src/css/theme-2022/components/layout.less
@@ -1,8 +1,8 @@
-@space-xs: 0.25rem;
-@space-sm: 0.5rem;
-@space-md: 1rem;
-@space-lg: 2rem;
-@space-xl: 3rem;
+@space-xs: 0.6rem;
+@space-sm: 1rem;
+@space-md: 1.6rem;
+@space-lg: 2.5rem;
+@space-xl: 4rem;

 .layout {
    display: flex;
--- a/src/css/theme-2022/components/navigation.less
+++ b/src/css/theme-2022/components/navigation.less
--- a/src/css/theme-2022/components/news.less
+++ b/src/css/theme-2022/components/news.less
@@ -0,0 +1,19 @@
+.news {
+    article {
+        background: @surface;
+        color: @on-surface;
+        padding: @space-sm @space-md;
+        border-radius: 10px;
+        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: @space-lg;
+
+        @media (max-width: 768px) {
+            text-align: center;
+        }
+
+        .title {
+            font-weight: 700;
+            margin-bottom: @space-xs;
+        }
+    }
+}
--- a/src/css/theme-2022/components/promotion-image.less
+++ b/src/css/theme-2022/components/promotion-image.less
@@ -0,0 +1,12 @@
+.promotion-image-wave-top,
+.promotion-image-wave-bottom {
+    z-index: 2;
+    width: 100%;
+}
+
+.promotion-image {
+    z-index: 0;
+    margin-top: -56px;
+    margin-bottom: -68px;
+    width: 100%;
+}
--- a/src/css/theme-2022/components/section.less
+++ b/src/css/theme-2022/components/section.less
@@ -0,0 +1,7 @@
+section,
+.section {
+    & ~ section,
+    & ~ .section {
+        margin-top: 4rem;
+    }
+}
--- a/src/css/theme-2022/components/services.less
+++ b/src/css/theme-2022/components/services.less
@@ -0,0 +1,52 @@
+.services {
+    article {
+        font-weight: 700;
+        display: flex;
+        align-items: flex-start;
+        gap: @space-sm;
+        margin-bottom: @space-xs;
+        padding: @space-sm @space-md;
+        border-radius: 10px;
+        cursor: pointer;
+
+        &:hover {
+            background: @surface;
+            color: @on-surface;
+            box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 100%;
+            background-color: @secondary-light;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+
+            img {
+                height: 32px;
+                margin-top: 2px;
+            }
+        }
+
+        .title {
+            font-size: 24px;
+            font-weight: 700;
+
+            @media (max-width: 768px) {
+                font-size: 20px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            padding: 0;
+
+            &:hover {
+                background: transparent;
+                box-shadow: none;
+            }
+        }
+    }
+}
--- a/src/css/theme-2022/components/sidebar.less
+++ b/src/css/theme-2022/components/sidebar.less
--- a/src/css/theme-2022/components/specials.less
+++ b/src/css/theme-2022/components/specials.less
@@ -0,0 +1,79 @@
+.specials {
+    article {
+        background: @surface;
+        color: @on-surface;
+        padding: @space-md;
+        border-radius: 10px;
+        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: @space-lg;
+        font-weight: 700;
+
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .icon {
+            width: 80px;
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+
+            @media (max-width: 768px) {
+                width: 50px;
+                height: 50px;
+            }
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .title {
+            margin-bottom: @space-xs;
+            font-size: 24px;
+            line-height: 1.3;
+
+            @media (max-width: 768px) {
+                font-size: 20px;
+            }
+        }
+
+        &.hovered {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+                position: fixed;
+                top: 40%;
+                left: 30%;
+                right: 30%;
+                z-index: 999;
+                box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+                background: linear-gradient(
+                        90deg,
+                        rgba(238, 254, 255, 1) 0%,
+                        rgba(255, 254, 255, 1) 35%,
+                        rgba(215, 255, 254, 1) 100%
+                    ),
+                    radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
+                    radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%);
+            }
+        }
+    }
+
+    .row:nth-child(2) > *:nth-child(2) > article:first-child {
+        margin-top: @space-xl;
+
+        @media (max-width: 1050px) {
+            margin-top: 0;
+        }
+    }
+}
--- a/src/css/theme-2022/components/top-section.less
+++ b/src/css/theme-2022/components/top-section.less
@@ -0,0 +1,50 @@
+.top-section {
+    height: 1003px;
+    margin-bottom: -28rem;
+
+    @media (max-width: 1050px) {
+        margin-bottom: 0rem;
+    }
+
+    .text {
+        margin-top: @space-xl;
+
+        strong {
+            color: @secondary;
+        }
+    }
+
+    .top-section-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+
+        @media (max-width: 768px) {
+            height: 64rem;
+            object-fit: cover;
+        }
+    }
+
+    .circles {
+        position: absolute;
+        top: -151px;
+        left: -97px;
+        min-width: 986px;
+
+        @media (max-width: 1049px) {
+            top: -151px;
+            left: -97px;
+        }
+    }
+    .circles-image {
+        position: absolute;
+        top: 0;
+        left: 70px;
+        min-width: 550px;
+
+        @media (max-width: 1240px) {
+            min-width: 652px;
+        }
+    }
+}
--- a/src/css/theme-2022/components/typo.less
+++ b/src/css/theme-2022/components/typo.less
@@ -0,0 +1,51 @@
+// Headlines
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: @primary;
+    font-weight: 700;
+
+    @media (max-width: 768px) {
+        text-align: center;
+    }
+}
+
+h1 {
+    font-size: 48px;
+    margin-bottom: @space-md;
+    line-height: @space-xl;
+
+    @media (max-width: 768px) {
+        font-size: 32px;
+    }
+}
+
+h2 {
+    font-size: 48px;
+    margin-bottom: @space-md;
+    line-height: @space-xl;
+
+    @media (max-width: 768px) {
+        font-size: 28px;
+    }
+}
+
+h3 {
+    font-size: 24px;
+    margin-bottom: @space-sm;
+
+    @media (max-width: 768px) {
+        font-size: 18px;
+    }
+}
+
+// Link
+
+a {
+    text-decoration: none;
+    color: @on-background;
+}
--- a/src/css/theme-2022/fonts.less
+++ b/src/css/theme-2022/fonts.less
--- a/src/css/theme-2022/main.less
+++ b/src/css/theme-2022/main.less
@@ -0,0 +1,57 @@
+// Variables
+
+@background: #fff;
+@on-background: #575756;
+
+@primary: #2d8e91;
+@on-primary: #fff;
+
+@secondary: #72efdd;
+@on-secondary: #2d8e91;
+@secondary-light: #dafbf7;
+@on-secondary-light: @on-secondary;
+@secondary-light-green: #e2fbf0;
+@on-secondary-light-green: @on-secondary;
+
+@surface: #fff;
+@on-surface: #575756;
+
+@error: #fff0e9;
+@on-error: #eb5757;
+
+@font-size-default: 16px;
+@font-weight-default: 400;
+@font-line-height-default: 1.6;
+
+@radius-default: 50px;
+
+@transition-default: all 0.2s ease-in-out;
+
+// Header
+
+@header-height: 140px;
+@header-height-max-768: 100px;
+
+// CSS Definitions
+
+@import "fonts";
+@import "reset";
+
+@import "components/general";
+@import "components/grid";
+@import "components/typo";
+@import "components/layout";
+@import "components/section";
+@import "components/header";
+@import "components/footer";
+@import "components/news";
+@import "components/services";
+@import "components/specials";
+@import "components/iframes";
+@import "components/contact-information";
+@import "components/promotion-image";
+@import "components/history";
+@import "components/top-section";
+@import "components/forms";
+
+@import "components/cc-bar";
--- a/src/css/theme-2022/reset.less
+++ b/src/css/theme-2022/reset.less
--- a/src/css/theme/components/appointment.less
+++ b/src/css/theme/components/appointment.less
@@ -1,8 +0,0 @@
-.appointment {
-    background: @secondary;
-    color: @on-secondary;
-    border-radius: 50px;
-    font-size: 18px;
-    text-align: center;
-    padding: @space-xs @space-sm;
-}
--- a/src/css/theme/components/footer.less
+++ b/src/css/theme/components/footer.less
@@ -1,14 +0,0 @@
-footer {
-    padding: 20px 0;
-    color: @secondary;
-
-    a {
-        color: @secondary;
-    }
-
-    .wave {
-        height: 54px;
-        background-repeat: repeat-x;
-        background-image: url("../css/theme/components/img/wave_footer_top.png");
-    }
-}
--- a/src/css/theme/components/forms.less
+++ b/src/css/theme/components/forms.less
@@ -1,46 +0,0 @@
-form {
-    input,
-    textarea {
-        border: 1px solid @secondary;
-        background: #fff;
-        color: @on-background;
-        padding: @space-md;
-        width: 100%;
-        max-width: 100%;
-        border-radius: @space-sm;
-        transition: all 0.2s ease-in-out;
-
-        &[readonly] {
-            opacity: 0.5;
-        }
-    }
-
-    textarea {
-        height: 200px;
-    }
-
-    button {
-        background: @primary;
-        color: @on-primary;
-        padding: @space-md @space-lg;
-        border: 1px solid @primary;
-        border-radius: @space-sm;
-        transition: all 0.2s ease-in-out;
-        cursor: pointer;
-
-        &:hover {
-            border: 1px solid #fff;
-            box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.5);
-        }
-
-        &[disabled] {
-            opacity: 0.5;
-        }
-    }
-
-    .error {
-        background: @error;
-        color: @on-error;
-        padding: @space-md;
-    }
-}
--- a/src/css/theme/components/general.less
+++ b/src/css/theme/components/general.less
@@ -1,16 +0,0 @@
-html,
-body {
-    background: @background;
-    color: @on-background;
-    font-size: @font-size-default;
-    font-weight: @font-weight-default;
-    font-family: "Nunito", sans-serif;
-    width: 100%;
-    height: 100%;
-}
-
-img {
-    &.rounded {
-        border-radius: @radius-half;
-    }
-}
--- a/src/css/theme/components/header.less
+++ b/src/css/theme/components/header.less
@@ -1,127 +0,0 @@
-header {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    transition: all 1s ease-in-out;
-
-    .brand {
-        margin-top: -@space-md;
-
-        @media (max-width: 992px) {
-            display: block;
-            height: 100px;
-            margin: @space-md 0;
-        }
-
-        @media (max-width: 768px) {
-            display: block;
-            height: 60px;
-            margin: @space-md 0;
-        }
-
-        img {
-            width: auto;
-            height: 100%;
-        }
-    }
-
-    .service-bar {
-        background-color: @primary;
-        color: @on-primary;
-        border-bottom-left-radius: @radius-default;
-        border-bottom-right-radius: @radius-default;
-        height: 29px;
-        line-height: 29px;
-        padding: 0 20px;
-
-        @media (max-width: 992px) {
-            display: none;
-        }
-    }
-
-    nav {
-        ul {
-            padding: 0 20px;
-            margin-top: 50px;
-            list-style: none;
-            transition: all 1s ease-in-out;
-
-            li {
-                a {
-                    font-size: 20px;
-                    color: #fff;
-                    font-weight: 700;
-                    text-decoration: none;
-
-                    &:hover {
-                        color: @primary;
-                        text-decoration: none;
-                    }
-
-                    &.active {
-                        color: @primary;
-                    }
-                }
-            }
-        }
-
-        &.show {
-            display: block;
-        }
-    }
-
-    &.scroll {
-        background: rgba(0, 0, 0, 0.7);
-        padding-bottom: @space-lg;
-
-        @media (max-width: 992px) {
-            padding-bottom: 0;
-        }
-    }
-
-    @media (max-width: 992px) {
-        background: rgba(0, 0, 0, 0.7);
-    }
-}
-
-.top-article {
-    .wave-bottom {
-        height: 200px;
-        margin-top: -33px;
-        background-image: url("../css/theme/components/img/wave_header_bottom.png");
-        background-repeat: repeat-x;
-    }
-
-    & > .articles {
-        z-index: 1;
-        margin-right: 120px;
-        margin-left: 120px;
-        display: flex;
-        justify-content: space-around;
-        align-items: stretch;
-        gap: @space-lg;
-        margin-top: -80px;
-        margin-bottom: -120px;
-
-        article {
-            width: 33%;
-        }
-
-        @media (max-width: 1200px) {
-            flex-direction: column;
-            margin-right: @space-xl;
-            margin-left: @space-xl;
-
-            article {
-                width: 100%;
-            }
-        }
-    }
-
-    *[class^="col"] {
-        margin-top: @space-md;
-    }
-}
--- a/src/css/theme/components/img/wave_footer_top.png
+++ b/src/css/theme/components/img/wave_footer_top.png
--- a/src/css/theme/components/img/wave_header_bottom.png
+++ b/src/css/theme/components/img/wave_header_bottom.png
--- a/src/css/theme/components/img/wave_header_top.png
+++ b/src/css/theme/components/img/wave_header_top.png
--- a/src/css/theme/components/typo.less
+++ b/src/css/theme/components/typo.less
@@ -1,46 +0,0 @@
-a {
-    color: @on-background;
-    text-decoration: none;
-    transition: @transition-default;
-
-    &:hover {
-        color: @primary;
-        text-decoration: underline;
-    }
-}
-
-a {
-    color: @primary;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-    color: @primary;
-    font-weight: 700;
-    line-height: 1.2;
-}
-
-h1,
-.h1 {
-    font-size: 32px;
-}
-
-h2,
-.h2 {
-    font-size: 24px;
-}
-
-h3,
-.h3 {
-    font-size: 24px;
-}
--- a/src/css/theme/main.less
+++ b/src/css/theme/main.less
@@ -1,46 +0,0 @@
-// Variables
-
-@background: #f1ebe4;
-@on-background: #352a1c;
-
-@primary: #c4253e;
-@on-primary: #fff;
-
-@secondary: #bda082;
-@on-secondary: #fff;
-
-@surface: #fff;
-@on-surface: #352a1c;
-
-@error: @primary;
-@on-error: #fff;
-
-@font-size-default: 14px;
-@font-weight-default: 400;
-
-@radius-default: 25px;
-@radius-half: 12px;
-
-@transition-default: all 0.2s ease-in-out;
-
-// CSS Definitions
-
-@import "fonts";
-@import "reset";
-
-@import "components/general";
-@import "components/typo";
-@import "components/layout";
-@import "components/grid";
-@import "components/content";
-@import "components/sidebar";
-@import "components/article";
-@import "components/event";
-@import "components/header";
-@import "components/footer";
-@import "components/carousel";
-@import "components/navigation";
-@import "components/appointment";
-@import "components/cc-bar";
-@import "components/audio";
-@import "components/forms";
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { getGeneralInformation, getArticles } from "./api"
+import { getGeneralInformation, getArticles, getNavigations } from "./api"

 const initLoc = {
    path: (typeof window !== "undefined" && window.location?.pathname) || "/",
@@ -10,25 +10,40 @@ const initLoc = {

 export const location = writable(initLoc)

+const locale = {
+    key: "de",
+    title: "Deutsch",
+}
+export const currentLocale = writable(locale)
+
 // General Information

-export const generalInformation = writable<GeneralInformation>()
+export const generalInfo = writable<GeneralInfo>()
 const getGeneralProjectInformation = async () => {
    const infos = await getGeneralInformation()
    if (infos && infos.length) {
-        generalInformation.set(infos[0])
+        generalInfo.set(infos[0])
    }
 }
 getGeneralProjectInformation()

 // Articles

-export const articles = writable<TibiArticle[]>()
-const getAllArticles = async () => {
-    const list = await getArticles()
-    articles.set(list)
+// export const articles = writable<TibiArticle[]>()
+// const getAllArticles = async () => {
+//     const list = await getArticles()
+//     articles.set(list)
+// }
+// getAllArticles()
+
+// Navigations
+
+export const navigations = writable<Navigation[]>([])
+const getAllNavigations = async (locale: Locale) => {
+    const list = await getNavigations(locale)
+    navigations.set(list)
 }
-getAllArticles()
+getAllNavigations(locale)

 // Cookies - Webmakers Cookie Bar