fix: default imagepos

.chatgpt_config.yaml

@@ -2,5 +2,6 @@ project_name: "lena-schilling-website"
 default_prompt_blocks:
   - "basic-prompt"
   - "typo3-development"
-directories:
+initial_files:
-  - "packages"
+  - composer.json
+  - package.json

.ddev/docker-compose.override.yaml

@@ -0,0 +1,9 @@
+version: '3.6'
+services:
+  web:
+    # Install needed dependencies and run webpack in watch mode
+    command: /bin/sh -c "npm install && npm run build:css -- --watch"
+    volumes:
+      - ../packages/base:/var/www/html/packages/base
+    environment:
+      - NODE_ENV=development

.gitea/workflows/build.yaml

@@ -24,14 +24,18 @@ jobs:
         with:
           php-version: ${{ env.PHP_VERSION }}
 
-      - name: Check if composer.json exists
-        id: check_files
-        uses: andstor/file-existence-action@87d74d4732ddb824259d80c8a508c0124bf1c673
-        with:
-          files: 'composer.json'
-
       - name: Run composer install if composer.json exists
-        if: steps.check_files.outputs.files_exists == 'true'
         run: | 
           rm composer.lock
           composer validate --no-check-publish
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build CSS
+        run: npm run build:css

.gitea/workflows/deploy.yaml

@@ -28,17 +28,23 @@ jobs:
         with:
           php-version: ${{ env.PHP_VERSION }}
 
-      - name: Check if composer.json exists
-        id: check_files
-        uses: andstor/file-existence-action@87d74d4732ddb824259d80c8a508c0124bf1c673
-        with:
-          files: 'composer.json'
-
       - name: Run composer install if composer.json exists
-        if: steps.check_files.outputs.files_exists == 'true'
         run: | 
           composer validate --no-check-publish && composer install --prefer-dist --no-progress --ignore-platform-reqs
-          tar -czf typo3.tar.gz bin public packages config vendor build composer.json composer.lock
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build CSS
+        run: npm run build:css
+
+      - name: Create Artifact
+        run:  tar -czf typo3.tar.gz bin public packages config vendor build composer.json composer.lock
 
       - uses: actions/upload-artifact@v3
         with:
@@ -96,28 +102,28 @@ jobs:
           dep: --file=./build/deploy.php release:switch stage
           private-key: ${{secrets.STAGE_KEY}}
 
-  # deploy-production:
+  deploy-production:
-  #   needs: build
+    needs: build
-  #   runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-  #   steps:
+    steps:
-  #     - name: Setup PHP
+      - name: Setup PHP
-  #       uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
+        uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
-  #       with:
+        with:
-  #         php-version: ${{ env.PHP_VERSION }}
+          php-version: ${{ env.PHP_VERSION }}
-  #     - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v3
-  #       with:
+        with:
-  #         name: typo3
+          name: typo3
-  #     - name: Extract artifact
+      - name: Extract artifact
-  #       run: |
+        run: |
-  #         tar xf typo3.tar.gz
+          tar xf typo3.tar.gz
-  #         rm typo3.tar.gz
+          rm typo3.tar.gz
-  #     - name: Install ssh agent and rsync
+      - name: Install ssh agent and rsync
-  #       run: |
+        run: |
-  #         apt update
+          apt update
-  #         apt install -y openssh-client rsync
+          apt install -y openssh-client rsync
-  #     - name: Deploy
+      - name: Deploy
-  #       uses: deployphp/action@v1
+        uses: deployphp/action@v1
-  #       with:
+        with:
-  #         deployer-binary: "./bin/dep"
+          deployer-binary: "./bin/dep"
-  #         dep: --file=./build/deploy.php release:create production
+          dep: --file=./build/deploy.php release:create production
-  #         private-key: ${{secrets.PROD_KEY}}
+          private-key: ${{secrets.PROD_KEY}}

.gitea/workflows/release.yaml

@@ -1,8 +1,9 @@
 name: Release
 
 on:
-  release:
+  push:
-    types: [published]
+    tags:
+      - 'v*.*'  # Adjust this pattern based on your tagging
 
 env:
   PHP_VERSION: '8.3'                  # set this to the PHP version to use
@@ -20,13 +21,7 @@ jobs:
         uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
         with:
           php-version: ${{ env.PHP_VERSION }}
-      - name: Check if composer.json exists
+      - name: Run composer install
-        id: check_files
-        uses: andstor/file-existence-action@87d74d4732ddb824259d80c8a508c0124bf1c673
-        with:
-          files: 'composer.json'
-      - name: Run composer install if composer.json exists
-        if: steps.check_files.outputs.files_exists == 'true'
         run: | 
           composer validate --no-check-publish && composer install --prefer-dist --no-progress --ignore-platform-reqs
       - name: Install ssh agent, rsync

.gitignore

@@ -2,7 +2,7 @@
 .idea
 mbox
 nbproject
-/var/*
+/var
 !/var/labels
 /vendor
 /public/_assets
@@ -15,4 +15,6 @@ nbproject
 /backup
 /bin
 /public
+/packages/base/Resources/Public/Css
+/node_modules
 composer.lock

build/deploy.php

@@ -130,10 +130,10 @@ task('deploy', [
 ]);
 
 host('stage')
-    ->set('cachetool', '/var/run/phpfpm/gbv-aktuell.cloonar.dev.sock');
+    ->set('cachetool', '/var/run/phpfpm/lena-schilling.cloonar.dev.sock');
 
 host('production')
-    ->set('cachetool', '/var/run/phpfpm/gbv-aktuell.at.sock');
+    ->set('cachetool', '/var/run/phpfpm/lena-schilling.at.sock');
 
 after('deploy:symlink', 'cachetool:clear:opcache');
 // unlock after failure

build/servers.yaml

@@ -2,7 +2,7 @@ hosts:
   production:
       stage: production
       hostname: web-arm.cloonar.com
-      remote_user: gbv_aktuell_at
+      remote_user: lena_schilling_at
       writable_mode: chmod
       forward_agent: true
       deploy_path: ~/

config/sites/default/config.yaml

@@ -1,4 +1,9 @@
-base: /
+base: https://lena-schilling.at
+baseVariants:
+  - base: https://lena-schilling.ddev.site
+    condition: 'applicationContext == "Development/Ddev"'
+  - base: https://lena-schilling.cloonar.dev
+    condition: 'applicationContext == "Production/Staging"'
 dependencies:
   - georgringer/news
   - typo3/redirects
@@ -19,3 +24,13 @@ languages:
     websiteTitle: ''
 rootPageId: 1
 websiteTitle: ''
+favicons:
+  full_name: 'Lena Schilling'
+  short_name: 'Lena Schilling'
+  theme_color: '#233600'
+  favicon_path: 'EXT:base/Resources/Public/Images/Favicons/'
+  favicon_svg: favicon.svg
+  favicon_png: favicon-96x96.png
+  apple_touch_icon: apple-touch-icon.png
+  android_192: web-app-manifest-192x192.png
+  android_512: web-app-manifest-512x512.png

config/system/settings.php

@@ -109,6 +109,7 @@ return [
     ],
     'GFX' => [
         'jpg_quality' => '80',
+        'processor_path' => '/run/current-system/sw/bin/',
     ],
     'MAIL' => [
         'defaultMailFromAddress' => 'no-reply@example.com',

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "lena-schilling-website",
+  "version": "1.0.0",
+  "scripts": {
+    "build:css": "webpack --config webpack.config.js"
+  },
+  "devDependencies": {
+    "css-loader": "^6.7.3",
+    "mini-css-extract-plugin": "^2.7.5",
+    "sass": "^1.63.4",
+    "sass-loader": "^13.3.2",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

packages/base/Configuration/RTE/Default.yaml

@@ -9,6 +9,10 @@ editor:
 
         stylesSet:
             - { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
+            - { name: "Small", element: "p", attributes: { 'class': 'small' } }
+            - { name: "Big Number", element: "span", attributes: { 'class': 'big-number' } }
+
+            - { name: "Button", element: "a", attributes: { 'class': 'btn' } }
 
         toolbarGroups:
             - { name: styles, groups: [ format, styles ] }
@@ -22,7 +26,7 @@ editor:
             - { name: tools, groups: [ table, specialchar ] }
             - { name: document, groups: [ mode ] }
 
-        format_tags: "p;h1;h2;h3;h4;h5;pre"
+        format_tags: "p;h3;h4;h5;pre"
 
         justifyClasses:
             - text-left

packages/base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript

@@ -0,0 +1,4 @@
+# Define the footer menu PID as a constant to make it easily configurable
+page {
+    footerMenuPid = 7
+}

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -1,10 +1,12 @@
 # Include existing configuration
 <INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
+# Include constants
+#<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
 
 page = PAGE
 page {
   typeNum = 0
-  shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
+  shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png
   10 = PAGEVIEW
   10 {
     paths {
@@ -23,6 +25,12 @@ page {
             as = mainnavigation
         }
         30 = page-content
+        40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
+        40 {
+            special = directory
+            special.value = 7
+            as = metanavigation
+        }
     }
   }
 
@@ -38,16 +46,48 @@ page {
   }
 
   includeCSS {
-    main = EXT:base/Resources/Public/Scss/main.scss
+    main = EXT:base/Resources/Public/Css/main.css
+    fancybox = EXT:base/Resources/Public/Vendor/fancybox/fancybox.css
   }
 
   includeJSLibs {
     navigation = EXT:base/Resources/Public/JavaScript/navigation.js
+    fadein = EXT:base/Resources/Public/JavaScript/fade-in.js
+    fancybox = EXT:base/Resources/Public/Vendor/fancybox/fancybox.umd.js
   }
 
   includeJSFooter {
     test_scripts = EXT:base/Resources/Public/JavaScript/main.js
   }
+
+  # Use includeAssets to properly preload fonts with TYPO3 v13 asset handling.
+  includeAssets {
+    hajimeSansTtf {
+      path = EXT:base/Resources/Public/Fonts/Hajime-Sans.woff2
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/woff2
+        crossorigin = anonymous
+      }
+    }
+
+    interVariable {
+      path = EXT:base/Resources/Public/Fonts/Inter.woff2
+      type = font
+      resourceType = font
+      preload = 1
+      as = font
+      attributes {
+        type = font/woff2
+        crossorigin = anonymous
+      }
+    }
+  }
+
+  footerMenuPid = {$footerMenuPid}
 }
 
 lib.contentElement {
@@ -72,3 +112,17 @@ lib.parseFunc_RTE {
     }
   }
 }
+
+# Define the footer menu to show subpages of the configured footerMenuPid
+# special = directory will list all direct subpages of the given pid, not the page itself
+lib.footerMenu = HMENU
+lib.footerMenu {
+  special = directory
+  special.value = {$footerMenuPid}
+  1 = TMENU
+  1 {
+    wrap = <ul>|</ul>
+    NO = 1
+    NO.wrapItemAndSub = <li>|</li>
+  }
+}

packages/base/Configuration/Sets/SitePackage/page.tsconfig

@@ -7,15 +7,12 @@ RTE {
 }
 
 TCEFORM {
-    pages {
-
-    }
   tt_content {
-
+    CType {
+      keepItems = cloonar_header,cloonar_text,cloonar_textimage,news_newsliststicky,news_pi1,cloonar_hero,cloonar_stats
+    }
   }
 }
 
 TCEMAIN {
-
 }
-

packages/base/Configuration/Sets/SitePackage/setup.typoscript

@@ -16,17 +16,3 @@ plugin.tx_news {
     }
   }
 }
-
-# Define footerMenu here
-lib.footerMenu = HMENU
-lib.footerMenu {
-  special = directory
-  special.value = {$page.footerMenuPid}
-  1 = TMENU
-  1 {
-    NO {
-      wrapItemAndSub = <li>|</li>
-      stdWrap.noTrimWrap = | | |
-    }
-  }
-}

packages/base/Configuration/TCA/Overrides/tt_content.php

@@ -9,4 +9,5 @@ $GLOBALS['TCA']['tt_content']['columns']['imageorient']['config'] = [
         ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.25', 25],
         ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.26', 26],
     ],
+    'default' => 25,
 ];

packages/base/Configuration/TCA/Overrides/tx_news_domain_model_news.php

@@ -0,0 +1,18 @@
+<?php
+defined('TYPO3') or die('Access denied.');
+
+// Restrict cropping aspect ratio for images in news entries to 16:9
+$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['fal_media']['config']['overrideChildTca']['columns']['crop']['config'] = [
+    'cropVariants' => [
+        'default' => [
+            'title' => 'Default',
+            'allowedAspectRatios' => [
+                '16-9' => [
+                    'title' => '16:9',
+                    'value' => 16 / 9
+                ],
+            ],
+            'selectedRatio' => '16-9',
+        ],
+    ],
+];

packages/base/ContentBlocks/ContentElements/header/assets/frontend.css

@@ -0,0 +1 @@
+/* CSS for header content element */

packages/base/ContentBlocks/ContentElements/header/config.yaml

@@ -0,0 +1,10 @@
+name: cloonar/header
+typeName: cloonar_header
+group: default
+prefixFields: true
+prefixType: full
+label: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.title
+description: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.description
+fields:
+  - identifier: header
+    useExistingField: true

packages/base/ContentBlocks/ContentElements/header/language/labels.xlf

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff version="1.0">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>Header</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>A simple content element that displays a header as an H1.</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

packages/base/ContentBlocks/ContentElements/header/templates/backend-preview.html

@@ -0,0 +1,15 @@
+<html
+    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:layout name="Preview"/>
+<f:section name="Header">
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
+</f:section>
+<f:section name="Content">
+</f:section>
+</html>

packages/base/ContentBlocks/ContentElements/header/templates/frontend.html

@@ -0,0 +1,4 @@
+<f:layout name="Default" />
+<f:section name="Main">
+    <h1><span class="tapered">{data.header}</span></h1>
+</f:section>

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -1,12 +1,17 @@
 .frame-type-cloonar_hero {
   position: relative;
   z-index: 1;
+  /* Use a relative path to correctly load the image */
   background: #cecece;
+  background-repeat: repeat;
+  background: url('../../../Images/background.jpg') repeat;
 }
 
-
 .frame-type-cloonar_hero + .frame {
-    margin-top: -10rem;
+    margin-top: -10.4rem;
+}
+.frame-type-cloonar_hero .container {
+    padding-bottom: 3rem;
 }
 
 /* Inner container with white background and padding */
@@ -23,22 +28,26 @@
 }
 
 .frame-type-cloonar_hero .hero-subheader {
-  font-size: 1rem;
+  font-size: 2rem;
-  color: #3c6418;
+  color: var(--bs-primary);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0rem;
+  line-height: 1;
 }
 
 .frame-type-cloonar_hero .hero-title {
-  font-size: 1.5rem;
+  text-transform: uppercase;
-  font-weight: bold;
+  font-size: 4rem;
-  color: #3c6418;
+  color: var(--bs-primary);
-  margin: 0 0 1rem 0;
+  line-height: 1;
-  line-height: 1.2;
+  margin-bottom: 2rem;
+}
+
+.frame-type-cloonar_hero h4 {
     text-transform: uppercase;
 }
 
 .frame-type-cloonar_hero .hero-text {
-  font-size: 0.9rem;
+  font-size: 1rem;
   color: #333;
   line-height: 1.4;
   margin-bottom: 1rem;
@@ -51,43 +60,45 @@
   margin-bottom: 1rem;
 }
 
+/* Smaller icons on mobile */
 .frame-type-cloonar_hero .social-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #3c6418;
-  color: #fff;
   font-size: 1rem;
+  padding: 1rem;
   text-decoration: none;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
   transition: background 0.3s;
 }
 
-.frame-type-cloonar_hero .social-icon:hover {
-  background: #1e3810;
-}
-
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
+  align-self: flex-end;
+  width: 100%;
 }
 
 .frame-type-cloonar_hero .hero-image {
-  max-width: 200px;
   width: 100%;
   height: auto;
   border-radius: 0.5rem;
 }
 
+.frame-type-cloonar_hero img {
+    width: 100%;
+}
+
 @media (min-width: 768px) {
+    .frame-type-cloonar_hero .container {
+        padding-bottom: 4rem;
+    }
+
   .frame-type-cloonar_hero .hero-subheader {
-    font-size: 1.2rem;
+    font-size: 3rem;
   }
 
   .frame-type-cloonar_hero .hero-title {
-    font-size: 2rem;
+    font-size: 5rem;
-    margin-bottom: 1.2rem;
   }
 
   .frame-type-cloonar_hero .hero-text {
@@ -96,24 +107,24 @@
 
   .frame-type-cloonar_hero .social-icon {
     width: 2.5rem;
-    height: 2.5rem;
+    height: 2rem;
-    font-size: 1.2rem;
+    font-size: 2rem;
+    padding: 2.375rem;
   }
 
   .frame-type-cloonar_hero .hero-image {
-    max-width: 250px;
   }
 }
 
 @media (min-width: 992px) {
   .frame-type-cloonar_hero .hero {
     display: grid;
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: 1fr 40% 7.125rem;
+    grid-template-rows: auto auto 1fr;
     grid-template-areas:
-      "subheader image icons"
+      "subheader    image social"
-      "title    image icons"
+      "title        image social"
-      "text     image icons"
+      "text         image social";
-      "social   image icons";
     align-items: start;
     justify-items: start;
     text-align: left;
@@ -121,14 +132,10 @@
 
   .frame-type-cloonar_hero .hero-subheader {
     grid-area: subheader;
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
   }
 
   .frame-type-cloonar_hero .hero-title {
     grid-area: title;
-    font-size: 3rem;
-    margin-bottom: 1.5rem;
   }
 
   .frame-type-cloonar_hero .hero-text {
@@ -144,6 +151,7 @@
     gap: 1rem;
     margin-bottom: 0;
     align-items: flex-start;
+    align-self: center;
   }
 
   .frame-type-cloonar_hero .hero-image-wrapper {
@@ -155,6 +163,5 @@
   }
 
   .frame-type-cloonar_hero .hero-image {
-    max-width: 300px;
   }
 }

packages/base/ContentBlocks/ContentElements/hero/config.yaml

@@ -4,6 +4,9 @@ group: default
 prefixFields: true
 prefixType: full
 fields:
+  -
+    identifier: subheader
+    useExistingField: true
   -
     identifier: header
     useExistingField: true

packages/base/ContentBlocks/ContentElements/hero/language/labels.xlf

@@ -7,7 +7,7 @@
 				<source>Hero</source>
 			</trans-unit>
 			<trans-unit id="description">
-				<source>Description for Content Element cloonar/hero</source>
+				<source>Hero Element should always be the first Element of the page</source>
 			</trans-unit>
 		</body>
 	</file>

packages/base/ContentBlocks/ContentElements/hero/templates/backend-preview.html

@@ -2,20 +2,27 @@
     xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
-
 <f:layout name="Preview"/>
 
 <f:section name="Header">
-    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">{data.header}</be:link.editRecord>
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">
-    Preview for Content Block: cloonar/hero
+    <f:if condition="{data.image}">
-</f:section>
+        <f:image image="{data.image.0}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+    </f:if>
 
-<f:comment>
+    <f:if condition="{data.bodytext}">
-<!-- Uncomment to override preview footer -->
+        <p>
-<f:section name="Footer">
+            <f:format.crop maxCharacters="80">
-    My custom Footer
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </f:format.crop>
+        </p>
+    </f:if>
 </f:section>
-</f:comment>
+</html>

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -8,20 +8,49 @@
 
   <div class="hero-inner">
     <div class="hero">
-      <div class="hero-subheader">{data.subheader}</div>
+      <h2 class="hero-subheader">{data.subheader}</h2>
-      <h2 class="hero-title">{data.header}</h2>
+      <h1 class="hero-title">{data.header}</h1>
       <div class="hero-text">
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-        <a href="#" class="social-icon">X</a>
+        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="#" class="social-icon">Instagram</a>
+        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
-        <a href="#" class="social-icon">TikTok</a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+            <figure>
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 80vw,
+                         (max-width: 768px) 80px,
+                         430px" />
+
+                <!-- Fallback source -->
+              <source
+                srcset="
+                  {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                  {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
+                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
+                sizes="(max-width: 320px) 80vw,
+                       (max-width: 768px) 80vw,
+                       430px" />
+              <f:image
+                image="{data.image.0}"
+                treatIdAsReference="1"
+                fetchpriority="high"
+                cropVariant="default"
+                width="430c"
+                alt="Hero Image"
+                loading="lazy"
+                class="hero-image" />
+            </figure>
           </f:then>
           <f:else>
             <p>No image available</p>

packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css

@@ -1,46 +1,44 @@
 .frame-type-cloonar_stats .stats-wrapper {
     display: flex;
     flex-wrap: wrap;
-  gap: 2rem;
+    justify-content: flex-start;
-  justify-content: space-between;
     align-items: flex-start;
     position: relative;
-  z-index: 10; /* Ensure it's on top of the hero container */
+    z-index: 10;
     background: #fff;
-  padding: 3rem 1rem;
+    padding: 1rem;
     max-width: 1140px;
     margin-left: auto;
     margin-right: auto;
+    gap: 1rem; /* maintain gap on mobile */
 }
 
-/* Each paragraph is treated as a column */
+/* Two columns on mobile */
 .frame-type-cloonar_stats .stats-wrapper p {
-  flex: 1 1 calc(25% - 2rem);
+    box-sizing: border-box;
-  min-width: 150px;
+    flex: 0 0 calc((100% - 1rem) / 2);
+    max-width: calc((100% - 1rem) / 2);
     text-align: center;
     margin-bottom: 1rem;
+    text-transform: uppercase;
+    color: var(--bs-primary);
 }
 
-/* Lead paragraphs have larger text for numbers */
+.frame-type-cloonar_stats .stats-wrapper span.big-number {
-.frame-type-cloonar_stats .stats-wrapper p.lead {
+    font-size: 4rem;
-  font-size: 2rem;
+    font-family: 'Hajime Sans', sans-serif;
-  font-weight: bold;
+    text-transform: none;
-  color: #3c6418;
-  margin-bottom: 0.5rem;
 }
 
-.frame-type-cloonar_stats .stats-wrapper p:not(.lead) {
+@media (min-width: 768px) {
-  font-size: 0.9rem;
-  color: #444;
-}
-
-@media (max-width: 768px) {
   .frame-type-cloonar_stats .stats-wrapper {
-    gap: 1rem;
+      padding: 3rem 1rem;
-    padding: 2rem 1rem;
+      gap: 2rem; /* increase gap on desktop */
-    margin-top: -5rem; /* Adjust as needed for smaller screens */
   }
+
+  /* Four columns on desktop */
   .frame-type-cloonar_stats .stats-wrapper p {
-    flex: 1 1 100%;
+      flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */
+      max-width: calc((100% - 6rem) / 4);
   }
 }

packages/base/ContentBlocks/ContentElements/stats/templates/backend-preview.html

@@ -5,9 +5,6 @@
 <f:layout name="Preview"/>
 
 <f:section name="Header">
-    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
-        Statistics Preview
-    </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">

packages/base/ContentBlocks/ContentElements/text/assets/frontend.css

@@ -0,0 +1,4 @@
+/* CSS for text content element */
+.frame-type-cloonar_text .text-bodytext {
+    max-width: 750px;
+}

packages/base/ContentBlocks/ContentElements/text/config.yaml

@@ -0,0 +1,14 @@
+name: cloonar/text
+typeName: cloonar_text
+group: default
+prefixFields: true
+prefixType: full
+label: LLL:EXT:base/ContentBlocks/ContentElements/text/language/labels.xlf:text.title
+description: LLL:EXT:base/ContentBlocks/ContentElements/text/language/labels.xlf:text.description
+fields:
+  - identifier: header
+    useExistingField: true
+  - identifier: bodytext
+    type: Textarea
+    enableRichtext: true
+    useExistingField: true

packages/base/ContentBlocks/ContentElements/text/language/labels.xlf

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff version="1.0">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>Text</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>A text element featuring a headline (H2) and a rich-text body field.</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

packages/base/ContentBlocks/ContentElements/text/templates/backend-preview.html

@@ -0,0 +1,22 @@
+<html
+    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:layout name="Preview"/>
+<f:section name="Header">
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
+</f:section>
+<f:section name="Content">
+    <f:if condition="{data.bodytext}">
+        <p>
+            <f:format.crop maxCharacters="80">
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </f:format.crop>
+        </p>
+    </f:if>
+</f:section>
+</html>

packages/base/ContentBlocks/ContentElements/text/templates/frontend.html

@@ -0,0 +1,14 @@
+<f:layout name="Default" />
+<f:section name="Main">
+    <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
+    <div class="fade-in-on-scroll">
+        <f:if condition="{data.header}">
+            <f:then><h2>{data.header}</h2></f:then>
+        </f:if>
+        <f:if condition="{data.bodytext}">
+            <f:then>
+                <div class="text-bodytext"><f:format.html>{data.bodytext}</f:format.html></div>
+            </f:then>
+        </f:if>
+    </div>
+</f:section>

packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css

@@ -1,45 +1,52 @@
-.frame-type-cloonar_textimage {
-  margin: 2rem 0;
-}
-
-/* Mobile-first: column layout by default */
 .textimage-container {
+    --gap: 2rem;
     display: flex;
     flex-direction: column;
-  gap: 2rem;
+    gap: var(--gap);
 }
 
 .textimage-wrapper {
   width: 100%;
 }
 
-.textimage-header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
 .textimage-text {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .textimage-image-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.textimage-picture {
+  display: block;
+  max-width: 100%;
+}
+
 .textimage-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  display: block;
 }
 
-/* Image positions: 25 = left, 26 = right
+/* Image positions: 25 = left, 26 = right */
-   On larger screens, adjust the layout */
+.textimage-container.image-pos-25 {
+  flex-direction: column;
+}
+
+.textimage-container.image-pos-26 {
+  flex-direction: column;
+}
+
+/* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
+    .textimage-container.size-25 {
+        --gap: 8rem;
+    }
+
   .textimage-container.image-pos-25 {
     flex-direction: row;
   }
@@ -48,8 +55,21 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
+    .textimage-image-wrapper.size-25 {
-  .textimage-image-wrapper {
+        flex: 0 0 calc(40% - (var(--gap) / 2));
-    flex: 1 1 50%;
+        max-width: calc(40% - (var(--gap) / 2));
+    }
+    .textimage-wrapper.size-25 {
+        flex: 0 0 calc(40% - (var(--gap) / 2));
+        max-width: calc(40% - (var(--gap) / 2));
+    }
+
+    .textimage-image-wrapper.size-50 {
+        flex: 0 0 calc(50% - (var(--gap) / 2));
+        max-width: calc(50% - (var(--gap) / 2));
+    }
+
+    .textimage-wrapper {
+    flex: 1;
     }
 }

packages/base/ContentBlocks/ContentElements/textimage/config.yaml

@@ -1,11 +1,12 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: true
+prefixFields: false
-prefixType: full
 fields:
   - identifier: header
     useExistingField: true
+  - identifier: subheader
+    useExistingField: true
   - identifier: bodytext
     type: Textarea
     enableRichtext: true
@@ -13,7 +14,16 @@ fields:
   - identifier: image
     type: File
     properties:
-      allowed: [jpg, jpeg, png, gif]
+      allowed: [jpg, jpeg, png, gif, webp]
     useExistingField: true
   - identifier: imageorient
     useExistingField: true
+  - identifier: imagesize
+    type: Select
+    renderType: selectSingle
+    default: 2
+    items:
+      - label: 25%
+        value: 1
+      - label: 50%
+        value: 2

packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html

@@ -7,20 +7,22 @@
 <f:section name="Header">
     <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
         <f:if condition="{data.header}">
-          <f:then>{data.header}</f:then>
+            <f:then><strong>{data.header}</strong></f:then>
-          <f:else>Text/Image Element</f:else>
         </f:if>
     </be:link.editRecord>
 </f:section>
 
 <f:section name="Content">
+    <f:if condition="{data.image}">
+        <f:image image="{data.image.0}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+    </f:if>
+
     <f:if condition="{data.bodytext}">
-    <f:then>
+        <p>
-      <p>Preview: <f:format.crop maxCharacters="50">{data.bodytext}</f:format.crop></p>
+            <f:format.crop maxCharacters="80">
-    </f:then>
+              <f:format.stripTags>{data.bodytext}</f:format.stripTags>
-    <f:else>
+            </f:format.crop>
-      <p>No text available</p>
+        </p>
-    </f:else>
     </f:if>
 </f:section>
 </html>

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -1,13 +1,63 @@
 <f:layout name="Default" />
 
-<f:section name="Header" />
+<f:section name="Header"></f:section>
 <f:section name="Main">
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
-  <div class="textimage-container image-pos-{data.imageorient}">
+  <!-- Determine size class based on imagesize field -->
-    <div class="textimage-wrapper">
+  <f:variable name="sizeClass" value="" />
+  <f:if condition="{data.imagesize} == 1">
+    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
+  </f:if>
+  <f:if condition="{data.imagesize} == 2">
+    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
+  </f:if>
+
+  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
+    <div class="textimage-image-wrapper {sizeClass}">
+      <f:if condition="{data.image}">
+        <f:then>
+          <figure class="textimage-picture">
+            <!-- WEBP source -->
+            <source
+              type="image/webp"
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+              sizes="(max-width: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+
+            <!-- Fallback source -->
+            <source
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                {f:uri.image(image:data.image.0, width:'400c', cropVariant:'default')} 768w,
+                {f:uri.image(image:data.image.0, width:'538c', cropVariant:'default')} 1024w"
+              sizes="(max-width: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+
+            <f:image
+              image="{data.image.0}"
+              treatIdAsReference="1"
+              cropVariant="default"
+              width="538c"
+              alt="{data.image.0.alternative}"
+              class="textimage-image"
+            />
+          </figure>
+        </f:then>
+        <f:else>
+          <p>No image available</p>
+        </f:else>
+      </f:if>
+    </div>
+    <div class="textimage-wrapper {sizeClass}">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
+        <h3 class="textimage-subheader">{data.subheader}</h3>
       </f:if>
       <f:if condition="{data.bodytext}">
         <div class="textimage-text">
@@ -15,15 +65,5 @@
         </div>
       </f:if>
     </div>
-    <div class="textimage-image-wrapper">
-      <f:if condition="{data.image}">
-        <f:then>
-          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
-        </f:then>
-        <f:else>
-          <p>No image available</p>
-        </f:else>
-      </f:if>
-    </div>
   </div>
 </f:section>

packages/base/Resources/Private/Extensions/News/Partials/List/Item.html

@@ -1,12 +1,43 @@
-<div class="article news-list-item">
+<div class="news-list-item fade-in-on-scroll{f:if(condition: '{big}', then: ' news-list-item-big')}">
+    <f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
         <f:if condition="{newsItem.media}">
-        <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+            <f:then>
+              <picture>
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50px,
+                         400px" />
+
+                <!-- Fallback source -->
+                <source
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50vw,
+                         400px" />
+                <f:image
+                  image="{newsItem.media.0}"
+                  treatIdAsReference="1"
+                  cropVariant="default"
+                  width="1024c"
+                  alt="{newsItem.title}"
+                  class="news-item-grid-image" />
+              </picture>
+            </f:then>
         </f:if>
         <div class="news-item-content">
-        <f:if condition="{newsItem.firstCategory}">
+            <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
-            <div class="news-item-category">{newsItem.firstCategory.title}</div>
+              <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
-        </f:if>
+            </time>
-        <h5 class="news-item-title">{newsItem.title}</h5>
+            <h3 class="news-item-title">{newsItem.title}</h3>
-        <f:link.page pageUid="{newsItem.link}" class="news-item-link"></f:link.page>
         </div>
+    </f:link.page>
 </div>

packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html

@@ -1,3 +1,4 @@
+<f:if condition="{pagination.allPageNumbers -> f:count()} > 1">
 <ul class="f3-widget-paginator">
     <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}">
         <li class="previous">
@@ -43,3 +44,4 @@
         </li>
     </f:if>
 </ul>
+</f:if>

packages/base/Resources/Private/Extensions/News/Templates/News/Detail.html

@@ -0,0 +1,105 @@
+<f:layout name="General" />
+
+<f:section name="content">
+    <script>
+        // Initialize Fancybox for elements with data-fancybox="gallery"
+        document.addEventListener("DOMContentLoaded", function() {
+            Fancybox.bind("[data-fancybox='gallery']", {});
+        });
+    </script>
+
+    <!-- First image if present -->
+    <f:if condition="{newsItem.media}">
+        <div class="news-detail__main-image">
+            <figure>
+                <picture>
+                    <source
+                        type="image/webp"
+                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320', fileExtension:'webp')} 320w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640', fileExtension:'webp')} 640w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024', fileExtension:'webp')} 1024w"
+                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                    />
+                    <source
+                        type="image/jpeg"
+                        srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320')} 320w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'640')} 640w,
+                                {f:uri.image(image: newsItem.media.0.originalResource, width:'1024')} 1024w"
+                        sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                    />
+                    <img
+                        src="{f:uri.image(image: newsItem.media.0.originalResource, width:'1024')}"
+                        alt="{newsItem.media.0.originalResource.alternative}"
+                        title="{newsItem.media.0.originalResource.title}"
+                        loading="lazy"
+                    />
+                </picture>
+            </figure>
+        </div>
+    </f:if>
+
+    <!-- News title -->
+    <h1 class="news-detail__title">{newsItem.title}</h1>
+    <time class="news-detail__time" itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
+        <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
+    </time>
+
+
+    <!-- Teaser text -->
+    <f:if condition="{newsItem.teaser}">
+        <div class="news-detail__teaser">
+            {newsItem.teaser}
+        </div>
+    </f:if>
+
+    <!-- Bodytext -->
+    <div class="news-detail__bodytext">
+        <f:format.html>
+            {newsItem.bodytext}
+        </f:format.html>
+    </div>
+
+    <!-- Content elements if present -->
+    <f:if condition="{newsItem.contentElements}">
+        <div class="news-detail__content-elements">
+            <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
+        </div>
+    </f:if>
+
+    <!-- Gallery if more than one picture -->
+    <f:if condition="{f:count(subject: newsItem.media)} > 1">
+        <div class="news-detail__gallery news-detail__gallery--grid">
+            <f:for each="{newsItem.media}" as="mediaItem">
+                <a href="{f:uri.image(image: mediaItem.originalResource)}"
+                   data-fancybox="gallery"
+                   data-caption="{mediaItem.originalResource.title}"
+                   class="news-detail__gallery-link">
+                    <figure class="news-detail__gallery-item">
+                        <picture>
+                            <source
+                                type="image/webp"
+                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320', fileExtension:'webp')} 320w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'640', fileExtension:'webp')} 640w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'1024', fileExtension:'webp')} 1024w"
+                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                            />
+                            <source
+                                type="image/jpeg"
+                                srcset="{f:uri.image(image: mediaItem.originalResource, width:'320')} 320w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'640')} 640w,
+                                        {f:uri.image(image: mediaItem.originalResource, width:'1024')} 1024w"
+                                sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
+                            />
+                            <img
+                                src="{f:uri.image(image: mediaItem.originalResource, width:'1024')}"
+                                alt="{mediaItem.originalResource.alternative}"
+                                title="{mediaItem.originalResource.title}"
+                                loading="lazy"
+                            />
+                        </picture>
+                    </figure>
+                </a>
+            </f:for>
+        </div>
+    </f:if>
+</f:section>

packages/base/Resources/Private/Extensions/News/Templates/News/List.html

@@ -14,7 +14,7 @@
     <f:defaultCase>
         <f:if condition="{iterator.isFirst}">
             <f:then>
-                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator,big:1}" />
             </f:then>
             <f:else>
                 <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
@@ -25,14 +25,20 @@
 </f:section>
 
 <f:section name="content">
+  <f:if condition="{settings.listPid}">
+    <f:then>
       <div class="header">
         <div class="title">
           <h2>{contentObjectData.header}</h2>
         </div>
-    <f:if condition="{settings.listPid}">
+        <!-- Desktop button -->
-        <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn">Alle Artikel</f:link.page>
+        <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn header-btn">Alle Artikel</f:link.page>
-    </f:if>
       </div>
+    </f:then>
+    <f:else>
+        <h1><span class="tapered">{contentObjectData.header}</span></h1>
+    </f:else>
+  </f:if>
 	<!--TYPO3SEARCH_end-->
 	<f:if condition="{news}">
 		<f:then>
@@ -53,6 +59,12 @@
             </f:else>
           </f:if>
       </div>
+      <f:if condition="{settings.listPid}">
+        <f:then>
+          <!-- Mobile button below the news -->
+          <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn mobile-btn">Alle Artikel</f:link.page>
+        </f:then>
+      </f:if>
 		</f:then>
 		<f:else>
 			<div class="no-news-found">

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -9,13 +9,30 @@
 </main>
 
 <footer class="site-footer">
+    <div class="container">
         <div class="site-footer__top">
-    <div class="container site-footer__grid">
+            <div class="site-footer__grid">
                 <div class="site-footer__left">
+                    <div class="frame site-footer__logo">
+                        <div class="container">
+                            <f:image src="EXT:base/Resources/Public/Images/greens-efa-logo.png" alt="Greens EFA Logo" />
+                            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Lena Schilling Logo" />
+                        </div>
+                    </div>
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
                 </div>
                 <div class="site-footer__right">
                     <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
+                    <div class="frame site-footer__social">
+                        <div class="container">
+                            <a href="https://www.instagram.com/lena.ats/" target="_blank" rel="noopener noreferrer" title="Instagram">
+                                <i class="ci ci-instagram"></i>
+                            </a>
+                            <a href="https://www.tiktok.com/@dieschilling" target="_blank" rel="noopener noreferrer" title="TikTok">
+                                <i class="ci ci-tiktok"></i>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -23,9 +40,15 @@
         <hr class="site-footer__divider" />
 
         <div class="site-footer__bottom">
-    <div class="container site-footer__bottom-grid">
+            <div class="site-footer__bottom-grid">
                 <ul class="site-footer__legal">
-        <f:cObject typoscriptObjectPath="lib.footerMenu" />
+                    <f:for each="{metanavigation}" as="item">
+                        <li{f:if(condition: item.active, then:' class="active"')}>
+                            <a href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}">
+                                <span>{item.title}</span>
+                            </a>
+                        </li>
+                    </f:for>
                 </ul>
                 <p class="site-footer__copyright">© All Right Reserved</p>
             </div>

packages/base/Resources/Private/PageView/Partials/Navigation/Main.html

@@ -1,6 +1,8 @@
 <nav class="main-nav" id="mainNav">
     <div class="container">
-        <a href="/" class="nav-logo">Brand Logo</a>
+        <a href="/" class="nav-logo">
+            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" />
+        </a>
         <button class="nav-toggle" id="navToggle" aria-label="Toggle Menu">
             <span class="nav-toggle-icon"></span>
         </button>

packages/base/Resources/Public/Favicons/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="137" height="133"><svg id="SvgjsSvg1005" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 133"><defs><style>.cls-1{fill:#f4ad07;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#233600;}</style></defs><circle class="cls-1" cx="68" cy="66" r="60"></circle><path class="cls-2" d="m98.01,102.96c-.33.17-.65.38-.99.52-.33.13-.68.24-1.03.29-.44.06-2,.22-2.35.3-.17.04-.34.1-.52.12-.96.15-1.92.28-2.88.42-.14.02-2.98.14-3.3.17-.96.08-1.92.18-2.88.22-1.48.06-2.97.08-4.46.1-.44,0-3.01.04-3.84.21-.66.14-1.34.09-2.01.1-1.51.02-10,.11-10.29.08-.73-.06-1.46-.08-2.18-.2,0,0-7.46-.25-7.76-.27-.29-.02-.58-.03-.88-.02h-.01s-.07,0-.11,0c-1.02.04-4.35.03-4.39-.03-.59-.04-1.18-.12-1.76-.26-.55-.13-1.12-.21-1.67-.32-.05-.27-.13-.54-.14-.82-.06-1.75-.19-3.49-.14-5.24.1-3.73-.1-7.47.18-11.2.23-3.05.19-6.11.28-9.17.04-1.41.12-2.81.13-4.22.05-4.66-.24-9.31-.3-13.97-.04-2.77.04-5.54.06-8.3,0-.19.03-.39.02-.58-.1-2.67.24-5.32.24-7.99,0-2.66.07-5.33.11-7.99.01-.87.04-1.74.03-2.61-.04-2.37-.2-4.73-.43-7.08-.05-.48-.05-.97-.09-1.45-.05-.73.02-1.41.33-2.02.19-.37.4-.59.47-.66.31-.31.62-.45.77-.52,1.86-.84,4.8-.72,4.8-.72.4.02,1.08.08,2.44.21.72.07,1.45.18,2.17.22,1.09.06,7.85.87,8.23.94.3.18.75.51,1.08,1.06.23.38.31.82.51,1.65.14.56.25,1.14.3,1.71.07.73.22,3.33.3,3.9.04.29.09.57.12.86.14,1.59.28,3.19.42,4.79.02.24.14,4.96.17,5.49.08,1.6.18,3.2.22,4.8.06,2.47.05,8.87.06,9.6,0,1.41.35,6.44.36,7.55.02,2.51.11,16.64.08,17.12-.06,1.09-.08,2.19-.17,3.28,2.72.03,16.7.02,18.3.01,1.6,0,3.2.07,4.8.11.52.01,1.05.04,1.57.03,1.43-.04,7.11.45,7.3.51.39.13.41.43.46.8.11.72.07,1.41-.07,2.12-.15.79-.16,1.61-.21,2.41-.05.81-.08,1.63-.12,2.44-.04.72-.11,1.45-.13,2.17-.04,1.08-.04,2.17-.07,3.26-.02.98-.78,5.87-1.13,6.05Z"></path></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

packages/base/Resources/Public/Icons/angle-left.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.23646 14.3886C8.30033 14.4525 8.351 14.5283 8.38557 14.6118C8.42014 14.6952 8.43794 14.7847 8.43794 14.875C8.43794 14.9654 8.42014 15.0548 8.38557 15.1383C8.351 15.2217 8.30033 15.2975 8.23646 15.3614C8.17258 15.4253 8.09675 15.476 8.01329 15.5105C7.92984 15.5451 7.84039 15.5629 7.75005 15.5629C7.65972 15.5629 7.57027 15.5451 7.48681 15.5105C7.40335 15.476 7.32752 15.4253 7.26365 15.3614L0.388646 8.48642C0.324725 8.42257 0.274016 8.34675 0.239418 8.26329C0.20482 8.17983 0.187012 8.09036 0.187012 8.00002C0.187012 7.90967 0.20482 7.82021 0.239418 7.73674C0.274016 7.65328 0.324725 7.57746 0.388646 7.51361L7.26365 0.63861C7.39265 0.509607 7.56762 0.437134 7.75005 0.437134C7.93249 0.437134 8.10746 0.509607 8.23646 0.63861C8.36546 0.767613 8.43794 0.942578 8.43794 1.12502C8.43794 1.30745 8.36546 1.48242 8.23646 1.61142L1.84701 8.00002L8.23646 14.3886Z" fill="black" fill-opacity="0.87"/>
+</svg>

packages/base/Resources/Public/Icons/angle-right.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6113 8.48642L1.7363 15.3614C1.67242 15.4253 1.59659 15.476 1.51314 15.5105C1.42968 15.5451 1.34023 15.5629 1.24989 15.5629C1.15956 15.5629 1.07011 15.5451 0.986653 15.5105C0.903195 15.476 0.827363 15.4253 0.763487 15.3614C0.699612 15.2975 0.648943 15.2217 0.614373 15.1383C0.579804 15.0548 0.562012 14.9654 0.562012 14.875C0.562012 14.7847 0.579804 14.6952 0.614373 14.6118C0.648943 14.5283 0.699612 14.4525 0.763487 14.3886L7.15294 8.00002L0.763487 1.61142C0.634484 1.48242 0.562012 1.30745 0.562012 1.12502C0.562012 0.942578 0.634484 0.767613 0.763487 0.63861C0.89249 0.509607 1.06746 0.437134 1.24989 0.437134C1.43233 0.437134 1.6073 0.509607 1.7363 0.63861L8.6113 7.51361C8.67522 7.57746 8.72593 7.65328 8.76053 7.73674C8.79513 7.82021 8.81293 7.90967 8.81293 8.00002C8.81293 8.09036 8.79513 8.17983 8.76053 8.26329C8.72593 8.34675 8.67522 8.42257 8.6113 8.48642Z" fill="black" fill-opacity="0.87"/>
+</svg>

packages/base/Resources/Public/Icons/email.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.875 0.5C0.839844 0.5 0 1.33984 0 2.375C0 2.96484 0.277344 3.51953 0.75 3.875L9.25 10.25C9.69531 10.582 10.3047 10.582 10.75 10.25L19.25 3.875C19.7227 3.51953 20 2.96484 20 2.375C20 1.33984 19.1602 0.5 18.125 0.5H1.875ZM0 4.875V13C0 14.3789 1.12109 15.5 2.5 15.5H17.5C18.8789 15.5 20 14.3789 20 13V4.875L11.5 11.25C10.6094 11.918 9.39062 11.918 8.5 11.25L0 4.875Z" fill="#2E2E2E"/>
+</svg>

packages/base/Resources/Public/Icons/instagram.svg

@@ -0,0 +1,3 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4417 0.776626C13.3967 0.686626 14.0201 0.666626 19.0001 0.666626C23.9801 0.666626 24.6034 0.688293 26.5567 0.776626C28.5101 0.864959 29.8434 1.17663 31.0101 1.62829C32.2317 2.08996 33.3401 2.81163 34.2567 3.74496C35.1901 4.65996 35.9101 5.76663 36.3701 6.98996C36.8234 8.15663 37.1334 9.48996 37.2234 11.44C37.3134 13.3983 37.3334 14.0216 37.3334 19C37.3334 23.98 37.3117 24.6033 37.2234 26.5583C37.1351 28.5083 36.8234 29.8416 36.3701 31.0083C35.9101 32.2318 35.1889 33.3403 34.2567 34.2566C33.3401 35.19 32.2317 35.91 31.0101 36.37C29.8434 36.8233 28.5101 37.1333 26.5601 37.2233C24.6034 37.3133 23.9801 37.3333 19.0001 37.3333C14.0201 37.3333 13.3967 37.3116 11.4417 37.2233C9.49175 37.135 8.15842 36.8233 6.99175 36.37C5.76828 35.9099 4.65978 35.1887 3.74341 34.2566C2.81071 33.3411 2.08894 32.2331 1.62841 31.01C1.17675 29.8433 0.866748 28.51 0.776748 26.56C0.686748 24.6016 0.666748 23.9783 0.666748 19C0.666748 14.02 0.688415 13.3966 0.776748 11.4433C0.865081 9.48996 1.17675 8.15663 1.62841 6.98996C2.08962 5.76676 2.81195 4.65881 3.74508 3.74329C4.66015 2.81079 5.76754 2.08903 6.99008 1.62829C8.15675 1.17663 9.49008 0.866626 11.4401 0.776626H11.4417ZM26.4084 4.07663C24.4751 3.98829 23.8951 3.96996 19.0001 3.96996C14.1051 3.96996 13.5251 3.98829 11.5917 4.07663C9.80342 4.15829 8.83342 4.45663 8.18675 4.70829C7.33175 5.04163 6.72008 5.43663 6.07842 6.07829C5.47016 6.67005 5.00205 7.39043 4.70842 8.18663C4.45675 8.83329 4.15841 9.80329 4.07675 11.5916C3.98841 13.525 3.97008 14.105 3.97008 19C3.97008 23.895 3.98841 24.475 4.07675 26.4083C4.15841 28.1966 4.45675 29.1666 4.70842 29.8133C5.00175 30.6083 5.47008 31.33 6.07842 31.9216C6.67008 32.53 7.39175 32.9983 8.18675 33.2916C8.83342 33.5433 9.80342 33.8416 11.5917 33.9233C13.5251 34.0116 14.1034 34.03 19.0001 34.03C23.8967 34.03 24.4751 34.0116 26.4084 33.9233C28.1967 33.8416 29.1667 33.5433 29.8134 33.2916C30.6684 32.9583 31.2801 32.5633 31.9217 31.9216C32.5301 31.33 32.9984 30.6083 33.2918 29.8133C33.5434 29.1666 33.8418 28.1966 33.9234 26.4083C34.0117 24.475 34.0301 23.895 34.0301 19C34.0301 14.105 34.0117 13.525 33.9234 11.5916C33.8418 9.80329 33.5434 8.83329 33.2918 8.18663C32.9584 7.33163 32.5634 6.71996 31.9217 6.07829C31.33 5.47008 30.6096 5.00198 29.8134 4.70829C29.1667 4.45663 28.1967 4.15829 26.4084 4.07663ZM16.6584 24.6516C17.9662 25.196 19.4224 25.2695 20.7783 24.8595C22.1342 24.4495 23.3057 23.5815 24.0928 22.4037C24.8798 21.2259 25.2335 19.8114 25.0935 18.4018C24.9535 16.9922 24.3284 15.6749 23.3251 14.675C22.6855 14.0358 21.9121 13.5463 21.0606 13.2419C20.2092 12.9374 19.3008 12.8256 18.4009 12.9143C17.501 13.0031 16.632 13.2903 15.8564 13.7552C15.0808 14.2201 14.418 14.8512 13.9156 15.603C13.4132 16.3549 13.0837 17.2088 12.9509 18.1032C12.8182 18.9977 12.8853 19.9104 13.1476 20.7758C13.41 21.6412 13.8609 22.4376 14.4679 23.1078C15.075 23.778 15.8231 24.3053 16.6584 24.6516ZM12.3367 12.3366C13.2118 11.4616 14.2506 10.7675 15.3939 10.2939C16.5372 9.82033 17.7626 9.57658 19.0001 9.57658C20.2376 9.57658 21.463 9.82033 22.6063 10.2939C23.7495 10.7675 24.7884 11.4616 25.6634 12.3366C26.5385 13.2117 27.2326 14.2505 27.7061 15.3938C28.1797 16.5371 28.4235 17.7625 28.4235 19C28.4235 20.2375 28.1797 21.4628 27.7061 22.6061C27.2326 23.7494 26.5385 24.7883 25.6634 25.6633C23.8962 27.4305 21.4993 28.4233 19.0001 28.4233C16.5008 28.4233 14.104 27.4305 12.3367 25.6633C10.5695 23.8961 9.57671 21.4992 9.57671 19C9.57671 16.5007 10.5695 14.1039 12.3367 12.3366ZM30.5134 10.98C30.7303 10.7754 30.9039 10.5294 31.0239 10.2566C31.144 9.98374 31.2081 9.68957 31.2124 9.39151C31.2168 9.09344 31.1613 8.79754 31.0492 8.52131C30.9372 8.24508 30.7708 7.99414 30.56 7.78336C30.3492 7.57257 30.0983 7.40622 29.8221 7.29416C29.5458 7.18209 29.2499 7.12659 28.9519 7.13093C28.6538 7.13528 28.3596 7.19938 28.0868 7.31945C27.8139 7.43952 27.568 7.61312 27.3634 7.82996C26.9656 8.25168 26.7478 8.81183 26.7563 9.39151C26.7647 9.97119 26.9987 10.5248 27.4087 10.9347C27.8186 11.3446 28.3722 11.5787 28.9519 11.5871C29.5315 11.5956 30.0917 11.3778 30.5134 10.98Z" fill="#F5AE07"/>
+</svg>

packages/base/Resources/Public/Icons/linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22175 6.969H11.894V8.819C12.423 7.755 13.7796 6.799 15.8174 6.799C19.724 6.799 20.6515 8.917 20.6515 12.803V20H16.6964V13.688C16.6964 11.475 16.1675 10.227 14.8208 10.227C12.953 10.227 12.1768 11.572 12.1768 13.687V20H8.22175V6.969ZM1.43982 19.83H5.39487V6.799H1.43982V19.83ZM5.96143 2.55C5.96158 2.88528 5.89584 3.21724 5.76802 3.52659C5.6402 3.83594 5.45287 4.11651 5.21689 4.352C4.73873 4.83262 4.09149 5.10165 3.41734 5.1C2.74438 5.09954 2.09864 4.8312 1.61977 4.353C1.38465 4.11671 1.19795 3.83582 1.07036 3.52643C0.942766 3.21704 0.876793 2.88522 0.876221 2.55C0.876221 1.873 1.14319 1.225 1.62076 0.747C2.09921 0.268158 2.74522 -0.000299211 3.41833 2.50265e-07C4.09267 2.50265e-07 4.73932 0.269 5.21689 0.747C5.69348 1.225 5.96143 1.873 5.96143 2.55Z" fill="#2E2E2E"/>
+</svg>

packages/base/Resources/Public/Icons/phone.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.44141 0.960964C6.14062 0.234401 5.34766 -0.152317 4.58984 0.0547138L1.15234 0.992214C0.472656 1.17971 0 1.7969 0 2.50003C0 12.1641 7.83594 20 17.5 20C18.2031 20 18.8203 19.5274 19.0078 18.8477L19.9453 15.4102C20.1523 14.6524 19.7656 13.8594 19.0391 13.5586L15.2891 11.9961C14.6523 11.7305 13.9141 11.9141 13.4805 12.4492L11.9023 14.375C9.15234 13.0742 6.92578 10.8477 5.625 8.09768L7.55078 6.52346C8.08594 6.08596 8.26953 5.35159 8.00391 4.71487L6.44141 0.96487V0.960964Z" fill="#2E2E2E"/>
+</svg>

packages/base/Resources/Public/Icons/skip-back.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1712 0.921884C12.9564 0.802887 12.7137 0.743556 12.4683 0.750055C12.2229 0.756553 11.9837 0.828643 11.7755 0.958838L1.5 7.38696V1.43751C1.5 1.25517 1.42757 1.0803 1.29864 0.951374C1.1697 0.822442 0.994836 0.750009 0.8125 0.750009C0.630164 0.750009 0.455295 0.822442 0.326364 0.951374C0.197433 1.0803 0.125 1.25517 0.125 1.43751V16.5625C0.125 16.7448 0.197433 16.9197 0.326364 17.0486C0.455295 17.1776 0.630164 17.25 0.8125 17.25C0.994836 17.25 1.1697 17.1776 1.29864 17.0486C1.42757 16.9197 1.5 16.7448 1.5 16.5625V10.6131L11.7755 17.0395C11.9825 17.1694 12.2204 17.2416 12.4646 17.2487C12.7088 17.2558 12.9505 17.1974 13.1646 17.0797C13.3787 16.962 13.5575 16.7892 13.6824 16.5792C13.8073 16.3692 13.8738 16.1297 13.875 15.8853V2.1147C13.875 1.87112 13.8097 1.63201 13.6859 1.42223C13.5621 1.21245 13.3844 1.03968 13.1712 0.921884ZM12.5 15.875L1.51375 9.00001L12.5 2.13103V15.875Z" fill="black" fill-opacity="0.87"/>
+</svg>

packages/base/Resources/Public/Icons/skip-forward.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1875 0.75C13.0052 0.75 12.8303 0.822433 12.7014 0.951364C12.5724 1.0803 12.5 1.25516 12.5 1.4375V7.38695L2.22445 0.960547C2.01752 0.830642 1.77962 0.758412 1.53539 0.751335C1.29116 0.744258 1.04948 0.802592 0.835364 0.920296C0.621252 1.038 0.442494 1.2108 0.317598 1.42079C0.192702 1.63079 0.126208 1.87036 0.125 2.11469V15.8853C0.127568 16.1291 0.194905 16.3678 0.320112 16.577C0.445318 16.7862 0.623891 16.9583 0.837531 17.0758C1.05117 17.1932 1.2922 17.2517 1.53591 17.2454C1.77962 17.239 2.01725 17.1679 2.22445 17.0395L12.5 10.613V16.5625C12.5 16.7448 12.5724 16.9197 12.7014 17.0486C12.8303 17.1776 13.0052 17.25 13.1875 17.25C13.3698 17.25 13.5447 17.1776 13.6736 17.0486C13.8026 16.9197 13.875 16.7448 13.875 16.5625V1.4375C13.875 1.25516 13.8026 1.0803 13.6736 0.951364C13.5447 0.822433 13.3698 0.75 13.1875 0.75ZM1.5 15.869V2.1293L12.4862 9.0043L1.5 15.869Z" fill="black" fill-opacity="0.87"/>
+</svg>

packages/base/Resources/Public/Icons/tiktok.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 16.3984C31.5593 16.4058 28.2033 15.3318 25.4063 13.3281V27.2969C25.4055 29.884 24.6148 32.4091 23.1399 34.5346C21.6651 36.6602 19.5765 38.2847 17.1533 39.1911C14.7302 40.0974 12.0881 40.2422 9.58042 39.6063C7.07272 38.9703 4.81898 37.5838 3.12062 35.6323C1.42225 33.6807 0.36023 31.2572 0.0765895 28.6857C-0.207051 26.1142 0.301214 23.5174 1.53341 21.2426C2.7656 18.9678 4.66297 17.1235 6.97177 15.9562C9.28057 14.789 11.8907 14.3545 14.4531 14.7109V21.7344C13.2815 21.3655 12.0232 21.3763 10.858 21.7652C9.69288 22.1541 8.68036 22.9012 7.96508 23.8998C7.24979 24.8984 6.86831 26.0974 6.8751 27.3258C6.88189 28.5541 7.27661 29.7489 8.00289 30.7395C8.72917 31.7302 9.74988 32.466 10.9193 32.842C12.0887 33.2179 13.347 33.2148 14.5145 32.8331C15.682 32.4513 16.6991 31.7104 17.4204 30.7162C18.1418 29.722 18.5306 28.5252 18.5313 27.2969V0H25.4063C25.4024 0.581456 25.4521 1.16203 25.5547 1.73438C25.7938 3.01016 26.2905 4.22379 27.0145 5.30109C27.7386 6.37839 28.6747 7.29674 29.7656 8C31.3186 9.02566 33.1389 9.57177 35 9.57031V16.3984Z" fill="#F5AE07"/>
+</svg>

packages/base/Resources/Public/Icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8952 0.0625H18.8947L12.3434 7.63359L20.0503 17.9375H14.0173L9.28864 11.6898L3.88442 17.9375H0.880665L7.8866 9.83789L0.498291 0.0625H6.68425L10.9541 5.77305L15.8952 0.0625ZM14.8415 16.1242H16.5028L5.7793 1.78125H3.99489L14.8415 16.1242Z" fill="black"/>
+</svg>

packages/base/Resources/Public/JavaScript/fade-in.js

@@ -0,0 +1,44 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function() {
+    // Elements that should fade in when in view
+    var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');
+
+    // If IntersectionObserver is supported, use it for better performance
+    if ('IntersectionObserver' in window) {
+      // Adjusted options to help large elements fade in
+      var observer = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in-visible');
+            observer.unobserve(entry.target);
+          }
+        });
+      }, {
+        threshold: 0.0,
+        rootMargin: '0px 0px -10% 0px'
+      });
+
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+        observer.observe(el);
+      });
+    } else {
+      // Fallback if IntersectionObserver is not supported
+      fadeInElements.forEach(function(el) {
+        el.classList.add('fade-in-hidden');
+      });
+
+      var checkVisibility = function() {
+        var windowBottom = window.innerHeight + window.scrollY;
+        fadeInElements.forEach(function(el) {
+          if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
+            el.classList.add('fade-in-visible');
+          }
+        });
+      };
+
+      window.addEventListener('scroll', checkVisibility);
+      checkVisibility();
+    }
+  });
+})();

packages/base/Resources/Public/Scss/abstracts/_fade-in.scss

@@ -0,0 +1,19 @@
+.fade-in-hidden {
+  opacity: 0;
+  transform: translateY(1.5rem);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.fade-in-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Respect prefers-reduced-motion: reduce (for accessibility).
+   If user prefers reduced motion, override transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .fade-in-hidden {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -0,0 +1,88 @@
+// Update font file names and ensure no spaces for better compatibility.
+@font-face {
+  font-family: 'Hajime Sans';
+  src: url('../Fonts/Hajime-Sans.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../Fonts/Inter.woff2') format('woff2');
+  font-weight: 100 900; // Adjust as needed for variable font range
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+}
+
+h1, h2 {
+  font-family: 'Hajime Sans', sans-serif;
+  color: var(--bs-primary);
+  font-weight: 400;
+  line-height: 1;
+}
+
+h1 {
+  text-align: center;
+  font-size: 3rem;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 4.5rem;
+  }
+}
+h1 span.tapered {
+  background-size: 100% 15%;
+  background-repeat: repeat-x;
+  background-position: left 0% bottom 15%;
+  background-image: linear-gradient(179deg,var(--bs-yellow) 0%, var(--bs-yellow) 50%,transparent 54%, transparent 100%);
+}
+
+h2 {
+  font-size: 2rem;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 3rem;
+  }
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
+}
+
+h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 1.5rem;
+  }
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+    color: var(--bs-primary);
+    text-decoration: none;
+    font-weight: 700;
+
+    &:hover {
+      color: var(--bs-primary-light)
+    }
+}
+
+button, .btn {
+  font-family: 'Hajime Sans', sans-serif;
+  font-weight: 400;
+}

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -0,0 +1,56 @@
+.ci {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+}
+
+.ci::before {
+  display: inline-block;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  background-color: currentColor;
+  vertical-align: middle;
+}
+
+.ci-instagram::before {
+  mask-image: url(../Icons/instagram.svg);
+}
+
+.ci-tiktok::before {
+  mask-image: url(../Icons/tiktok.svg);
+  width: 0.9em;
+  height: 0.9em;
+}
+
+.ci-linkedin::before {
+  mask-image: url(../Icons/linkedin.svg);
+}
+.ci-x::before {
+  mask-image: url(../Icons/x.svg);
+}
+.ci-email::before {
+  mask-image: url(../Icons/email.svg);
+}
+.ci-phone::before {
+  mask-image: url(../Icons/phone.svg);
+}
+.ci-angle-right::before {
+  mask-image: url(../Icons/angle-right.svg);
+}
+
+.ci-angle-left::before {
+  mask-image: url(../Icons/angle-left.svg);
+}
+
+.ci-skip-forward::before {
+  mask-image: url(../Icons/skip-forward.svg);
+}
+
+.ci-skip-back::before {
+  mask-image: url(../Icons/skip-back.svg);
+}

packages/base/Resources/Public/Scss/abstracts/_variables.scss

@@ -22,6 +22,14 @@ $xl: 1200px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
+
+  --bs-primary: #233600;
+  --bs-primary-dark: #1C2B00;
+  --bs-yellow: #F5AE07;
+  --bs-primary-light: #4E5E32;
+  --bs-light-green: #F4F6EC;
+  --cl-primary: #233600;
+
 }
 
 // Additional global variables can be added here

packages/base/Resources/Public/Scss/base/_global.scss

@@ -1,5 +1,15 @@
 body {
-  font-family: $font-stack;
-  color: $primary-color;
   line-height: 1.5;
 }
+
+a[href^="tel:"]::before {
+  @extend .ci;
+  @extend .ci-phone;
+  margin-right: 0.5em;
+}
+
+a[href^="mailto:"]::before {
+  @extend .ci;
+  @extend .ci-email;
+  margin-right: 0.5em;
+}

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -0,0 +1,16 @@
+.btn {
+  background-color: var(--bs-primary);
+  color: var(--bs-yellow);
+  font-family: 'Inter', sans-serif;
+  font-weight: 700;
+  border-radius: .5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s;
+
+  &:hover {
+    background-color: var(--bs-primary-dark);
+    color: var(--bs-yellow);
+  }
+}

packages/base/Resources/Public/Scss/components/_contentElements.scss

@@ -1,19 +0,0 @@
-.content-element {
-  margin: 2rem auto;
-  padding: 2rem;
-  background-color: #f5f5f5; // default background
-
-  // Apply responsive widths at breakpoints using the respond mixin
-
-  &--blue {
-    background-color: #cceeff;
-  }
-
-  &--gray {
-    background-color: #eeeeee;
-  }
-
-  &--image {
-    background: url('EXT:my_sitepackage/Resources/Public/Images/background-image.jpg') no-repeat center/cover;
-  }
-}

packages/base/Resources/Public/Scss/components/_footer.scss

@@ -1,11 +1,10 @@
 .site-footer {
-  background: #f8f8ea;
-  color: #4b4b4b;
   font-size: 0.9rem;
-  padding: 2rem 0;
 
-  &__top {
+  > .container {
-    padding-bottom: 2rem;
+    background: var(--bs-light-green);
+    border-top-left-radius: 2rem;
+    border-top-right-radius: 2rem;
   }
 
   &__grid {
@@ -16,6 +15,26 @@
 
   &__left, &__right {
     flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+
+    > div:first-child {
+      margin-top: auto;
+    }
+
+    .container {
+      padding: .5rem 0;
+    }
+  }
+
+  &__logo img {
+    margin-right: 1rem;
+  }
+
+  &__social {
+    a {
+      margin-right: .5rem;
+    }
   }
 
   @media (min-width: 768px) {
@@ -63,19 +82,3 @@
     font-size: 0.9rem;
   }
 }
-
-/* Social links styling based on href */
-a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
-  display: inline-block;
-  text-decoration: none;
-  color: #4b4b4b;
-  transition: color 0.3s ease;
-}
-
-a[href*="instagram.com"]:hover,
-a[href*="tiktok.com"]:hover,
-a[href*="linkedin.com"]:hover,
-a[href*="twitter.com"]:hover,
-a[href*="x.com"]:hover {
-  color: #6B8E23;
-}

packages/base/Resources/Public/Scss/components/_images.scss

@@ -0,0 +1,20 @@
+a {
+  img {
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+figure {
+  border-radius: 1rem;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -2,22 +2,24 @@
 // so that when it becomes sticky, the content doesn't jump.
 $nav-height: 60px; // Adjust as needed
 
-header {
+// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
+// Ensure this path is correct for your TYPO3 installation.
+// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
+
+body > header {
   width: 100%;
-  height: $nav-height;
   line-height: $nav-height;
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .main-nav {
+  background: url('../Images/background.jpg') repeat;
 
   .container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin: 0 auto;
     height: 100%;
     padding: 0 1rem;
@@ -86,6 +88,15 @@ header {
     display: flex;
     list-style: none;
     align-items: center;
+    margin: auto;
+
+    font-family: 'Hajime Sans', sans-serif;
+    font-size: 1.75rem;
+
+    a {
+        font-weight: 400;
+    }
+  }
 
   .nav-item {
     margin: 0 1rem;
@@ -104,11 +115,11 @@ header {
       }
     }
   }
-  }
 
   @media (max-width: $breakpoint-lg) {
     .nav-toggle {
       display: block;
+      margin-left: auto; // move toggle to the right on mobile
     }
 
     .nav-links {
@@ -117,9 +128,9 @@ header {
       left: 0;
       right: 0;
       flex-direction: column;
-      background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
       max-height: 0;
       overflow: hidden;
+      background: #fff; // Add white background for mobile dropdown
       @include transition(max-height, 0.4s);
 
       .nav-item {

packages/base/Resources/Public/Scss/components/_news.scss

@@ -1,37 +1,19 @@
-// .frame-type-news_newsliststicky {
+.frame-type-news_pi1 h1 {
-//   .header {
+  margin-bottom: 3rem;
-//     display:flex;
+}
-//     margin-bottom: 2.5rem;
-//
-//     .title {
-//       flex: 1;
-//       align-content: center;
-//
-//       h2 {
-//         margin: 0;
-//       }
-//     }
-//   }
-// }
-
 .news-list-view {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1rem;
   grid-auto-rows: auto;
+  margin-bottom: 1rem; /* Ensure space below the news list */
 
   .news-list-item {
       grid-column: span 6;
       max-width: 100%;
   }
 
-  @media (max-width: $breakpoint-md) {
+  @media (min-width: $breakpoint-lg) {
-    .news-list-item {
-      grid-column: span 2;
-    }
-  }
-
-  @media (min-width: $breakpoint-xl) {
     .news-list-item {
       grid-column: span 2;
 
@@ -47,12 +29,44 @@
         grid-column: 5 / span 2;
         grid-row: 2;
       }
-
     }
   }
 
   .f3-widget-paginator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    margin: 2rem 0;
+    padding: 0;
     grid-column: span 6;
+
+    li {
+      margin: 0 0.5rem;
+
+      &.dots span {
+        background: none;
+        color: $primary-color;
+      }
+
+      &.current a, a:hover {
+        background: var(--bs-primary);
+        color: var(--bs-yellow);
+        font-weight: bold;
+      }
+
+      a {
+        display: inline-block;
+        width: 2.5rem;
+        height: 2.5rem;
+        line-height: 2.5rem;
+        text-align: center;
+        border-radius: 0.5rem;
+        background: transparent;
+        text-decoration: none;
+        transition: background 0.3s ease-in-out;
+      }
+    }
   }
 }
 
@@ -67,21 +81,99 @@
   }
 
   a {
+    position: relative;
     display: flex;
     flex-direction: column;
+    border-radius: 1rem;
+    border-bottom-right-radius: 0;
+    overflow: hidden;
 
-    .body {
+    .news-item-content {
-      position: relative;
+      position: absolute;
-      padding: .5rem;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: var(--bs-primary);
+      color: #fff;
+      border-top-right-radius: 1rem;
+      padding: 1rem;
+      padding-right: 3rem;
+
+      &:after {
+        position: absolute;
+        right: 1.625rem;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 1.5rem;
+        display: block;
+        content: ' ';
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: currentColor;
+        /* vertical-align: middle; */
+        mask-image: url(../Icons/angle-right.svg);
+      }
     }
 
     time {
-      padding-left: .6rem;
+      font-size: 0.75rem;
-      color: var(--bs-gray-900);
+      font-weight: 400;
+
+      @media (min-width: $breakpoint-md) {
+        font-size: 1rem;
+      }
     }
 
-    .readmore {
+    h3 {
-      color: var(--bs-primary);
+      font-family: 'Inter', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: #fff;
+      margin: 0;
     }
   }
 }
+
+.news-list-item-big {
+  picture {
+    @media (min-width: $breakpoint-md) {
+      padding-bottom: .8rem;
+    }
+  }
+  a .news-item-content {
+    @media (min-width: $breakpoint-md) {
+      padding: 2.875rem;
+      padding-right: 5rem;
+
+      &:after {
+        right: 3.5rem;
+      }
+    }
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+/* Show header button only on desktop */
+.header-btn {
+  display: none;
+  @media (min-width: $breakpoint-lg) {
+    display: inline-block;
+  }
+}
+
+/* Show mobile button only below desktop breakpoint, inline-block and margin-top */
+.mobile-btn {
+  display: inline-block;
+  @media (min-width: $breakpoint-lg) {
+    display: none;
+  }
+}

packages/base/Resources/Public/Scss/components/_news_detail.scss

@@ -0,0 +1,88 @@
+.news-detail__title {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 0rem !important;
+  font-size: 3rem;
+  text-align: left;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 4rem;
+  }
+}
+
+.news-detail__time {
+  display: block;
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+.news-detail__main-image {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+.news-detail__teaser {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+.news-detail__bodytext {
+  max-width: 900px;
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+.news-detail__content-elements {
+  max-width: 900px;
+  margin: auto;
+
+  margin-bottom: 2rem;
+
+  .container {
+    padding: 0;
+  }
+  > * {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.news-detail__gallery {
+  margin-top: 2rem;
+
+  &--grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+
+    .news-detail__gallery-item {
+      img {
+        max-width: 100%;
+        height: auto;
+        display: block;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .news-detail__gallery--grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .news-detail__gallery--grid {
+    grid-template-columns: 1fr;
+  }
+}

packages/base/Resources/Public/Scss/main.scss

@@ -1,7 +1,12 @@
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
+@import 'abstracts/fonts';
+@import 'abstracts/icons';
+@import 'abstracts/fade-in';
 @import 'base/base';
 @import 'components/navigation';
-@import 'components/contentElements';
+@import 'components/images';
 @import 'components/news';
+@import "components/news_detail";
 @import 'components/footer';
+@import 'components/buttons';

packages/base/Resources/Public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: './packages/base/Resources/Public/Scss/main.scss',
+  output: {
+    path: path.resolve(__dirname, 'packages/base/Resources/Public/Css'),
+    filename: 'main.js' // JS not needed, but required by Webpack. The CSS will be extracted.
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'main.css'
+    })
+  ]
+};