next session

frontend/src/lib/components/Footer.svelte

@@ -21,6 +21,7 @@
 <style lang="less">
     @import "../assets/css/main.less";
     .footer {
+        margin-top: 80px;
         display: flex;
         flex-direction: column;
         align-items: flex-end;

frontend/src/lib/components/Menu/Header.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+
     export let active = false
     export let opened = false
 </script>
 
-<div class="header" class:fixed="{!opened}">
-    <div class="logo">
+<div class="header" class:sticky="{!opened}">
+    <div class="logo" on:keydown on:click="{() => navigate('/')}">
         <img src="/media/Logo Quer.svg" alt="Logo Quer" />
     </div>
     <button class="menu" on:click="{() => (active = !active)}">
@@ -19,8 +21,8 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
-    .fixed {
-        position: fixed;
+    .sticky {
+        position: sticky;
         top: 0px;
         z-index: 100;
     }
@@ -37,6 +39,7 @@
         gap: 25px;
 
         .logo {
+            cursor: pointer;
             flex-grow: 0;
             flex-shrink: 1;
 

frontend/src/lib/components/Menu/Menu.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import { navigation, pages } from "../../store"
     import Header from "./Header.svelte"
+    $: console.log($navigation, "nav")
     export let active = false
 </script>
 
@@ -7,27 +10,35 @@
     <div class="menu-container">
         <Header bind:active="{active}" opened="{true}" />
         <div class="menu-content">
-            <div class="container">
-                <div class="inner-container">
-                    <div class="pages">
-                        {#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
-                            <button class="page">
-                                {page}
-                            </button>
-                        {/each}
-                    </div>
-                    <div class="footer-infos">
-                        <div class="upper">
-                            <button>Datenschutz</button>
-                            <button>Impressum</button>
+            {#if $navigation}
+                <div class="container">
+                    <div class="inner-container">
+                        <div class="pages">
+                            {#each $navigation.pages as page}
+                                <button
+                                    class="page"
+                                    on:click="{() => {
+                                        active = false
+                                        navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
+                                    }}"
+                                >
+                                    {page.name}
+                                </button>
+                            {/each}
                         </div>
-                        <div class="lower">
-                            <button>0711 644 700-0</button>
-                            <button>info@fontis.de</button>
+                        <div class="footer-infos">
+                            <div class="upper">
+                                <button>Datenschutz</button>
+                                <button>Impressum</button>
+                            </div>
+                            <div class="lower">
+                                <button>0711 644 700-0</button>
+                                <button>info@fontis.de</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            {/if}
         </div>
     </div>
 </div>

frontend/src/lib/components/Pagebuilder/Homepage.svelte

@@ -23,7 +23,6 @@
         }
     })
 
-    $: console.log(teasers, "teasers")
     let teaser = teasers[0]
 </script>
 
@@ -41,7 +40,7 @@
             class="relative"
         >
             {#each teasers as teaser}
-                {#if teaser.teaser.showTeaser}
+                {#if teaser?.teaser?.showTeaser}
                     <swiper-slide class="relative">
                         <div class="inner-container">
                             <div class="titles">
@@ -65,7 +64,7 @@
     @import "../../assets/css/main.less";
 
     .container {
-        padding: 150px 0px;
+        padding: 20px 0px 150px 0px;
         min-height: 100vh;
         display: flex;
         align-items: center;

frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte

@@ -1,18 +1,54 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import Boxlist from "../widgets/boxlist.svelte"
+    import Events from "../widgets/events.svelte"
+    import ExtendableBox from "../widgets/extendableBox.svelte"
+    import IconBlock from "../widgets/iconBlock.svelte"
     import Image from "../widgets/image.svelte"
+    import InfoBoard from "../widgets/infoBoard.svelte"
+    import NestedCard from "../widgets/nestedCard.svelte"
+    import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
+    import Persons from "../widgets/persons.svelte"
+    import Publications from "../widgets/publications.svelte"
     import Text from "../widgets/text.svelte"
     import TextLink from "../widgets/textLink.svelte"
+    import TopDown from "../widgets/topDown.svelte"
+    import { rerender } from "../../store"
 
     export let row: Row
     export let pageId: string
-    console.log(row, "row")
-    console.log(row.columns)
+    export let bright: boolean
+
+    function checkNestedPath() {
+        const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
+
+        if (pathSegments.length > 1) {
+            pathSegments.pop() // remove the last segment
+            return "/" + pathSegments.join("/")
+        }
+
+        return ""
+    }
+
+    let nestedPath = checkNestedPath()
 </script>
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
         <h3>{row.topTitle}</h3>
     {/if}
+    {#if nestedPath}
+        <h3
+            style="cursor: pointer;"
+            on:keydown
+            on:click="{() => {
+                $rerender = $rerender + 1
+                navigate(nestedPath)
+            }}"
+        >
+            <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
+        </h3>
+    {/if}
     {#if row.pageTitle}
         <h1>{row.pageTitle}</h1>
     {/if}
@@ -28,9 +64,29 @@
                 {#if col?.contentType == "text"}
                     <Text text="{col?.text}" />
                 {:else if col?.contentType == "textLink"}
-                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" />
+                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" bright="{bright}" />
                 {:else if col.contentType == "image"}
                     <Image image="{col?.image}" pageId="{pageId}" />
+                {:else if col.contentType == "iconBlocks"}
+                    <IconBlock pageId="{pageId}" col="{col}" />
+                {:else if col.contentType == "pageLinkBlocks"}
+                    <PageLinkBlocks col="{col}" />
+                {:else if col.contentType == "networkEvents"}
+                    <Events col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "publications"}
+                    <Publications col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "topDown"}
+                    <TopDown col="{col}" />
+                {:else if col.contentType == "infoBoard"}
+                    <InfoBoard col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "nestedCard"}
+                    <NestedCard col="{col}" />
+                {:else if col.contentType == "boxlist"}
+                    <Boxlist col="{col}" />
+                {:else if col.contentType == "extendableBoxes"}
+                    <ExtendableBox col="{col}" />
+                {:else if col.contentType == "personPreview"}
+                    <Persons col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}
@@ -39,24 +95,45 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
-    h3 {
-        font-size: 1.2rem;
-        padding-bottom: 20px;
-    }
-    h2 {
-        font-size: 3.2rem;
-    }
-    h1 {
-        font-size: 5rem;
+    @media @tablet {
+        h3 {
+            font-size: 1.2rem;
+            padding-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            img {
+                width: 40px;
+
+                margin-right: 10px;
+            }
+        }
+        h2 {
+            font-size: 3.2rem;
+        }
+        h1 {
+            font-size: 5rem;
+        }
     }
     h1,
     h2 {
+        line-height: 1;
         padding-bottom: 40px;
     }
 
     .row {
         display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        @media (max-width: 640px) {
+            flex-direction: column-reverse;
+        }
         & > .col {
+            min-width: 40% !important;
+
+            @media @desktop {
+                min-width: 30% !important;
+            }
             padding: 10px;
             flex: 1;
             min-width: 0;

frontend/src/lib/components/Pagebuilder/Rows.svelte

@@ -2,10 +2,11 @@
     import { pages } from "../../store"
     import Homepage from "./Homepage.svelte"
     import Pagebuilder from "./Pagebuilder.svelte"
+    import { apiBaseURL } from "../../../config"
 
     export let path
     export let homepage = false
-
+    export let image: FileField
     let page: Page
     function initPage() {
         page = $pages[path]
@@ -23,7 +24,14 @@
         {#if path == "/"}<Homepage />{/if}
         {#each page.rows as row}
             <div class="row">
-                <Pagebuilder row="{row.row}" pageId="{page.id}" />
+                {#if row.row.backgroundImage}
+                    <div class="background-image">
+                        <img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
+                    </div>
+                {/if}
+                <div class="content" class:bright="{row.row.backgroundImage}">
+                    <Pagebuilder row="{row.row}" pageId="{page.id}" bright="{!!row.row.backgroundImage}" />
+                </div>
             </div>
         {/each}
     {/if}
@@ -35,6 +43,45 @@
     .rows {
         display: flex;
         flex-direction: column;
-        gap: 80px;
+        justify-content: flex-start;
+        width: 100%;
+        position: relative;
+
+        overflow-x: hidden;
+        gap: 10px;
+        & > .row {
+            padding: 10px;
+            padding-top: 80px;
+            width: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+
+            .background-image {
+                position: absolute;
+                width: 100%;
+                z-index: 1;
+                top: 0px;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                img {
+                    object-fit: cover;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            & > .content {
+                width: 100%;
+                max-width: 1600px;
+                padding: 0px 2.5vw;
+                position: relative;
+                &.bright {
+                    color: @font-color-secondary !important;
+                }
+                z-index: 2;
+            }
+        }
     }
 </style>

frontend/src/lib/components/widgets/boxlist.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let col: Column
+</script>
+
+<div class="boxList">
+    {#each col.boxList.boxes as name}
+        <div class="box">
+            {name.name}
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    .boxList {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        .box {
+            padding: 5px 10px;
+            background-color: @bg-color-secondary;
+            color: @font-color-secondary;
+            font-weight: bold;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/events.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let col: Column
+    export let pageId: string
+
+    let months = [
+        "Januar",
+        "Februar",
+        "März",
+        "April",
+        "Mai",
+        "Juni",
+        "Juli",
+        "August",
+        "September",
+        "Oktober",
+        "November",
+        "Dezember",
+    ]
+
+    let displayedItems = 4
+    const itemsPerPage = 4
+
+    function showMore() {
+        displayedItems += itemsPerPage
+    }
+
+    console.log("col:", col)
+</script>
+
+<div class="events">
+    {#each col.networkEvents.slice(0, displayedItems) as nE}
+        <div class="event">
+            <div class="calendar">
+                <div class="calendar-icon"><img src="/media/calendar.svg" alt="calendar" /></div>
+                <div class="date">
+                    <div class="month">{months[new Date(nE.beginDate).getMonth()]}</div>
+                    <div class="day">
+                        {new Date(nE.beginDate).getDate()}
+                        {#if nE.endDate}
+                            - {new Date(nE.endDate).getDate()}
+                        {/if}
+                    </div>
+                </div>
+            </div>
+            <div class="details">
+                <em>{nE.title}</em>
+                <a href="{apiBaseURL}page/{pageId}/{nE.file.src}" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
+                    <button class="more">mehr</button></a
+                >
+            </div>
+        </div>
+    {/each}
+    {#if displayedItems < col.networkEvents.length}
+        <button on:click="{showMore}">Weitere Events</button>
+    {/if}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    .events {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        button {
+            padding: 2px 15px;
+            border: 2px solid @bg-color-secondary;
+            margin-top: 40px;
+            font-weight: bold;
+        }
+        .event {
+            width: 100%;
+            display: flex;
+            .details {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: space-between;
+                padding: 24px 20px;
+                gap: 10px;
+                @media @tablet {
+                    padding: 0px 0px 0px 20px;
+                    flex-direction: row;
+                    align-items: center;
+                }
+                em {
+                    font-weight: bold;
+                }
+                .more {
+                    background-color: @bg-color-secondary;
+                    color: @font-color-secondary;
+                    border: none;
+                    height: 36px;
+                    padding: 2px 15px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+            }
+            .calendar {
+                width: 110px;
+                min-width: 110px;
+                display: flex;
+                border-right: @bg-color-secondary 2px solid;
+                flex-direction: column;
+                align-items: center;
+                @media @tablet {
+                    flex: 1;
+                    gap: 10px;
+                    padding: 32px 35px 0px 0px;
+                    max-width: 210px;
+                    flex-direction: row;
+                }
+                .calendar-icon {
+                    width: 56px;
+                    height: 56px;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+                }
+                .date {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    width: fit-content;
+                    .month {
+                        font-size: 0.7rem;
+                    }
+                    .day {
+                        font-size: 1.2rem;
+                        font-family: "Libre Caslon Text", serif;
+                    }
+                }
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    export let col: Column
+    export let opened = -1
+</script>
+
+<div class="boxes">
+    {#each col.extendableBoxes as box, i}
+        <div class="box" class:opened="{i == opened}">
+            <div
+                class="upper"
+                on:keydown
+                on:click="{() => {
+                    if (opened == i) opened = -1
+                    else opened = i
+                }}"
+            >
+                <h4>
+                    {box.title}
+                </h4>
+                <div>
+                    {#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
+                            src="/media/up.svg"
+                            alt="arrow"
+                        />{/if}
+                </div>
+            </div>
+            <div class="content" class:closed="{i !== opened}">
+                {@html box.text}
+                {#if box.emailButton}
+                    <a href="mailto:info@fontis.de?subject={box.emailSubject || 'Bewerbung'}" class="button">
+                        <button> bewerben </button>
+                    </a>
+                {/if}
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    button {
+        margin-top: 20px;
+        background-color: @bg-color-secondary;
+        color: @font-color-secondary;
+        border: 2px solid @bg-color-secondary;
+        padding: 2px 15px;
+        font-weight: bold;
+    }
+
+    .boxes {
+        display: flex;
+        flex-direction: column;
+        .box {
+            border-bottom: 2px dotted @bg-color-secondary;
+            display: flex;
+            transition: padding-bottom 1s;
+            padding-bottom: 0px;
+            flex-direction: column;
+            padding-top: 20px;
+            gap: 20px;
+            &.opened {
+                padding-bottom: 20px;
+            }
+            .upper {
+                font-size: 1.6rem;
+                font-weight: 500;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .content {
+                max-height: 1000px;
+                overflow: hidden;
+                transition: max-height 1s ease-in-out;
+                &.closed {
+                    max-height: 0px;
+                }
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/iconBlock.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let pageId: string
+    export let col: Column
+</script>
+
+<div class="iconBlock">
+    {#each col.iconBlocks as icon}
+        <div class="icon">
+            <img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
+            <div class="text">
+                <em>{icon.bigText}</em>
+                <p>{icon.smallText}</p>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    .iconBlock {
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+        .icon {
+            margin: 30px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 140px;
+            gap: 20px;
+            img {
+                width: 100%;
+                height: auto;
+            }
+            .text {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                em {
+                    text-align: center;
+                    font-size: 2.2rem;
+                    font-family: "Libre Caslon Text", serif;
+                }
+                p {
+                    text-align: center;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/infoBoard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let col: Column
+    export let pageId: string
+</script>
+
+<div class="infoBoard">
+    <div class="header">
+        <div class="icon">
+            <img src="{`${apiBaseURL}page/${pageId}/${col.infoBoard.icon?.src}`}" alt="img" />
+        </div>
+        <div class="title">
+            {col.infoBoard.title}
+            <div></div>
+        </div>
+    </div>
+    <div class="content">
+        {@html col.infoBoard.text}
+    </div>
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .infoBoard {
+        display: flex;
+        flex-direction: column;
+        padding: 15px;
+        gap: 40px;
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            .icon {
+                width: 64px;
+                height: 64px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+            }
+            .title {
+                font-size: 1.5rem;
+                display: flex;
+                flex-direction: column;
+                div {
+                    border-bottom: 1px solid @bg-color-secondary;
+                    width: 50px;
+                }
+            }
+        }
+        .content {
+            text-align: left;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/moreBtn.svelte

@@ -2,9 +2,10 @@
     import { navigate } from "svelte-routing"
 
     export let path: string
+    export let bright
 </script>
 
-<button class="more" on:click="{() => navigate(path)}"> mehr </button>
+<button class="more" class:bright="{bright}" on:click="{() => navigate(path)}">mehr</button>
 
 <style lang="less">
     @import "../../assets/css/main.less";
@@ -16,6 +17,8 @@
         padding: 2px 15px;
         font-size: 14px;
         font-weight: bold;
-        cursor: pointer;
+    }
+    .bright {
+        border: 2px solid @bg-color;
     }
 </style>

frontend/src/lib/components/widgets/nestedCard.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    export let col: Column
+</script>
+
+<div class="cards">
+    {#each col.nestedCard as card}
+        <div class="card">
+            <div class="title">{card.title}</div>
+            <div class="description">{@html card.description}</div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .cards {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        flex-wrap: wrap;
+
+        gap: 40px;
+        @media @desktop {
+            gap: 50px;
+            flex-direction: row;
+            .card {
+                min-width: 35%;
+                max-width: 50%;
+                margin-bottom: 50px !important;
+                padding: 64px 0px 0px 80px !important;
+                .title {
+                    padding: 13px 20px !important;
+                }
+                .description {
+                    padding: 10px 20px !important;
+                }
+            }
+        }
+        .card {
+            overflow: hidden;
+            flex: 1;
+            margin-bottom: 40px;
+            position: relative;
+            padding: 54px 0px 0px 70px;
+
+            .title {
+                position: absolute;
+                left: 0px;
+                padding: 7px 10px;
+                color: @font-color-secondary;
+                font-family: "LibreCaslonText";
+                font-size: 1.2rem;
+                top: 0px;
+                height: 100px;
+                width: 320px;
+                z-index: 9;
+                background-color: @bg-color-secondary;
+            }
+            .description {
+                position: relative;
+                z-index: 10;
+                padding: 5px 10px;
+                background-color: @bg-color;
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/pageLinkBlocks.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import { pages } from "../../store"
+    export let col: Column
+</script>
+
+<div class="link-container">
+    {#each col.pageLinkBlocks as link}
+        {#if isNaN(link.rowNr)}
+            <button
+                class="page-ref"
+                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+            >
+                {link.name}
+            </button>
+        {:else}
+            <button
+                class="row-ref"
+                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+            >
+                {link.name} <img src="/media/arrow-r.svg" alt="arrow" />
+            </button>
+        {/if}
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .link-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+        button {
+            background-color: @bg-color;
+            color: @font-color;
+            padding: 2px 15px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .row-ref {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 2px solid @bg-color-secondary;
+            img {
+                width: 20px;
+                height: auto;
+            }
+        }
+
+        .page-ref {
+            background-color: @bg-color-secondary;
+            color: @font-color-secondary;
+            border: 2px solid @bg-color-secondary;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/persons.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { pages, rerender } from "../../store"
+    import { navigate } from "svelte-routing/src/history"
+    export let pageId: string
+    export let col: Column
+    let hover = -1
+</script>
+
+<div class="persons">
+    {#each col.personPreview as pp, i}
+        <button
+            class="person"
+            on:click="{() => {
+                $rerender = $rerender + 1
+                navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
+            }}"
+        >
+            <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
+                {#if hover == i}
+                    <img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
+                {:else}
+                    <img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
+                {/if}
+            </div>
+            <div class="text">
+                {pp.name}
+            </div>
+        </button>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .persons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 80px;
+        .person {
+            cursor: pointer;
+            margin: 40px 0px;
+            display: flex;
+            flex-direction: column;
+            .image {
+                width: 290px;
+                height: 368px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+            }
+            .text {
+                width: 100%;
+                background-color: @bg-color-secondary;
+                color: @font-color-secondary;
+                border: 2px solid @bg-color-secondary;
+                padding: 2px 15px;
+                font-weight: bold;
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/publications.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+
+    export let col: Column
+    export let pageId: string
+
+    let displayedItems = 3
+    const itemsPerPage = 3
+
+    function showMore() {
+        displayedItems += itemsPerPage
+    }
+</script>
+
+<div class="publications">
+    {#each col.publications.slice(0, displayedItems) as publication}
+        <div class="publication">
+            <div class="left"><img src="/media/file.svg" alt="file" /></div>
+            <div class="right">
+                <div class="content">{@html publication.content}</div>
+                <div class="download">
+                    <a
+                        href="{apiBaseURL}page/{pageId}/{publication.file.src}"
+                        download="{apiBaseURL}page/{pageId}/{publication.file.src}"
+                    >
+                        <button class="download-button">zur Publikation</button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+{#if displayedItems < col.publications.length}
+    <button on:click="{showMore}">Weitere Publikationen</button>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    button {
+        padding: 2px 15px;
+        border: 2px solid @bg-color-secondary;
+        margin-top: 40px;
+        font-weight: bold;
+    }
+    .publications {
+        gap: 60px;
+        display: flex;
+        flex-direction: column;
+        @media @tablet {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+        .publication {
+            max-width: 370px;
+            display: flex;
+            align-items: flex-start;
+            .left {
+                max-width: 75px;
+                flex: 1;
+            }
+            .right {
+                padding-left: 20px;
+                border-left: 2px solid @bg-color-secondary;
+                flex: 1;
+                button {
+                    background-color: @bg-color-secondary;
+                    color: @font-color-secondary;
+                    border: 2px solid @bg-color-secondary;
+                    padding: 2px 15px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+</style>

frontend/src/lib/components/widgets/textLink.svelte

@@ -3,11 +3,12 @@
     import Text from "../widgets/text.svelte"
     export let description = ""
     export let path = ""
+    export let bright = false
 </script>
 
 <div class="textLink">
     <Text text="{description}" />
-    <MoreBtn path="{path}" />
+    <MoreBtn path="{path}" bright="{bright}" />
 </div>
 
 <style lang="less">

frontend/src/lib/components/widgets/topDown.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    export let col: Column
+</script>
+
+<div class="topDown">
+    {#each col.topDown.rows as row}
+        <div class="row">
+            <div class="capital">{row.inital}</div>
+            <div class="details">
+                <div class="upper">{row.rest}</div>
+                <div class="lower">{row.description}</div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .topDown {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 20px;
+        .row {
+            display: flex;
+            gap: 10px;
+            .capital {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-width: 60px;
+                min-height: 100px;
+                padding: 10px;
+                background-color: @bg-color-secondary;
+                color: @font-color-secondary;
+                font-family: "LibreCaslonText";
+                font-size: 1.7rem;
+                @media @desktop {
+                    font-size: 2.3rem;
+                    min-width: 80px;
+                    height: 120px;
+                }
+            }
+            .details {
+                min-height: 100px;
+                padding-top: 35px;
+                display: flex;
+                flex-direction: column;
+                .upper {
+                    line-height: 1;
+                    font-family: "LibreCaslonText";
+                    font-size: 1.7rem;
+                }
+                .lower {
+                }
+                @media @desktop {
+                    height: 120px;
+                    padding-top: 40px;
+                    .upper {
+                        font-size: 2.3rem;
+                    }
+                }
+            }
+        }
+    }
+</style>