feat: remove header_link, adjust hero scroll to next, fix some html errors

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

@@ -7,7 +7,7 @@
 <f:section name="Main">
     <div class="card-container">
         <f:if condition="{data.header}">
-            <h2><f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.header}</f:format.html></h2>
+            <h2>{data.header}</h2>
         </f:if>
         <f:if condition="{data.bodytext}">
             <f:then>

packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document
+    .querySelectorAll('.hero-down-link')
+    .forEach(link => link.addEventListener('click', scrollToNext));
+});
+
+function scrollToNext(e) {
+  e.preventDefault();
+  const refEl = e.currentTarget;
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+  if (isMobile) {
+    const target = document.getElementById('hero-text');
+    if (!target) {
+      console.warn('scrollToNext: no element with id="hero-text"');
+      return;
+    }
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  } else {
+    const frames = Array.from(document.querySelectorAll('.frame'));
+    const nextFrame = frames.find(frame =>
+      refEl.compareDocumentPosition(frame) & Node.DOCUMENT_POSITION_FOLLOWING
+    );
+
+    if (!nextFrame) {
+      console.warn('scrollToNext: no .frame found after this link');
+      return;
+    }
+    nextFrame.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}

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

@@ -15,9 +15,6 @@ fields:
     type: Textarea
     enableRichtext: true
     useExistingField: true
-  - identifier: header_link
-    type: Link
-    useExistingField: true
   - identifier: image
     type: File
     properties:

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

@@ -8,7 +8,7 @@
       <div class="md:flex md:items-center">
 
         <!-- IMAGE HALF -->
-        <div class="order-2 md:order-1 md:w-1/2 relative">
+        <div class="order-2 py-16 md:order-1 md:w-1/2 relative">
           <f:if condition="{data.image}">
             <f:then>
               <picture class="block w-full object-cover">
@@ -47,25 +47,23 @@
           </f:if>
 
           <!-- Down‑arrow, half out on the right edge -->
-          <f:if condition="{data.header_link}">
-              <div
-                class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20">
-                <f:link.typolink parameter="{data.header_link}"
-                   class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
-                  <span class="sr-only">Scroll down</span>
-                  <i class="ci ci-arrow-down"></i>
-                </f:link.typolink>
-              </div>
-          </f:if>
+          <div
+            class="absolute -translate-y-1/2 right-1/2 translate-x-1/2 md:top-2/3 md:-translate-y-1/2 md:right-[-3rem] md:translate-x-0 z-20">
+            <a href="#"
+               class="hero-down-link w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
+              <span class="sr-only">Scroll down</span>
+              <i class="ci ci-arrow-down"></i>
+            </a>
+          </div>
         </div>
 
         <!-- TEXT HALF -->
-        <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
+        <div id="hero-text" class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
 
           <!-- Desktop: line + intro -->
-          <div class="hidden md:flex items-center space-x-3">
+          <div class="flex items-center space-x-3">
             <span class="block h-px w-10 bg-gray-600"></span>
-            <span class="text-sm uppercase tracking-wide text-gray-600">
+            <span class="text-sm uppercase tracking-wide font-bold">
               {data.subheader}
             </span>
           </div>
@@ -97,4 +95,5 @@
       </div>
     </div>
   </section>
+  <f:asset.script identifier="scroll-to-next" src="{cb:assetPath()}/scroll-to-next.js" nonce="{f:security.nonce()}"/>
 </f:section>

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

@@ -15,7 +15,7 @@
     <div class="flex items-center justify-center {imageSizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <figure class="block w-full">
+          <picture class="block w-full">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -41,7 +41,7 @@
               alt="{data.image.0.alternative}"
               class="max-w-full h-auto block"
             />
-          </figure>
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>