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

@@ -47,13 +47,11 @@ page {
 
   includeCSS {
     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 {

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

@@ -20,7 +20,7 @@
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <figure>
+            <picture>
                 <!-- WEBP source -->
                 <source
                   type="image/webp"
@@ -50,7 +50,7 @@
                 alt="Hero Image"
                 loading="lazy"
                 class="hero-image" />
-            </figure>
+            </picture>
           </f:then>
           <f:else>
             <p>No image available</p>

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

@@ -17,7 +17,7 @@
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <figure class="textimage-picture">
+          <picture class="textimage-picture">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -46,7 +46,7 @@
               alt="{data.image.0.alternative}"
               class="textimage-image"
             />
-          </figure>
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>

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

@@ -1,101 +0,0 @@
-<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>
-
-    <!-- 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

@@ -25,20 +25,17 @@
 </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}">
+      <f:then>
         <!-- Desktop button -->
         <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn header-btn">Alle Artikel</f:link.page>
-      </div>
       </f:then>
-    <f:else>
-        <h1><span class="tapered">{contentObjectData.header}</span></h1>
-    </f:else>
     </f:if>
+  </div>
 	<!--TYPO3SEARCH_end-->
 	<f:if condition="{news}">
 		<f:then>

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

@@ -24,16 +24,11 @@ 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%;

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

@@ -7,14 +7,3 @@ a {
     transform: scale(1.05);
   }
 }
-
-figure {
-  border-radius: 1rem;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-}

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

@@ -156,7 +156,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
 }
 
 /* Show header button only on desktop */

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

@@ -1,81 +0,0 @@
-.news-detail__title {
-  max-width: 900px;
-  margin: auto;
-  margin-bottom: 2rem;
-  font-size: 3rem;
-  text-align: left;
-
-  @media (min-width: $breakpoint-md) {
-    font-size: 4rem;
-  }
-}
-
-.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

@@ -7,6 +7,5 @@
 @import 'components/navigation';
 @import 'components/images';
 @import 'components/news';
-@import "components/news_detail";
 @import 'components/footer';
 @import 'components/buttons';