update

app/leistungen/[slug]/page.module.css

@@ -13,8 +13,8 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
-  align-items: center;
+  gap: var(--space-2);
+  align-items: left;
 }
 
 .decoration {
@@ -39,18 +39,20 @@
 
 .heading {
   color: var(--color-heading);
-  max-width: 24ch;
+  max-width: 20ch;
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  text-align: center;
-  align-self: center;
+  text-align: left;
+  align-self: left;
+  position: relative;
+  z-index: 2;
 }
 
 .headingSub {
-  font-size: var(--font-size-h3);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-muted);
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-medium);
+ /*  color: var(--color-text-muted); */
   letter-spacing: var(--letter-spacing-tight);
 }
 
@@ -61,12 +63,12 @@
 }
 
 .imageWrapper {
+  display: none;
   position: relative;
-  width: min(100%, 300px);
+  width: 100%;
   margin-inline: auto;
-  aspect-ratio: 4 / 3;
+  aspect-ratio: 21 / 9;
   flex-shrink: 0;
-  order: -1;
   z-index: 1;
 }
 
@@ -105,19 +107,33 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--space-6);
-  align-items: center;
-  text-align: center;
+  align-items: left;
+  text-align: left;
 }
 
 .lead {
   font-size: var(--font-size-base);
-  text-align: center;
+  text-align: left;
   width: min(100%, 48ch);
+}
+
+.sliderSection {
+  padding-block: var(--space-16);
+}
+
+.slidesHeading {
+  max-width: 1024px;
   margin-inline: auto;
+  padding-inline: var(--space-4);
+  text-align: center;
+  margin-bottom: var(--space-8);
 }
 
 /* Tablet: 768px */
 @media (min-width: 768px) {
+  .sliderSection {
+    padding-block: var(--space-24);
+  }
   .content {
     flex-direction: row;
     align-items: flex-start;
@@ -126,6 +142,7 @@
 
   .inner {
     align-items: flex-start;
+    gap: var(--space-8);
   }
 
   .heading {
@@ -149,9 +166,9 @@
   }
 
   .imageWrapper {
+    display: block;
     width: 260px;
-
-    order: 0; /* zurück zur normalen Reihenfolge */
+    aspect-ratio: 4 / 3;
   }
 
   .dot {

app/leistungen/[slug]/page.tsx

@@ -3,10 +3,20 @@ import { leistungen } from "../data";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import { Slider } from "@/components/slider/Slider";
 import styles from "./page.module.css";
+import MaintenanceCleaningSection from "@/components/MaintenanceCleaningSection";
+import QualityClaimSection from "@/components/QualityClaimSection";
+import ConceptSection from "@/components/ConceptSection";
+import ProcessSection from "@/components/ProcessSection";
+import FaqSection from "@/components/faq/FaqSection";
+import { leistungenFaq } from "@/components/faq/faqData";
+import ContactCtaSection from "@/components/contact/ContactCtaSection";
 
 export function generateStaticParams() {
-  return leistungen.map((item) => ({ slug: item.slug }));
+  return leistungen.map((item) => ({
+    slug: item.slug,
+  }));
 }
 
 export default async function LeistungDetail({
@@ -15,9 +25,13 @@ export default async function LeistungDetail({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
-  const leistung = leistungen.find((item) => item.slug === slug);
 
-  if (!leistung) notFound();
+  const leistung = leistungen.find((item) => item.slug === slug);
+  const faqEntry = leistungenFaq.find((item) => item.slug === slug);
+
+  if (!leistung) {
+    notFound();
+  }
 
   return (
     <main>
@@ -28,6 +42,7 @@ export default async function LeistungDetail({
               <span key={i} className={styles.dot} />
             ))}
           </div>
+
           <h1 id="hero-heading" className={styles.heading}>
             {leistung.titleMain}
             <span className={styles.headingSub}>{leistung.titleSub}</span>
@@ -48,6 +63,7 @@ export default async function LeistungDetail({
 
             <div className={styles.body}>
               <p className={`lead ${styles.lead}`}>{leistung.text}</p>
+
               <Link href="/kontakt" className="btn btn--filled">
                 <span className="btn-icon animate" aria-hidden="true">
                   <ArrowRightIcon size={18} weight="bold" />
@@ -58,6 +74,45 @@ export default async function LeistungDetail({
           </div>
         </div>
       </section>
+
+      {leistung.slides.length > 0 && (
+        <section
+          className={styles.sliderSection}
+          aria-label={`Weitere Informationen zur ${leistung.titleMain}`}
+        >
+          <h2 className={styles.slidesHeading}>{leistung.titleSlides}</h2>
+          <div className={styles.inner}>
+            <Slider slides={leistung.slides} imageAlt={leistung.imageAlt} />
+          </div>
+        </section>
+      )}
+
+      <section>
+        <MaintenanceCleaningSection {...leistung.maintenanceSection} />
+      </section>
+
+      <section>
+        <QualityClaimSection {...leistung.qualityClaimSection} />
+      </section>
+
+      <section>
+        <ConceptSection {...leistung.conceptSection} />
+      </section>
+
+      <section>
+        <ProcessSection {...leistung.processSection} />
+      </section>
+
+      <section>
+        <FaqSection
+          title={faqEntry?.title ?? "Häufige Fragen"}
+          items={faqEntry?.faq ?? []}
+        />
+      </section>
+
+<section>
+  <ContactCtaSection {...leistung.contactCtaSection} />
+</section>
     </main>
   );
 }