opti img home

components/AccessabilityBox.vue

@@ -78,9 +78,9 @@
 <script setup>
 import { ref } from 'vue'
 
-const open = ref(false)
-
 import { useMainStore } from '@/stores/main'
+
+const open = ref(false)
 const mainStore = useMainStore()
 const screenWidth = computed(() => mainStore.screenWidth)
 

components/Accordion.vue

@@ -15,7 +15,7 @@
 
         <!-- Toggle-Icon (2 Striche) -->
         <span class="accordion-toggle" :class="{ open: openIndex === i }">
-          <span></span><span></span>
+          <span/><span/>
         </span>
       </button>
 

components/Breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="breadcrumbs" aria-label="Breadcrumb" v-if="breadcrumbs && breadcrumbs.length">
+    <nav v-if="breadcrumbs && breadcrumbs.length" class="breadcrumbs" aria-label="Breadcrumb">
       <ul>
         <router-link to="/">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">

components/ContactForm.vue

@@ -8,22 +8,22 @@
         role="dialog"
     >
         <svg 
-            @click="toggleContactBubble" 
             id="controlIcon" 
             tabindex="0" 
             role="button" 
             aria-label="Toggle contact form" 
+            @click="toggleContactBubble"
         >
-            <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`"></use>
+            <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`"/>
         </svg>
         <div 
-            class="contactContainer" 
             v-show="isContactBubbleOpen" 
+            class="contactContainer"
             role="form" 
             aria-labelledby="contactTitle"
         >
             <div class="row left m-2">
-                <div class="col-md-6" id="hintBox">
+                <div id="hintBox" class="col-md-6">
                     <NuxtImg
                         v-if="screenWidth <= 768"
                         class="mobileAspBox"
@@ -35,11 +35,11 @@
                     <h2 id="contactTitle">{{ $t('contactForm.yourcontact2us') }}</h2>
                     <p class="my-4">
                         <svg aria-hidden="true">
-                            <use xlink:href="/assets/icons/collection.svg#phone"></use>
+                            <use xlink:href="/assets/icons/collection.svg#phone"/>
                         </svg>
                         <span>{{ companyinfo.phone }}</span>
                     </p>
-                    <div class="pt-3" v-if="screenWidth > 768">
+                    <div v-if="screenWidth > 768" class="pt-3">
                     <h3>{{ $t('contactForm.ourOffice') }}</h3>
                     <p class="address">
                         {{ companyinfo.company }}<br>{{ companyinfo.street }} <br>{{ companyinfo.postalcode }} {{ companyinfo.city }}
@@ -60,12 +60,12 @@
                         <label for="name">{{ $t('contactForm.name') }}</label>
                         <input 
                             id="name" 
+                            v-model="form.name" 
                             type="text" 
                             name="name"
-                            v-model="form.name"
-                            @blur="validateName"
                             aria-required="true"
                             autocomplete="name"
+                            @blur="validateName"
                         >
                         <span v-if="errors.name" class="error">{{ errors.name }}</span>
                     </div>
@@ -74,11 +74,11 @@
                         <label for="email">{{ $t('contactForm.email') }}</label>
                         <input 
                             id="email" 
+                            v-model="form.email" 
                             type="email" 
                             name="email"
-                            v-model="form.email"
-                            @blur="validateEmail"
                             autocomplete="email"
+                            @blur="validateEmail"
                         >
                         <span v-if="errors.email" class="error">{{ errors.email }}</span>
                     </div>
@@ -87,11 +87,11 @@
                         <label for="phone">{{ $t('contactForm.phone') }}</label>
                         <input 
                             id="phone" 
+                            v-model="form.phone" 
                             type="tel" 
                             name="phone"
-                            v-model="form.phone"
-                            @blur="validatePhone"
                             autocomplete="tel"
+                            @blur="validatePhone"
                         >
                         <span v-if="errors.phone" class="error">{{ errors.phone }}</span>
                     </div>
@@ -100,10 +100,10 @@
                         <label for="message">{{ $t('contactForm.message') }}</label>
                         <textarea 
                             id="message" 
+                            v-model="form.message" 
                             name="message" 
                             class="mt-4"
-                            v-model="form.message"
-                        ></textarea>
+                        />
                     </div>
                     
                     <p class="smallText">
@@ -121,8 +121,8 @@
                     <button 
                         type="submit" 
                         :aria-label="$t('contactForm.sendMessage')"
-                        @click="submitForm"
                         class="pinkBtn"
+                        @click="submitForm"
                     >
                         {{ $t('contactForm.sendMessage') }}
                     </button>

components/FAQArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="faq" id="faq">
+  <section id="faq" class="faq">
     <h3>{{ headline }}</h3>
     <Accordion v-if="accordionItems.length" :items="accordionItems" />
     <p v-else>Lade Daten...</p>
@@ -9,7 +9,7 @@
         <h4> Noch Fragen? </h4>
       </div>
       <div class="col-md-6">
-        <button @click.prevent="toggleContactBubble" role="button" class="pinkBtn">
+        <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
           {{ button }}
         </button>
       </div>

components/ImageComparisonSlider.vue

@@ -1,27 +1,41 @@
 <template>
   <div class="image-comparison-container">
-      <!-- "Vorher"-Bild liegt unten -->
-      <img class="before-image" :src="beforeImage" alt="Vorher-Bild">
+    <!-- „Vorher“-Bild liegt unten -->
+    <NuxtImg
+      class="before-image"
+      provider="strapi"
+      :src="beforeImage"
+      alt="Vorher-Bild"
+      format="webp"
+      loading="lazy"
+    />
 
-      <!-- "Nachher"-Bild oben, wird durch die Breite beschnitten -->
+    <!-- „Nachher“-Bild oben, Breite = Slider-Wert -->
     <div class="after-image-container" :style="{ width: sliderValue + '%' }">
-        <img class="after-image" :src="afterImage" alt="Nachher-Bild">
+      <NuxtImg
+        class="after-image"
+        provider="strapi"
+        :src="afterImage"
+        alt="Nachher-Bild"
+        format="webp"
+        loading="lazy"
+      />
     </div>
 
-      <!-- Der Slider -->
-      <input type="range" min="0" max="100" v-model="sliderValue" class="slider">
+    <!-- Slider -->
+    <input v-model="sliderValue" type="range" min="0" max="100" class="slider" />
 
-      <!-- Die vertikale Trennlinie -->
-      <div class="slider-line" :style="{ left: sliderValue + '%' }"></div>
+    <!-- Vertikale Trennlinie -->
+    <div class="slider-line" :style="{ left: sliderValue + '%' }" />
   </div>
 </template>
   
   <script setup>
   import { ref } from 'vue'
   
-  const props = defineProps({
-    beforeImage: String,
-    afterImage: String
+  defineProps({
+  beforeImage: { type: String, required: true },
+  afterImage:  { type: String, required: true }
 })
   
   const sliderValue = ref(60) // Startposition in der Mitte

components/MarqueeBanner.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
       <div class="banner-wrapper">
-        <!-- Obere Welle als SVG -->
+        <!-- Obere Welle -->
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 500 20"
@@ -22,23 +22,28 @@
             <h2 class="pt-4 pb-3">{{ title }}</h2>
   
             <div class="marquee marquee--hover-pause mt-5">
+              <!-- Haupt-Liste -->
               <ul class="marquee__content">
                 <li v-for="(item, index) in items" :key="index">
                   <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
                     <NuxtImg
-                      :src="cmsUrl + item.logo.url"
-                      alt="item.logo.alternativeText || 'Logo'"
+                      provider="strapi"
+                      :src="item.logo.url"
+                      :alt="item.logo.alternativeText || 'Logo'"
                       width="250"
                       format="webp"
+                      loading="lazy"
                       class="custLogo"
                     />
                   </NuxtLink>
                   <NuxtImg
                     v-else
-                    :src="cmsUrl + item.logo.url"
-                    alt="item.logo.alternativeText || 'Logo'"
+                    provider="strapi"
+                    :src="item.logo.url"
+                    :alt="item.logo.alternativeText || 'Logo'"
                     width="250"
                     format="webp"
+                    loading="lazy"
                     class="custLogo"
                   />
                 </li>
@@ -49,19 +54,23 @@
                 <li v-for="(item, index) in items" :key="'dup-' + index">
                   <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
                     <NuxtImg
-                      :src="cmsUrl + item.logo.url"
-                      alt="item.logo.alternativeText || 'Logo'"
+                      provider="strapi"
+                      :src="item.logo.url"
+                      :alt="item.logo.alternativeText || 'Logo'"
                       width="250"
                       format="webp"
+                      loading="lazy"
                       class="custLogo"
                     />
                   </NuxtLink>
                   <NuxtImg
                     v-else
-                    :src="cmsUrl + item.logo.url"
-                    alt="item.logo.alternativeText || 'Logo'"
+                    provider="strapi"
+                    :src="item.logo.url"
+                    :alt="item.logo.alternativeText || 'Logo'"
                     width="250"
                     format="webp"
+                    loading="lazy"
                     class="custLogo"
                   />
                 </li>
@@ -70,7 +79,7 @@
           </div>
         </div>
   
-        <!-- Wellen am unteren Rand -->
+        <!-- Untere Wellen -->
         <div class="waveBox">
           <div id="waver">
             <div class="waveWrapper waveAnimation">
@@ -78,19 +87,19 @@
                 <div
                   class="wave waveTop"
                   :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_top_8fe067e598.svg')` }"
-                ></div>
+                />
               </div>
               <div class="waveWrapperInner bgMiddle">
                 <div
                   class="wave waveMiddle"
                   :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_middle_24d8a84a35.svg')` }"
-                ></div>
+                />
               </div>
               <div class="waveWrapperInner bgBottom">
                 <div
                   class="wave waveBottom"
                   :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_bottom_6fc8184efb.svg')` }"
-                ></div>
+                />
               </div>
             </div>
           </div>
@@ -100,6 +109,7 @@
   </template>
   
   
+  
   <script setup>
   import { computed } from 'vue'
   

components/template/PageFooter.vue

@@ -23,11 +23,13 @@
       <div class="row align-items-end">
         <div class="col-lg-4 mb-4">
           <p>
-            <img
+            <NuxtImg
+              provider="strapi"
               :src="invertLogoUrl"
               :alt="companyinfo?.company"
               class="logo mb-1"
-            >
+              loading="lazy"
+            />
           </p>
           <p>{{ companyinfo?.contact }}</p>
           <p>{{ companyinfo?.street }}</p>
@@ -35,7 +37,7 @@
             {{ companyinfo?.postalcode }}
             {{ companyinfo?.city }}
           </p>
-          <p>{{ companyinfo?.district }}</p>
+          <p><i>{{ companyinfo?.district }}</i></p>
           <br >
           <p v-if="false" class="mb-4">
               <span class="icon">
@@ -86,14 +88,20 @@
         </div>
         <div class="col-lg-5 mb-4">
           <div class="certificates">
-            <img
-              :src="cmsUrl + '/uploads/exali_Siegel_5adfae16cb.jpg'"
+            <NuxtImg
+              provider="strapi"
+              src="/uploads/exali_Siegel_5adfae16cb.jpg"
               alt="exali-Versicherungssiegel"
-            >
-            <img
-              :src="cmsUrl + '/uploads/XDI_zertifikat_162b61f4ad.png'"
+              format="webp"
+              loading="lazy"
+            />
+            <NuxtImg
+              provider="strapi"
+              src="/uploads/XDI_zertifikat_162b61f4ad.png"
               alt="XDI-Zertifizierung"
-            >
+              format="webp"
+              loading="lazy"
+            />
           </div>
           <p class="mb-3">
             Handcrafted webdesign with passion and
@@ -105,19 +113,23 @@
           </p>
           <p class="powered">
             Powered by
-            <img
-              :src="cmsUrl + '/uploads/nuxt_Logo_white_1ad151de78.svg'"
-              alt="vue logo"
-            >
+            <NuxtImg
+              provider="strapi"
+              src="/uploads/nuxt_Logo_white_1ad151de78.svg"
+              alt="Nuxt Logo"
+              loading="eager"
+              height="26"
+            />
             <span class="bigIcon">
-              <svg>
-                <use xlink:href="/assets/icons/collection.svg#plus"/>
-              </svg>
+              <svg><use xlink:href="/assets/icons/collection.svg#plus"/></svg>
             </span>
-            <img
-              :src="cmsUrl + '/uploads/strapi_logo_071ec5df4d.png'"
-              alt="strapi logo"
-            >
+            <NuxtImg
+              provider="strapi"
+              src="/uploads/strapi_logo_071ec5df4d.png"
+              alt="Strapi Logo"
+              loading="eager"
+              height="26"
+            />
           </p>
           <p class="mt-4">
             &copy; 2018-{{ currentYear }} by {{ companyinfo?.web }}

components/template/PageHeader.vue

@@ -6,7 +6,12 @@
   <SettingsPanel v-if="screenWidth >= 1350" />  
   <div class="headContent">
       <div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')">
-        <img :src="cmsUrl + '/uploads/DML_Logo_grey_2024_c51210b70c.svg'" alt="digimedialoop Logo" >
+        <NuxtImg
+          provider="strapi"
+          src="/uploads/DML_Logo_grey_2024_c51210b70c.svg"
+          alt="digimedialoop Logo"
+          loading="eager"   
+        />
       </div>
       <div
         class="navigationBox"
@@ -18,10 +23,10 @@
         aria-label="Hauptnavigation"
         tabindex="0"
       >
-      <div class="closer"
+      <div
+class="closer"
         @click="toggleMenu"
-        @keydown.enter="toggleMenu">
-      </div>
+        @keydown.enter="toggleMenu"/>
         <nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true">
           <NuxtLinkLocale
             v-for="link in navigationLinks"

nuxt.config.ts

@@ -44,9 +44,13 @@ export default defineNuxtConfig({
     }],
   ],
   image: {
+    debug: true,
     strapi: {
       baseURL: 'https://strapi.digimedialoop.de'
-    }
+    },
+    domains: ['strapi.digimedialoop.de'],
+    format: ['webp'],
+    quality: 80
   },
   runtimeConfig: {
     public: {

pages/index.vue

@@ -20,7 +20,7 @@
       </div>
       <!-- Nach dem Container: Spiegelwelle unten -->
       <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
     <section aria-labelledby="solution-title">
@@ -38,7 +38,8 @@
             <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
             <h3>{{ $t('home.solution.teaser') }}</h3>
             <p>{{ $t('home.solution.text') }}</p>
-            <button class="mintBtn"
+            <button
+class="mintBtn"
                         role="button"
                         aria-describedby="solution-title"
                         aria-label="headless CMS Info" @click="navigateToArticle">{{ $t('home.solution.buttonText') }}</button>
@@ -48,24 +49,24 @@
     </section>
     <section class="targetGroup" aria-labelledby="invitation-title">
       <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
       <div class="container-10">
         <div class="row">
-          <div class="col-md-4">
-          </div>
+          <div class="col-md-4"/>
           <div class="col-md-8 pt-5 pb-5">
             <h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
             <h3>{{ $t('home.invitation.teaser') }}</h3>
-            <button class="pinkBtn" @click.prevent="toggleContactBubble"
-                    role="button"
+            <button
+class="pinkBtn" role="button"
                     aria-describedby="invitation-title"
-                    aria-label="Kontaktformular öffnen">{{ $t('home.invitation.button') }}</button>
+                    aria-label="Kontaktformular öffnen"
+                    @click.prevent="toggleContactBubble">{{ $t('home.invitation.button') }}</button>
           </div>
         </div>
       </div>
       <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
     <section class="canDo">
@@ -77,7 +78,16 @@
               <div class="col-md-6 my-5">
                 <div class="innerBox">
                   <div class="canDoItem">
-                  <div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/website_Erfolg_Marketing_3c36a43ba5.png');"></div>
+                    <NuxtImg
+                      provider="strapi"
+                      src="/uploads/website_Erfolg_Marketing_3c36a43ba5.png"
+                      format="webp"
+                      :modifiers="{ quality: 80 }"
+                      sizes="xs:280px sm:300px md:350px"
+                      class="imageBox"
+                      loading="lazy"
+                      alt="Website Erfolg Marketing"
+                    />
                     <h3>{{ $t('home.canDo.item1.title') }}</h3>
                     <p>{{ $t('home.canDo.item1.text') }}</p>
                   </div>
@@ -86,7 +96,16 @@
               <div class="col-md-6 my-5">
                 <div class="innerBox">
                   <div class="canDoItem">
-                  <div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Kundenbindung_45d45ef3fc.png');"></div>
+                    <NuxtImg
+                      provider="strapi"
+                      src="/uploads/Kundenbindung_45d45ef3fc.png"
+                      format="webp"
+                      :modifiers="{ quality: 80 }"
+                      sizes="xs:280px sm:300px md:350px"
+                      class="imageBox"
+                      loading="lazy"
+                      alt="Kundenbindung Strategie"
+                    />
                     <h3>{{ $t('home.canDo.item2.title') }}</h3>
                     <p>{{ $t('home.canDo.item2.text') }}</p>
                   </div>
@@ -99,7 +118,16 @@
               <div class="col-md-6 my-5">
                 <div class="innerBox">
                   <div class="canDoItem" role="group" aria-labelledby="cando-title">
-                  <div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png');"></div>
+                    <NuxtImg
+                      provider="strapi"
+                      src="/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png"
+                      format="webp"
+                      :modifiers="{ quality: 80 }"
+                      sizes="xs:280px sm:300px md:350px"
+                      class="imageBox"
+                      loading="lazy"
+                      alt="Screen Tool Beispiel"
+                    />
                     <h3 id="cando-title">{{ $t('home.canDo.item3.title') }}</h3>
                     <p>{{ $t('home.canDo.item3.text') }}</p>
                   </div>
@@ -108,7 +136,16 @@
               <div class="col-md-6 my-5">
                 <div class="innerBox">
                   <div class="canDoItem">
-                  <div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png');"></div>
+                    <NuxtImg
+                      provider="strapi"
+                      src="/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png"
+                      format="webp"
+                      :modifiers="{ quality: 80 }"
+                      sizes="xs:280px sm:300px md:350px"
+                      class="imageBox"
+                      
+                      alt="Screen Tool Beispiel"
+                    />
                     <h3>{{ $t('home.canDo.item4.title') }}</h3>
                     <p>{{ $t('home.canDo.item4.text') }}</p>
                   </div>
@@ -122,7 +159,7 @@
 
     <section class="compBox">
       <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg> 
       <div class="container-10 pb-5">
         <div class="row d-flex align-items-center">
@@ -133,27 +170,28 @@
           </div>
           <div class="col-md-6 mt-5 pt-4 pb-4">
             <ImageComparisonSlider 
-              beforeImage="https://strapi.digimedialoop.de/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
-              afterImage="https://strapi.digimedialoop.de/uploads/BSK_After_9de7feda0b.webp" 
+              before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
+              after-image="/uploads/BSK_After_9de7feda0b.webp" 
             />
           </div>
         </div>
       </div>
       <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
-            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"></path>
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
     <section>
       <div class="container-10 text-center py-5">
         <h3>{{ $t('home.finalCall.title') }}</h3>
-        <button class="pinkBtn mt-3" 
-                @click.prevent="toggleContactBubble"
+        <button
+class="pinkBtn mt-3" 
                 role="button"
-                :aria-label="$t('home.finalCall.button')">{{ $t('home.finalCall.button') }}</button>
+                :aria-label="$t('home.finalCall.button')"
+                @click.prevent="toggleContactBubble">{{ $t('home.finalCall.button') }}</button>
       </div>
     </section>
-    <MarqueeBanner :items="logoItems" :logoHeight="60" :title="$t('home.marqueeBanner.title')" />
-    <FAQArea pageLink="/" :headline="$t('home.faqArea.headline')" />
+    <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('home.marqueeBanner.title')" />
+    <FAQArea page-link="/" :headline="$t('home.faqArea.headline')" />
 
   </div>
 </template>
@@ -342,31 +380,25 @@ const logoItems = computed(() => {
     height: 100%
 
     .canDoItem
-    display: flex
-    flex-direction: column
-    align-items: center
-    justify-content: flex-start
-    text-align: center
-    color: black
-    height: 100%
-    margin-top: .5rem
-    
-    &:nth-child(1) .imageBox
-      border-radius: $loopShape1
-    &:nth-child(2) .imageBox
-      border-radius: $loopShape2
-    &:nth-child(3) .imageBox
-      border-radius: $loopShape3
-    &:nth-child(4) .imageBox
-      border-radius: $loopShape4
       
       .imageBox
+        margin: 2rem auto          
         width: 100%
         max-width: 280px
-      padding-bottom: 75% /* 4:3 Verhältnis */
-      background-size: cover
-      background-position: center
-      margin-bottom: 2rem
+        aspect-ratio: 5 / 4
+        object-fit: cover
+        border-radius: 1rem
+        display: block
+    
+        // Individuelle Formen für jedes Bild
+        &:nth-child(1) 
+          border-radius: $loopShape1
+        &:nth-child(2) 
+          border-radius: $loopShape2
+        &:nth-child(3) 
+          border-radius: $loopShape3
+        &:nth-child(4) 
+          border-radius: $loopShape4
 
     h3
       font-size: 1.2rem