mail

.gitea/workflows/deploy.yaml

@@ -1,10 +1,6 @@
 name: deploy to production
 
 on: "push"
-#    push:
-#        branches:
-#            - master
-
 jobs:
     deploy:
         name: deploy
@@ -17,40 +13,81 @@ jobs:
             - uses: actions/checkout@v3
               with:
                   fetch-depth: 0
-                  lfs: true
-                  submodules: true
-            - run: |
-                  git fetch --force --tags
 
-            # setup node 18
             - name: setup node 18
               uses: actions/setup-node@v3
-              with:
-                  node-version: 18
+              # with:
+              #    node-version: 18
+              #     cache: yarn
 
-            - name: build docs
+            - name: install dependencies
               env:
                   FORCE_COLOR: "true"
               run: |
-                  node --version
-                  cd docs
+                  npm install -g yarn
                   yarn install
-                  yarn docpress:build
 
-            - name: deploy docs
-              # only if branch is master
+            - name: modify config
+              run: |
+                  sed -i 's#\(sentryEnvironment.*\)".*"#\1"${GITHUB_REF_NAME}"#g' frontend/src/config.ts
+                  sed -i 's#//\( sentry\\.init.*\)#\1#g' frontend/src/config.ts
+                  export $(cat .env | xargs)
+                  echo "PROJECT_RELEASE=${RELEASE_PROJECT_SLUG}.r`git rev-list HEAD --count`-`git describe --all --long | sed 's+/+-+'`" >> .env
+                  export $(cat .env | xargs)
+                  echo ______ .env ______
+                  cat .env
+                  echo
+                  sed -i 's#\(const release = \).*#\1"'${PROJECT_RELEASE}'"#g' api/hooks/config-client.js
+
+                  # bash scripts/preload-meta.sh frontend/spa.html
+                  # bash scripts/preload-meta.sh frontend/spa.html > frontend/_spa.html
+                  # cp frontend/_spa.html frontend/spa.html
+
+                  export stamp=`date +%s`
+                  sed -i s/__TIMESTAMP__/$stamp/g frontend/spa.html
+                  # sed -i s/__TIMESTAMP__/$stamp/g frontend/serviceworker.js
+                  # cat frontend/serviceworker.js
+                  # rm api/templates/spa.html
+                  # cp frontend/spa.html api/templates/spa.html
+                  echo ______ frontend/spa.html ______
+                  cat frontend/spa.html
+
+            - name: build
+              env:
+                  FORCE_COLOR: "true"
+              run: |
+                  yarn build
+
+            #- name: build ssr
+            #  env:
+            #      FORCE_COLOR: "true"
+            #  run: |
+            #      yarn build:server
+
+            - name: build legacy
+              env:
+                  FORCE_COLOR: "true"
+              run: |
+                  yarn build:legacy
+
+            #- name: staging api test
+            #  if: github.ref == 'refs/heads/dev'
+            #  run: |
+            #      targetDir=/data/${GITHUB_REPOSITORY}/${GITHUB_REF_NAME}
+            #      mkdir -p targetDir
+            #      rsync -av api $targetDir/
+            #      mkdir -p $targetDir/frontend/dist
+            #      rsync -av frontend/dist/ $targetDir/frontend/dist/
+
+            #- name: staging frontend te
+            #  if: github.ref == 'refs/heads/dev'
+            #  run: |
+            #      docker compose -p ${GITHUB_REF_NAME}-${GITHUB_REPOSITORY_NAME}-${GITHUB_REPOSITORY_OWNER} up -d --build --remove-orphans
+
+            - name: deploy
               if: github.ref == 'refs/heads/master'
               env:
-                  RSYNC_HOST: ftp1.webmakers.de
-                  RSYNC_PORT: 22222
-                  RSYNC_USER: webmakers_tibi_docs_rsync_master
+                  RSYNC_USER: "fontis_rsync_master"
                   RSYNC_PASS: ${{ secrets.rsync_master }}
               run: |
-                  cd docs
-                  ls -la
-
-                  rsync -rlcgD --perms -i -u -v --stats --progress \
-                  --delete \
-                  -e "sshpass -p ${RSYNC_PASS} ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -p ${RSYNC_PORT}" \
-                  _docpress/ \
-                  ${RSYNC_USER}@${RSYNC_HOST}:./ \
+                  scripts/deploy.sh ftp1.webmakers.de $RSYNC_USER $RSYNC_PASS

api/collections/backups.yml

@@ -0,0 +1,95 @@
+name: backups
+meta:
+    isBackupcollection: true
+
+permissions:
+    public:
+        methods:
+            get: false
+            post: false
+            put: false
+            delete: false
+    user:
+        methods:
+            get: true
+            post: false
+            put: false
+            delete: false
+
+    # token als Zusatzsicherung gegen Spam, mehr siehe Hook
+    "token:${PUBLIC_TOKEN}":
+        methods:
+            get: false
+            post: true
+            put: false
+            delete: false
+
+hooks:
+    post:
+        create:
+            type: javascript
+            file: hooks/backups/post_create.js
+
+fields:
+    - name: collectionName
+      type: string
+      meta:
+          label: Collection Name
+
+    - name: entryId
+      type: string
+      meta:
+          label: Entry ID
+
+    - name: versionNr
+      type: number
+      meta:
+          label: Version Nr
+
+    - name: manipulatedBy
+      type: string
+      meta:
+          label: Manipulated By
+
+    - name: eventDescription
+      type: string
+      meta:
+          label: Event Description
+          widget: select
+          choices:
+              - id: create
+                name: Create
+              - id: update
+                name: Update
+              - id: delete
+                name: Delete
+              - id: recreate
+                name: Recreate
+              - id: activate
+                name: Activate
+
+    - name: updateLogs
+      type: object[]
+      meta:
+          label: Veränderungen
+
+      subFields:
+          - name: field
+            type: string
+            meta:
+                label: Feldname
+
+          - name: previous
+            type: string
+            meta:
+                label: Vorheriger Wert
+
+          - name: current
+            type: string
+            meta:
+                label: Aktueller Wert
+
+    - name: entry
+      type: object
+      meta:
+          label: Entry

api/collections/content.yml

@@ -4,6 +4,9 @@ uploadPath: ../media/page
 meta:
     label: Inhalt
     muiIcon: web
+    backup:
+        active: true
+        collectionName: backups
     views:
         - type: table
           columns:
@@ -90,6 +93,7 @@ fields:
       type: object[]
       meta:
           label: Zeilen
+          widget: containerLessObjectArray
           folding:
               force: true
       subFields:

api/collections/fieldLists/cards.yml

@@ -61,3 +61,15 @@
             id: 8
           - name: Immobilienbestand
             id: 9
+
+- name: verticalShift
+  type: number
+  meta:
+      label: Vertikale Verschiebung
+      helperText: "Die Karte wird um die angegebene Anzahl in Prozent nach oben verschoben."
+
+- name: horizontalShift
+  type: number
+  meta:
+      label: Horizontale Verschiebung
+      helperText: "Die Karte wird um die angegebene Anzahl in Prozent nach rechts verschoben."

api/collections/fields/row.yml

@@ -15,6 +15,12 @@ subFields:
           label: Oberer Titel
           helperText: "Dieser Titel wird in der Zeile oben angezeigt."
 
+    - name: topTitleUpperCase
+      type: boolean
+      meta:
+          label: Oberer Titel in Großbuchstaben
+          helperText: "Ist dies aktiviert, so wird der obere Titel in Großbuchstaben angezeigt."
+
     - name: title
       type: string
       meta:
@@ -39,12 +45,43 @@ subFields:
           label: Hintergrundbild
           helperText: "Dieses Bild wird als Hintergrundbild der Zeile angezeigt."
 
+    - name: noBottomMargin
+      type: boolean
+      meta:
+          label: Kein unterer Abstand
+          helperText: "Ist dies aktiviert, so wird kein Abstand unter der Zeile angezeigt."
+    - name: noTopMargin
+      type: boolean
+      meta:
+          label: Kein oberer Abstand
+          helperText: "Ist dies aktiviert, so wird kein Abstand über der Zeile angezeigt."
+
     - name: flexWrapNormal
       type: boolean
       meta:
           label: Zeile normal umbrechen
           helperText: "Ist dies aktiviert, so wird die Zeile normal und nicht reverse umgebrochen."
 
+    - name: twoToThree
+      type: boolean
+      meta:
+          label: Zwei zu drei
+          helperText: "Ist dies aktiviert, so wird die Zeile in zwei zu drei Spalten aufgeteilt."
+
+    - name: nextPage
+      type: string
+      meta:
+          label: Nächste Seite
+          widget: select
+          choices:
+              endpoint: page
+              params:
+                  sort: path
+                  projection: navigation
+              mapping:
+                  id: path
+                  name: path
+
     - name: columns
       type: object[]
       meta:

api/config.yml

@@ -8,9 +8,26 @@ meta:
             - url: https://tibi-admin-server.code.testversion.online/api/v1/_/demo
               description: code-server
 
+    dashboard:
+        majorItems:
+            - collection: navigation
+              type: reference
+              style:
+                  upper: rgba(3, 50, 59, 0.7)
+                  lower: rgba(3, 50, 59)
+
+            - collection: page
+              type: reference
+              style:
+                  upper: rgba(3, 50, 59, 0.7)
+                  lower: rgba(3, 50, 59)
+
+        minorItems: []
+
 collections:
     - !include collections/navigation.yml
     - !include collections/content.yml
+    - !include collections/backups.yml
 
 assets:
     - name: img

api/hooks/backups/post_create.js

@@ -0,0 +1,92 @@
+;(function () {
+    let backup = context.data
+    const updateLogs = compareAndUpdateEntry(backup?.entry, backup?.collectionName, backup?.versionNr - 1)
+    backup.updateLogs = updateLogs
+    return { data: backup }
+
+    function compareAndUpdateEntry(entry, collectionName, versionNr) {
+        let updateLogs
+        if (versionNr == 0) {
+            updateLogs = getUpdateLogs({}, entry)
+        }
+        delete entry.updateTime
+        let previousEntry = context.db.find("backups", {
+            filter: { entryId: context.data.entryId, versionNr, collectionName },
+        })[0]
+        if (!previousEntry) {
+            console.error("No previous entry found")
+            updateLogs = getUpdateLogs({}, entry)
+        } else {
+            delete previousEntry.updateTime
+            updateLogs = getUpdateLogs(previousEntry.entry, entry)
+        }
+        console.log(context.json.stringify(previousEntry?.entry), context.json.stringify(entry))
+
+        return updateLogs
+    }
+
+    function filterValidObjects(array) {
+        return array.filter((object) => {
+            for (let key in object) {
+                if (typeof object[key] !== "string" && object[key] !== null) {
+                    return false
+                }
+            }
+            return true
+        })
+    }
+    function getUpdateLogs(oldObj = {}, newObj = {}, path = "") {
+        let updateLogs = []
+        const ignoredKeys = ["id", "insertTime", "updateTime"]
+        const allKeys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)])
+
+        allKeys.forEach((key) => {
+            if (ignoredKeys.includes(key)) return
+
+            const newPath = path ? `${path}.${key}` : key
+            const oldVal = oldObj.hasOwnProperty(key) ? oldObj[key] : ""
+            const newVal = newObj.hasOwnProperty(key) ? newObj[key] : ""
+
+            // Handle Arrays
+            if (Array.isArray(oldVal) || Array.isArray(newVal)) {
+                const oldArr = oldVal || []
+                const newArr = newVal || []
+
+                for (let i = 0; i < Math.max(oldArr.length, newArr.length); i++) {
+                    const itemPath = `${newPath}[${i}]`
+
+                    if (oldArr[i] !== newArr[i]) {
+                        if (typeof oldArr[i] === "object" || typeof newArr[i] === "object") {
+                            const arrUpdates = getUpdateLogs(oldArr[i], newArr[i], itemPath)
+                            updateLogs = updateLogs.concat(arrUpdates)
+                        } else {
+                            updateLogs.push({
+                                field: itemPath,
+                                previous: oldArr[i] === undefined ? "" : oldArr[i].toString(),
+                                current: newArr[i] === undefined ? "" : newArr[i].toString(),
+                            })
+                        }
+                    }
+                }
+            }
+            // Handle nested objects but not arrays
+            else if (
+                (typeof oldVal === "object" && oldVal !== null) ||
+                (typeof newVal === "object" && newVal !== null)
+            ) {
+                const nestedUpdates = getUpdateLogs(oldVal || {}, newVal || {}, newPath)
+                updateLogs = updateLogs.concat(nestedUpdates)
+            }
+            // Handle primitive types
+            else if (oldVal !== newVal) {
+                updateLogs.push({
+                    field: newPath,
+                    previous: oldVal.toString(),
+                    current: newVal.toString(),
+                })
+            }
+        })
+
+        return filterValidObjects(updateLogs)
+    }
+})()

frontend/.htaccess

@@ -1,7 +1,7 @@
 AddType application/javascript .mjs
 
 #DirectoryIndex index.html spa.html
-DirectoryIndex noindex
+DirectoryIndex spa.html
 
 <ifModule mod_rewrite.c>
     RewriteEngine On
@@ -11,6 +11,6 @@ DirectoryIndex noindex
 
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
-    #RewriteRule ^/?(.*)$ http://tibi-server:8080/api/v1/_/demo/ssr?token=owshwerNwoa&url=/$1 [P,QSA,L]
+   
     RewriteRule (.*) /spa.html [QSA,L]
 </ifModule>

frontend/media/arrow-r.svg

@@ -1,3 +1,3 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" fill="#000"/>
+    <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" />
 </svg>

frontend/media/arrowr.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.959a.75.75 0 0 0 1.04 1.08l9.428-9.069a1 1 0 0 0 0-1.441l-9.428-9.07-.001.001z" fill="#333"/>
+</svg>

frontend/src/App.svelte

@@ -71,7 +71,9 @@
             </Route>
         </Router>
     </div>
-    <Footer />
+    {#key $rerender}
+        <Footer />
+    {/key}
 </main>
 
 <ScrollTop />
@@ -166,6 +168,10 @@
 
     html,
     body {
+        font-family: "Libre Franklin", sans-serif;
+        button {
+            font-family: "Libre Franklin", sans-serif;
+        }
         @media @mobile {
             font-size: @bodyfontsize;
             line-height: 1.4;

frontend/src/lib/assets/css/base.less

@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    overflow-wrap: break-word;
 }
 html {
     background-color: black;
@@ -24,6 +25,8 @@ ol {
 a {
     text-decoration: none;
     font-weight: 700;
+    color: inherit;
+    font-weight: normal;
 }
 
 /* Tabellen */
@@ -143,7 +146,7 @@ swiper-slide {
             background: #000000;
             height: 5px;
             width: 0;
-            animation: underlineEffect 4s linear forwards;
+            animation: underlineEffect 15s linear forwards;
             @media @tablet {
                 height: 10px;
             }
@@ -174,3 +177,8 @@ swiper-slide {
     scrollbar-width: thin; /* "auto" or "thin" */
     scrollbar-color: rgb(255, 255, 255) rgb(0, 0, 0); /* scroll thumb and track */
 }
+
+a {
+    color: black;
+    text-decoration: underline;
+}

frontend/src/lib/components/Footer.svelte

@@ -4,6 +4,7 @@
     let nextpage = $navigation?.pages[0]
     $: nextpage = $navigation?.pages[0]
     function getNextPage(pages) {
+        console.log(pages, "pages")
         if (location.pathname == "/" || location.pathname == "") return
 
         let currPage = pages.find(
@@ -19,7 +20,14 @@
         }
         nextpage = pages[nextIndex]
     }
+    let blackBg = false
     setInterval(() => {
+        if (location.pathname == "/") {
+            blackBg = true
+        } else {
+            blackBg = false
+        }
+
         getNextPage($navigation.pages)
 
         if (location.pathname.split("/").filter((s) => s).length >= 2) {
@@ -43,7 +51,7 @@
     }
 </script>
 
-<div class="footer">
+<div class="footer" class:black-bg="{blackBg}">
     {#if showNext}
         <button
             class="upper-part"
@@ -52,19 +60,33 @@
                 navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
             }}"
         >
-            <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
+            <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> Weiter</div>
             <div class="lower">{nextpage?.name}</div>
         </button>{/if}
     <div class="lower-part">
-        <div class="container">
+        <div class="container" style="">
             <div class="links">
-                <button>Datenschutz</button>
-                <button>Impressum</button>
+                <button
+                    on:click="{() => {
+                        $rerender = $rerender + 1
+                        navigate('/datenschutz')
+                    }}">Datenschutz</button
+                >
+                <button
+                    on:click="{() => {
+                        $rerender = $rerender + 1
+                        navigate('/impressum')
+                    }}">Impressum</button
+                >
             </div>
             <div class="contact">
-                <button>0711 644 700-0</button>
+                <button>+49 (0) 711 655 700-0</button>
 
-                <button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
+                <button>
+                    <a href="mailto:info@fontis.de" class="button" style="text-decoration: none;">
+                        info@fontis.de</a
+                    ></button
+                >
             </div>
         </div>
     </div>
@@ -73,13 +95,17 @@
 <style lang="less">
     @import "../assets/css/main.less";
     .footer {
-        margin-top: 80px;
+        padding-top: 80px;
         display: flex;
         position: relative;
         z-index: 1000;
         flex-direction: column;
         align-items: flex-end;
         color: @font-color-secondary;
+        &.black-bg {
+            margin-top: -10px;
+            background-color: @bg-color-secondary;
+        }
         .upper-part {
             background-color: @bg-color-secondary;
             padding: 10px 40px;
@@ -98,6 +124,7 @@
             .lower {
                 color: @font-color-secondary;
                 font-size: 22px;
+                font-family: "Libre Caslon Text", serif;
                 @media @tablet {
                     font-size: 24px;
                 }
@@ -111,11 +138,17 @@
             display: flex;
             justify-content: center;
             .container {
-                max-width: 1800px;
+                max-width: 1400px;
                 width: 100%;
                 display: flex;
-                padding: 0px 2.5vw;
+
                 flex-direction: column;
+                margin: 15px 0px;
+                padding: 15px 10px;
+                @media @tablet {
+                    margin: 40px 0px;
+                    padding: 30px 10px;
+                }
                 .links,
                 .contact {
                     display: flex;
@@ -130,7 +163,6 @@
                     }
                 }
                 @media @tablet {
-                    padding: 80px 2.5vw;
                     flex-direction: row;
                     justify-content: space-between;
                     .links,

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

@@ -1,12 +1,21 @@
 <script lang="ts">
     import { navigate } from "svelte-routing/src/history"
+    import { rerender } from "../../store"
 
     export let active = false
     export let opened = false
 </script>
 
 <div class="header" class:sticky="{!opened}">
-    <div class="logo" on:keydown on:click="{() => navigate('/')}">
+    <div
+        class="logo"
+        on:keydown
+        on:click="{() => {
+            active = false
+            $rerender = $rerender + 1
+            navigate('/')
+        }}"
+    >
         <img src="/media/Logo Quer.svg" alt="Logo Quer" />
     </div>
     <button class="menu" on:click="{() => (active = !active)}">
@@ -29,8 +38,10 @@
     .header {
         background-color: @bg-color;
         width: 100%;
-
-        padding: 25.4px calc(2.5vw + 10px);
+        padding: 10px calc(2.5vw + 10px);
+        @media @tablet {
+            padding: 25.4px calc(2.5vw + 10px);
+        }
 
         display: flex;
         align-items: center;
@@ -41,7 +52,9 @@
             cursor: pointer;
             flex-grow: 0;
             flex-shrink: 1;
-
+            @media (max-height: 500px) {
+                max-width: 50%;
+            }
             img {
                 width: 100%;
             }

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

@@ -14,27 +14,44 @@
                     <div class="inner-container">
                         <div class="pages">
                             {#each $navigation.pages as page}
-                                <button
-                                    class="page underline"
-                                    on:click="{() => {
-                                        active = false
-                                        $rerender = $rerender + 1
-                                        navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
-                                    }}"
-                                >
-                                    {page.name}
-                                </button>
+                                {#if Object.values($pages)?.find((o) => o.id == page.page)?.path !== "/"}
+                                    <button
+                                        class="page underline"
+                                        on:click="{() => {
+                                            active = false
+                                            $rerender = $rerender + 1
+                                            navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
+                                        }}"
+                                    >
+                                        {page.name}
+                                    </button>{/if}
                             {/each}
                         </div>
                         <div class="footer-infos">
                             <div class="upper">
-                                <button class="underline">Datenschutz</button>
-                                <button class="underline">Impressum</button>
+                                <button
+                                    class="underline"
+                                    on:click="{() => {
+                                        active = false
+                                        $rerender = $rerender + 1
+                                        navigate('/datenschutz')
+                                    }}">Datenschutz</button
+                                >
+                                <button
+                                    class="underline"
+                                    on:click="{() => {
+                                        active = false
+                                        $rerender = $rerender + 1
+                                        navigate('/impressum')
+                                    }}">Impressum</button
+                                >
                             </div>
                             <div class="lower">
-                                <button>0711&nbsp;644&nbsp;700-0</button>
+                                <button>+49 (0) 711 655 700-0</button>
                                 <button>
-                                    <a href="mailto:info@fontis.de" class="button"> info@fontis.de </a>
+                                    <a href="mailto:info@fontis.de" style="text-decoration: none;" class="button">
+                                        info@fontis.de
+                                    </a>
                                 </button>
                             </div>
                         </div>
@@ -54,7 +71,8 @@
         top: 110vh;
         left: 0px;
         right: 0px;
-        height: 100vh;
+        height: 100%;
+        overflow-y: auto;
         &.active {
             top: 0px;
         }
@@ -160,6 +178,7 @@
                             .page {
                                 font-size: 1.6rem;
                                 color: @font-color-secondary;
+                                font-family: "Libre Caslon Text", serif;
                             }
                         }
                         @media @tablet {

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

@@ -59,7 +59,7 @@
             navigation="{true}"
             init="{false}"
             autoplay="{{
-                delay: 4000, // 5000ms = 5s
+                delay: 15000, // 5000ms = 5s
                 pauseOnMouseEnter: true,
             }}"
             speed="600"
@@ -105,33 +105,44 @@
         align-items: center;
         justify-content: center;
         swiper-container {
-            max-width: 1800px;
+            max-width: 1400px;
         }
         .inner-container {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
+            gap: 20px;
             @media @tablet {
                 align-items: center;
+                gap: initial;
             }
             width: 100%;
             height: fit-content;
 
             .titles {
                 padding: 0 5%;
-                font-weight: normal;
+                font-weight: 500;
                 h1 {
                     font-size: 2rem;
-                    padding: 20px 0px;
+                    padding: 10px 0px 0px 0px;
+                    @media @tablet {
+                        padding: 20px 0px;
+                    }
                     margin: 10px 0px 20px 0px;
                     line-height: 1;
+                    font-weight: 500;
                     position: relative;
                 }
 
                 h2 {
-                    font-size: 1.2rem !important;
+                    font-size: 0.9rem !important;
+                    @media @tablet {
+                        font-size: 1.6rem !important;
+                    }
                     line-height: 1;
+                    font-family: "Libre Franklin", sans-serif;
+                    font-weight: 500;
                 }
             }
             .description {
@@ -146,18 +157,20 @@
                     min-width: 0px;
                 }
             }
-            
+
             @media @tablet {
                 .titles {
-                    font-weight: normal;
+                    font-weight: 500;
                     h1 {
-                        font-size: 3.4rem;
+                        font-size: 3.5rem;
                         padding: 20px 20px;
                         margin: 20px 0px 40px 0px;
+                        font-weight: 500;
                     }
                     h2 {
-                        font-size: 1.5rem;
+                        font-size: 1.3rem;
                     }
+                    font-weight: 500;
                 }
                 .description {
                     display: flex;
@@ -175,14 +188,16 @@
 
             @media @desktop {
                 .titles {
-                    font-weight: normal;
+                    font-weight: 500;
                     h1 {
                         font-size: 5rem;
                         padding: 20px 0px;
                         margin: 20px 0px 40px 0px;
+                        font-weight: 500;
                     }
                     h2 {
                         font-size: 1.6rem;
+                        font-weight: 500;
                     }
                 }
 

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

@@ -21,6 +21,7 @@
     export let row: Row
     export let pageId: string
     export let bright: boolean
+    export let isHP: boolean
 
     function checkNestedPath() {
         const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
@@ -32,25 +33,41 @@
 
         return ""
     }
-    $: console.log($pages)
     let nestedPath = checkNestedPath()
+    window.addEventListener("popstate", function (event) {
+        $rerender = $rerender + 1
+    })
 </script>
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
-        <h3 class:red="{row.topTitleRed}">{row.topTitle}</h3>
+        <h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}" class:red="{row.topTitleRed}">
+            {row.topTitle}
+        </h3>
     {/if}
     {#if nestedPath}
-        <h3
-            style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
-            on:keydown
-            on:click="{() => {
-                $rerender = $rerender + 1
-                navigate(nestedPath)
-            }}"
-        >
-            <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
-        </h3>
+        <div class="top-header" style="display: flex; width: 100%; justify-content: space-between;">
+            <h3
+                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
+                on:keydown
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(nestedPath)
+                }}"
+            >
+                <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
+            </h3>
+            <h3
+                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
+                on:keydown
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(row?.nextPage || nestedPath)
+                }}"
+            >
+                Zum nächsten Profil <img src="/media/arrowr.svg" alt="arrow" />
+            </h3>
+        </div>
     {/if}
     {#if row.pageTitle}
         <h1>{row.pageTitle}</h1>
@@ -59,55 +76,57 @@
         <h2 class="">{row.title}</h2>
     {/if}
     {#if row.subTitle}
-        <h3>{row.subTitle}</h3>
+        <h3 class="subheading">{row.subTitle}</h3>
     {/if}
-    <div
-        class="row"
-        class:normalWrap="{row.flexWrapNormal}"
-        class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
-    >
-        {#each row?.columns as col}
-            <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
-                {#if col?.contentType == "text"}
-                    <Text text="{col?.text}" />
-                {:else if col?.contentType == "textLink"}
-                    <TextLink
-                        description="{col?.textLink?.text}"
-                        path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
-                        bright="{bright}"
-                    />
-                {:else if col.contentType == "image"}
-                    <Image image="{col?.image}" col="{col}" 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}" />
-                {:else if col.contentType == "iconCycleCircle"}
-                    <IconCycleCircle col="{col}" pageId="{pageId}" />
-                {:else if col.contentType == "iconCycleSquare"}
-                    <IconCycleBox col="{col}" pageId="{pageId}" />
-                {:else if col.contentType == "worldCard"}
-                    <WorldCard col="{col}" pageId="{pageId}" />
-                {/if}
-            </div>
-        {/each}
-    </div>
+    {#if row?.columns?.length}
+        <div
+            class="row"
+            class:twoToThree="{row.twoToThree}"
+            class:normalWrap="{row.flexWrapNormal}"
+            class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
+        >
+            {#each row?.columns as col}
+                <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
+                    {#if col?.contentType == "text"}
+                        <Text text="{col?.text}" />
+                    {:else if col?.contentType == "textLink"}
+                        <TextLink
+                            description="{col?.textLink?.text}"
+                            path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
+                            bright="{bright}"
+                        />
+                    {:else if col.contentType == "image"}
+                        <Image image="{col?.image}" col="{col}" 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}" />
+                    {:else if col.contentType == "iconCycleCircle"}
+                        <IconCycleCircle col="{col}" pageId="{pageId}" />
+                    {:else if col.contentType == "iconCycleSquare"}
+                        <IconCycleBox col="{col}" pageId="{pageId}" />
+                    {:else if col.contentType == "worldCard"}
+                        <WorldCard col="{col}" pageId="{pageId}" />
+                    {/if}
+                </div>
+            {/each}
+        </div>{/if}
 {/if}
 
 <style lang="less">
@@ -116,12 +135,35 @@
         color: #fa00ff !important;
     }
     h3 {
-        font-weight: normal;
+        font-weight: 500;
+        margin-bottom: 15px;
+        @media @tablet {
+            margin-bottom: 0px;
+        }
+    }
+    h2 {
+        font-weight: 500;
+        font-size: 1.7rem !important;
+    }
+    h1 {
+        font-weight: 500;
+        font-size: 2rem;
+    }
+    .top-header {
+        img {
+            width: 20px;
+        }
+        font-size: 0.7rem;
+        @media @tablet {
+            font-size: 1.2rem;
+            img {
+                width: 48px;
+            }
+        }
     }
     @media @tablet {
         h3 {
-            font-size: 1.2rem;
-
+            font-size: 1.3rem;
             display: flex;
             align-items: center;
             gap: 10px;
@@ -129,12 +171,25 @@
                 width: 40px;
                 margin-right: 10px;
             }
+            &.subheading {
+                font-size: 1.8rem;
+            }
         }
         h2 {
-            font-size: 2.3rem;
+            font-size: 2rem !important;
+            font-weight: 500;
         }
         h1 {
-            font-size: 4rem;
+            font-size: 3.5rem;
+            font-weight: 500;
+        }
+    }
+    @media @desktop {
+        h2 {
+            font-size: 2.3rem !important;
+        }
+        h1 {
+            font-size: 5rem;
         }
     }
 
@@ -143,6 +198,8 @@
         display: flex;
         align-items: flex-start;
         flex-wrap: wrap;
+        gap: 20px;
+
         &.dominant {
             @media (max-width: 1024px) {
                 flex-direction: row-reverse;
@@ -155,6 +212,7 @@
             }
         }
         & > .col {
+            max-width: 100%;
             &.dominant {
                 @media (max-width: 1024px) {
                     min-width: 80% !important;
@@ -167,9 +225,28 @@
             @media @desktop {
                 min-width: 30% !important;
             }
-            padding: 10px;
+
             flex: 1;
             min-width: 0;
         }
+        &.twoToThree {
+            & > .col:nth-child(1) {
+                flex: 2 !important;
+            }
+            & > .col:nth-child(2) {
+                flex: 3 !important;
+            }
+        }
+    }
+
+    .hph3 {
+        text-transform: uppercase;
+        font-size: 0.7rem;
+    }
+    .nmh3 {
+        font-size: 0.9rem;
+        @media @tablet {
+            font-size: 1.6rem;
+        }
     }
 </style>

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

@@ -45,14 +45,28 @@
     {#if page}
         {#if path == "/"}<Homepage />{/if}
         {#each page.rows as row, i}
-            <div class="row" id="row-{i}">
+            <div
+                class="row"
+                id="row-{i}"
+                style="{path == '/' && i == page.rows.length - 1
+                    ? 'padding-bottom: 300px; margin-bottom: -40px;'
+                    : ''} {row.row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.row
+                    .noTopMargin
+                    ? 'margin-top: 0px; padding-top: 0px;'
+                    : ''}"
+            >
                 {#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}" />
+                    <Pagebuilder
+                        isHP="{path == '/'}"
+                        row="{row.row}"
+                        pageId="{page.id}"
+                        bright="{!!row.row.backgroundImage}"
+                    />
                 </div>
             </div>
         {/each}
@@ -68,15 +82,16 @@
         justify-content: flex-start;
         width: 100%;
         position: relative;
-
-        overflow-x: hidden;
+        max-width: 100vw;
+        overflow: hidden;
         gap: 10px;
 
         & > .row {
-            padding: 10px;
-            padding-top: 30px;
+            margin: 15px 0px;
+            padding: 15px 10px;
             @media @tablet {
-                padding-top: 80px;
+                margin: 40px 0px;
+                padding: 30px 10px;
             }
             width: 100%;
             position: relative;
@@ -100,8 +115,8 @@
 
             & > .content {
                 width: 100%;
-                max-width: 1800px;
-                padding: 0px 2.5vw;
+                max-width: 1400px;
+                margin: 0px 2.5vw;
                 position: relative;
                 &.bright {
                     color: @font-color-secondary !important;

frontend/src/lib/components/widgets/Worldcard/card.svelte

@@ -7,7 +7,7 @@
     export let selected: boolean[]
     let props
     $: {
-        props = chunkArray([...card.properties], 5)
+        props = chunkArray([...card.properties], card.properties.length > 8 ? 5 : 4)
     }
 
     function chunkArray(myArray, chunk_size): number[][] {
@@ -19,6 +19,7 @@
 
         return results
     }
+    let hovered = "-1"
 </script>
 
 <div class="card">
@@ -31,16 +32,33 @@
                 'center'};"
         >
             <div class="inner-container">
-                <div class="title" class:active="{card.properties.some((v, i) => selected[v])}">
+                <div
+                    class="title"
+                    class:active="{card.properties.some((v, i) => selected[v])}"
+                    style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;"
+                >
                     {card.title}
                 </div>
 
-                <div class="properties">
+                <div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
                     {#each props as propertyRow, i (i)}
-                        <div class="property-row">
+                        <div
+                            class="property-row"
+                            style="grid-template-columns: repeat({propertyRow.length}, min(25px, 1.8vw));"
+                        >
                             {#each propertyRow as property, j (j)}
                                 <div class="collapsible-wrapper">
-                                    <div class="property collapsible" class:selected="{selected[property]}">
+                                    <div
+                                        class="property collapsible"
+                                        class:hovered="{hovered == j + ' ' + i}"
+                                        class:selected="{selected[property]}"
+                                        on:mouseenter="{() => {
+                                            hovered = j + ' ' + i
+                                        }}"
+                                        on:mouseleave="{() => {
+                                            hovered = '-1'
+                                        }}"
+                                    >
                                         <div class="short">
                                             {properties[property][0]}
                                         </div>
@@ -61,15 +79,16 @@
     .card {
         position: relative;
         height: fit-content;
+
         img {
             display: block;
             width: 100%;
         }
+        .short {
+            font-weight: 700;
+        }
         .content {
             position: absolute;
-            &:hover {
-                z-index: 10000;
-            }
             padding: 10px;
             top: 0px;
             left: 0px;
@@ -80,21 +99,26 @@
                 height: 100%;
                 display: flex;
                 flex-direction: column;
+
                 .inner-container {
-                    max-width: 170px;
+                    max-width: 200px;
                     &:hover {
                         max-width: fit-content;
                     }
                     display: flex;
                     width: fit-content;
                     flex-direction: column;
-                    gap: 20px;
+                    gap: 10px;
                     align-items: center;
                     .title {
-                        font-size: min(0.9vw, 14px);
+                        font-size: min(1.6vw, 14px);
+                        position: relative;
+                        z-index: 200;
                         padding: 2px 5px;
+                        text-transform: uppercase;
                         @media @tablet {
                             padding: 5px 10px;
+                            font-size: min(1vw, 18px);
                         }
                         font-weight: bold;
                         color: @font-color-secondary;
@@ -107,23 +131,33 @@
 
                     .properties {
                         display: none;
+                        position: relative;
                         @media @desktop {
                             display: flex;
                         }
+
                         flex-direction: column;
                         gap: 5px;
                         .property-row {
-                            display: flex;
-                            gap: 5px;
-
+                            display: grid;
+                            grid-gap: 5px;
+                            @media (max-width: 1000px) {
+                                grid-gap: 2px;
+                            }
                             .property {
+                                z-index: 99;
+                                &:hover {
+                                    z-index: 9999;
+                                }
+                                position: relative;
+                                left: 0px;
                                 cursor: pointer;
                                 overflow: hidden;
-                                width: 2vw;
-                                max-width: 30px;
-                                font-size: min(0.7vw, 14px);
-                                height: 2vw;
-                                max-height: 30px;
+                                width: 1.8vw;
+                                max-width: 25px;
+                                font-size: min(0.5vw, 11px);
+                                height: 1.8vw;
+                                max-height: 25px;
                                 border-radius: 15px;
                                 border: 2px solid #4f4f4f;
                                 color: #4f4f4f;
@@ -133,6 +167,8 @@
                                 align-items: center;
                                 transition: 0.5s width ease-in, 0.5s max-width ease-in, 0.5s background-color ease-in,
                                     0.5s color ease-in;
+                                display: flex;
+
                                 &.selected {
                                     background-color: @bg-color !important;
                                     color: @font-color !important;
@@ -142,17 +178,21 @@
                                     overflow: hidden;
                                     background-color: @bg-color-secondary;
                                     color: @font-color-secondary;
-                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
+                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in,
+                                        0.5s padding ease-in;
                                     white-space: nowrap;
                                 }
-                                &:hover {
+                                &.hovered {
                                     width: fit-content;
+                                    z-index: 9999;
                                     max-width: 1000px;
                                     padding: 5px;
                                     background-color: white;
-
+                                    .short {
+                                        padding-left: 8px;
+                                    }
                                     .long {
-                                        padding-left: 15px;
+                                        padding: 0px 10px;
                                         max-width: fit-content;
                                         background-color: @bg-color;
                                         color: @font-color;

frontend/src/lib/components/widgets/Worldcard/selectbox.svelte

@@ -34,6 +34,8 @@
         border: 2px solid @bg-color;
         .abbriviation {
             padding-right: 10px;
+            padding-left: 8px;
+            font-weight: 700;
         }
         .name {
             padding-right: 10px;

frontend/src/lib/components/widgets/Worldcard/worldcard.svelte

@@ -11,7 +11,6 @@
         ["IN", "Infrastruktur"],
         ["W", "Waldwirtschaft"],
         ["IE", "Immobilien-Entwicklung"],
-
         ["R", "Renten"],
         ["VC", "Venture Capital"],
         ["PD", "Private Debt"],
@@ -36,32 +35,39 @@
     }
 </script>
 
-<div class="worldcard">
+<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
     <div class="worldcard">
-        {#each col.worldCard.row as row}
-            <div class="wc-row">
-                {#each row.cards as card}
-                    <Card card="{card}" properties="{availableProperties}" pageId="{pageId}" selected="{selected}" />
-                {/each}
-            </div>
-        {/each}
-    </div>
+        <div class="worldcard">
+            {#each col.worldCard.row as row}
+                <div class="wc-row">
+                    {#each row.cards as card}
+                        <Card
+                            card="{card}"
+                            properties="{availableProperties}"
+                            pageId="{pageId}"
+                            selected="{selected}"
+                        />
+                    {/each}
+                </div>
+            {/each}
+        </div>
 
-    <div class="selectboxes">
-        <h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
-        {#each props as propertyRow, i}
-            <div class="prop-row">
-                {#each propertyRow as property, j}
-                    <Selectbox
-                        abbriviation="{property[0]}"
-                        name="{property[1]}"
-                        on:click="{(e) => {
-                            selected[availableProperties.indexOf(property)] = e.detail
-                        }}"
-                    />
-                {/each}
-            </div>
-        {/each}
+        <div class="selectboxes">
+            <h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
+            {#each props as propertyRow, i}
+                <div class="prop-row">
+                    {#each propertyRow as property, j}
+                        <Selectbox
+                            abbriviation="{property[0]}"
+                            name="{property[1]}"
+                            on:click="{(e) => {
+                                selected[availableProperties.indexOf(property)] = e.detail
+                            }}"
+                        />
+                    {/each}
+                </div>
+            {/each}
+        </div>
     </div>
 </div>
 
@@ -70,11 +76,11 @@
 
     .worldcard {
         line-height: 1 !important;
-        font-size: 0.7rem;
+        font-size: 0.8rem;
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         flex-direction: column;
-        width: 100%;
+        width: 1170px;
         max-width: 95vw;
 
         & > .worldcard {

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

@@ -1,5 +1,14 @@
 <script lang="ts">
     export let col: Column
+
+    // A function to compare first names and sort the array
+    const sortByFirstName = (a, b) => {
+        const nameA = a.name.split(" ")[0] // Extracts the first name from "First Last"
+        const nameB = b.name.split(" ")[0]
+        return nameA.localeCompare(nameB)
+    }
+
+    col.boxList.boxes.sort(sortByFirstName) // Sorts the array in place
 </script>
 
 <div class="boxList">
@@ -14,7 +23,6 @@
     @import "../../assets/css/main.less";
 
     .boxList {
-     
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
@@ -24,6 +32,5 @@
             color: @font-color-secondary;
             font-weight: bold;
         }
-   
     }
 </style>

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

@@ -44,7 +44,7 @@
             </div>
             <div class="details">
                 <em>{nE.title}</em>
-                <a href="{apiBaseURL}page/{pageId}/{nE.file.src}" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
+                <a href="{apiBaseURL}page/{pageId}/{nE.file.src}" style="text-decoration: none;" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
                     <button class="more">mehr</button></a
                 >
             </div>
@@ -94,7 +94,7 @@
                     border: none;
                     height: 36px;
                     padding: 2px 15px;
-                    font-size: 14px;
+                    font-size: 20px;
                     font-weight: bold;
                     cursor: pointer;
                 }

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

@@ -37,7 +37,11 @@
             <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">
+                    <a
+                        href="mailto:bewerbung@fontis.de?subject={box.emailSubject || 'Bewerbung'}"
+                        style="text-decoration: none;"
+                        class="button"
+                    >
                         <button> bewerben </button>
                     </a>
                 {/if}

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

@@ -6,6 +6,7 @@
 </script>
 
 <div class="iconBlock">
+
     {#each col.iconBlocks as icon}
         <div class="icon">
             <img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
@@ -24,37 +25,44 @@
         justify-content: start;
         flex-wrap: wrap;
         .icon {
-            margin: 30px;
             display: flex;
             flex-direction: column;
             align-items: center;
-
-            width: 80px;
-            gap: 8px;
+            width: 150px;
+            gap: 10px;
             max-width: 45%;
             flex-grow: 1;
+            font-size: 0.9rem;
+            margin: 20px 0px;
             @media @tablet {
                 max-width: initial;
                 flex-grow: initial;
-                width: 107px;
-                gap: 20px;
+                width: 160px;
+            }
+            @media @desktop {
+                width: 213px;
             }
             img {
-                width: 100%;
+                width: 75%;
                 height: auto;
             }
             .text {
                 display: flex;
                 flex-direction: column;
-                gap: 10px;
+
                 em {
                     text-align: center;
                     font-size: 2.2rem;
                     font-family: "Libre Caslon Text", serif;
+                    font-style: normal;
                 }
                 p {
                     text-align: center;
                     font-weight: bold;
+                    font-size: 1rem;
+                    @media (max-width: 1050px) {
+                        font-size: 0.7rem;
+                    }
                 }
             }
         }

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

@@ -7,7 +7,7 @@
     setInterval(() => {
         active += 1
         if (active == col.iconCycleSquare.boxes.length) active = 0
-    }, 1000)
+    }, 1250)
 </script>
 
 <div class="iconCycleSquares">
@@ -15,8 +15,10 @@
         <div class="box" id="box{i}" class:active="{i == active}">
             <div class="content">
                 <div class="icon">
-                    <svg stroke="{i == active ? 'black' : 'white'}" data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"
-                    ></svg>
+                    <svg
+                        stroke="{i == active ? 'black' : 'white'}"
+                        fill="{i == active ? 'black' : 'white'}"
+                        data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
                 </div>
                 <div class="text">
                     {box.text}
@@ -31,10 +33,12 @@
     .iconCycleSquares {
         display: flex;
         flex-wrap: wrap;
+        justify-content: flex-start;
         gap: 10px;
         font-size: 0.8rem;
+        transition: background-color 600ms;
+
         @media @tablet {
-            gap: 20px;
             font-size: 1rem;
         }
         .box {
@@ -44,27 +48,34 @@
             align-items: center;
             justify-content: center;
             color: @font-color-secondary;
+            padding: 10px;
             &.active {
                 background-color: @bg-color;
                 color: @font-color;
             }
-            width: 140px;
-            height: 150px;
+            aspect-ratio: 1/1;
+            width: calc((100% / 2) - 10px);
+            @media (min-width: 950px) and (max-width: 1450px) {
+                width: calc((100% / 4) - 10px);
+            }
+            @media (min-width: 1450px) {
+                width: calc((100% / 5) - 10px);
+            }
             .content {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                @media @tablet {
+                    gap: 20px;
+                }
                 .text {
                     width: 100%;
                     display: flex;
                     justify-content: center;
                     text-align: center;
+                    font-family: "Libre Caslon Text", serif;
                 }
             }
-            @media @tablet {
-                width: 260px;
-                height: 260px;
-            }
         }
     }
 </style>

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

@@ -7,18 +7,18 @@
 
     let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
     let angleStep = 360 / count
-    let radius = 360
+    let radius = 310
 
     let circles = []
 
     onMount(() => {
         for (let i = 0; i < count; i++) {
-            let angle = angleStep * i * (Math.PI / 180) // Convert to radians
+            let angle = (angleStep * i - 90) * (Math.PI / 180) // Convert to radians
 
             circles.push({
                 x: radius * Math.cos(angle),
                 y: radius * Math.sin(angle),
-                rotation: angleStep * i - 90, // subtract 90 to point towards the circle
+                rotation: angleStep * i + 180, // subtract 90 to point towards the circle
             })
         }
         circles = circles
@@ -46,22 +46,23 @@
                     <div class="number" style="transform: rotate(calc( -1 * {rotation}deg - 90deg ))">{i + 1}</div>
                 </div>
 
-                <div class="content" style="transform: translate(calc({x}px / 15) , calc({y}px / 15))">
+                <div class="content" style="transform: translate(calc({x}px / 25) , calc({y}px / 25))">
                     <div class="icon">
                         <svg
                             id="mySvgObject{i}"
                             stroke="{i == focused ? 'white' : 'black'}"
+                            fill="{i == focused ? 'white' : 'black'}"
                             data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
                     </div>
-                    <div class="text">
-                        {col.iconCycleCircle?.boxes[i]?.text}
+                    <div class="text" style="text-align: center;">
+                        {@html col.iconCycleCircle?.boxes[i]?.text}
                     </div>
                 </div>
             </div>
             <div
                 class="arrow"
-                style="transform: translate(calc(90px + {(x * 0.8) / 2}px - 10px ), calc(90px + {(y * 0.8) /
-                    2}px - 37.5px)) rotate(calc({rotation}deg - 90deg))"
+                style="transform-origin: center; transform: translate(calc(90px + {(x * 0.9) /
+                    2}px - 5px ), calc(90px + {(y * 0.9) / 2}px - 37.5px)) rotate(calc({rotation}deg - 90deg))"
             >
                 <img src="/media/arrow-l-fat.svg" alt="arrow" />
             </div>
@@ -77,6 +78,8 @@
         display: flex;
         align-items: flex-start;
         justify-content: center;
+        transform-origin: top;
+        margin-top: -60px;
 
         @media (max-width: 1430px) {
             transform: scale(0.9);
@@ -86,14 +89,17 @@
         @media (max-width: 1290px) {
             transform: scale(0.7);
             height: 700px;
+            margin-top: 40px;
         }
 
         @media (max-width: 680px) {
             transform: scale(0.5);
             height: 500px;
+            margin-top: 80px;
         }
         @media (max-width: 520px) {
             transform: scale(0.37);
+            margin-top: 120px;
             height: 370px;
         }
         .main-circle {
@@ -113,11 +119,12 @@
                 align-items: center;
                 justify-content: center;
                 z-index: 120;
-                font-size: 1.2rem;
+                font-size: 0.8rem;
             }
             .circle {
                 position: absolute;
                 width: 180px;
+                overflow: hidden;
                 height: 180px;
                 background: rgba(255, 255, 255, 0);
                 border: 4px solid @bg-color-secondary;
@@ -130,14 +137,17 @@
                     display: flex;
                     line-height: 1;
                     flex-direction: column;
-                    width: 100%;
-                    height: 100%;
+                    transform-origin: center;
+                    width: 95%;
+                    border-radius: 50%;
+                    height: 95%;
                     align-items: center;
-                    font-size: 1.2rem;
+                    font-size: 0.8rem;
                     justify-content: center;
+                    padding: 15px;
                     svg {
-                        width: 100%;
-                        height: 100%;
+                        width: 80%;
+                        height: 80%;
                     }
                 }
 
@@ -161,7 +171,8 @@
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        font-size: 30px; /* oder eine passende Größe */
+                        font-size: 26px; /* oder eine passende Größe */
+                        font-weight: 700;
                         color: white;
                     }
                     &::before {
@@ -197,7 +208,6 @@
                 position: absolute;
                 width: 10px;
                 height: 75px;
-
                 transform-origin: center;
             }
         }

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

@@ -12,7 +12,7 @@
     <div class="icons">
         {#each col.icons as icon}
             <div class="icon">
-                <a href="{icon.link}" target="_blank">
+                <a href="{icon.link}" style="text-decoration: none;" target="_blank">
                     <img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
                 </a>
             </div>

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

@@ -15,7 +15,7 @@
         border: none;
         height: 36px;
         padding: 2px 15px;
-        font-size: 14px;
+        font-size: 20px;
         font-weight: bold;
     }
     .bright {

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

@@ -48,11 +48,11 @@
                 left: 0px;
                 padding: 7px 10px;
                 color: @font-color-secondary;
-                font-family: "LibreCaslonText";
-                font-size: 1.2rem;
+                font-family: "Libre Caslon Text", sans-serif;
+                font-size: 1.15rem;
                 top: 0px;
                 height: 100px;
-                width: 320px;
+                width: 365px;
                 z-index: 9;
                 background-color: @bg-color-secondary;
             }

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

@@ -2,10 +2,11 @@
     import { navigate } from "svelte-routing/src/history"
     import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
     export let col: Column
+    let focused = -1
 </script>
 
 <div class="link-container">
-    {#each col.pageLinkBlocks as link}
+    {#each col.pageLinkBlocks as link, i}
         {#if isNaN(link.extendableRowNr)}
             <button
                 class="page-ref"
@@ -19,6 +20,12 @@
             </button>
         {:else}
             <button
+                on:mouseenter="{() => {
+                    focused = i
+                }}"
+                on:mouseleave="{() => {
+                    focused = -1
+                }}"
                 class="row-ref fill"
                 on:click="{() => {
                     $rerender = $rerender + 1
@@ -30,7 +37,11 @@
                 <div>
                     {link.name}
                 </div>
-                <img src="/media/arrow-r.svg" alt="arrow" />
+                <svg
+                    data-src="/media/arrow-r.svg"
+                    stroke="{i == focused ? '#fff' : 'black'}"
+                    fill="{i == focused ? '#fff' : 'black'}"
+                    style="z-index: 9999; position: relative;"></svg>
             </button>
         {/if}
     {/each}
@@ -43,13 +54,19 @@
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
+
         button {
             background-color: @bg-color;
             color: @font-color;
+
             padding: 2px 15px;
-            font-size: 14px;
+            font-size: 20px;
             font-weight: bold;
             cursor: pointer;
+            font-size: 0.7rem;
+            @media @tablet {
+                font-size: initial;
+            }
         }
 
         .row-ref {

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

@@ -34,7 +34,7 @@
         /* Place your styles here */
         position: fixed;
         bottom: 5px;
-        z-index: 100;
+        z-index: 9999;
         transform: scale(0.5);
         right: 5px;
         @media @tablet {

scripts/deploy.sh

@@ -7,10 +7,10 @@ if [ -z "${RSYNC_USER}" ] || [ -z "${RSYNC_PASS}" ]; then
 fi
 
 excludes=""
-if [ "${DRONE_BRANCH}" == "master" ]; then
-    excludes='--exclude=src --exclude=*.map'
-    echo "master deploy, excluding $excludes"
-fi
+#if [ "${DRONE_BRANCH}" == "master" ]; then
+#    excludes='--exclude=src --exclude=*.map'
+#    echo "master deploy, excluding $excludes"
+#fi
 
 # sync frontend
 rsync -rlcgD --perms -i -u -v --stats --progress \