feat(ui): Startseite mit eigenstaendigen Abschnitten statt Schablonen-Zickzack

- Aktuelle Ernte: bei ein, zwei Produkten steht die Ueberschrift als
  eigene Spalte daneben, statt ueber einem halb leeren Dreierraster.
- Herkunft: Foto randlos ueber die halbe Seitenbreite, Text daneben,
  ohne Rahmen.
- Philosophie: typografische Reihe mit Trennlinien und grossen
  Serif-Titeln statt vier Icon-Karten.
- Region: breites Bild, der Text liegt als Tafel ueberlappend darueber.
- Geschaeftskunden: kompakte Tafel mit randlosem Bild statt eines dritten
  grossen Bild/Text-Wechsels.

Inhalte, Texte und Content-Schluessel bleiben unveraendert.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/components/home-sections-b.tsx

@@ -1,4 +1,4 @@
-import { Container, SectionHeading, LinkButton, FramedMedia } from "@/components/ui";
+import { Container, SectionHeading, LinkButton } from "@/components/ui";
 import { ProcessPath } from "@/components/process-path";
 import { HoneycombPattern, HexMark } from "@/components/honeycomb";
 import { ScrollReveal } from "@/components/scroll-reveal";
@@ -43,11 +43,24 @@ export async function RegionalSection() {
   );
   return (
     <section className="py-24">
-      <Container className="grid md:grid-cols-2 gap-16 lg:gap-24 items-center">
-        <ScrollReveal className="order-2 md:order-1">
-          <SectionHeading
-            title={t.home.regionalSection.title}
+      <Container>
+        {/* Breites Bild, der Text legt sich als Tafel darueber — Tiefe statt
+            eines weiteren Bild-neben-Text-Wechsels. */}
+        <ScrollReveal>
+          <ContentImage
+            src={content["home.regionalSection.image"] || null}
+            alt=""
+            tone="forest"
+            className="aspect-[4/3] w-full sm:aspect-[16/9]"
+            label={t.home.regionalSection.eyebrow}
+            sizes="(min-width: 1280px) 1200px, 100vw"
           />
+        </ScrollReveal>
+        <ScrollReveal
+          delay={0.1}
+          className="relative mx-4 -mt-16 max-w-2xl bg-background p-8 shadow-[0_24px_50px_-34px_rgba(36,53,43,0.45)] sm:mx-10 sm:p-10 lg:-mt-40 lg:ml-16 lg:p-12"
+        >
+          <SectionHeading title={t.home.regionalSection.title} />
           <p className="mt-6 text-ink/75 leading-relaxed">{content["home.regionalSection.paragraph1"]}</p>
           <p className="mt-4 text-ink/75 leading-relaxed">{content["home.regionalSection.paragraph2"]}</p>
           <div className="mt-8 flex flex-wrap gap-4">
@@ -59,18 +72,6 @@ export async function RegionalSection() {
             </LinkButton>
           </div>
         </ScrollReveal>
-        <ScrollReveal className="order-1 md:order-2" delay={0.1}>
-          <FramedMedia side="left">
-            <ContentImage
-              src={content["home.regionalSection.image"] || null}
-              alt=""
-              tone="forest"
-              className="aspect-[4/5] w-full"
-              label={t.home.regionalSection.eyebrow}
-              sizes="(min-width: 768px) 50vw, 100vw"
-            />
-          </FramedMedia>
-        </ScrollReveal>
       </Container>
     </section>
   );
@@ -120,27 +121,26 @@ export async function BusinessTeaser() {
   );
   return (
     <section className="py-24">
-      <Container className="grid md:grid-cols-2 gap-16 lg:gap-24 items-center">
-        <ScrollReveal>
-          <FramedMedia>
-            <ContentImage
-              src={content["home.businessTeaser.image"] || null}
-              alt=""
-              tone="honey"
-              className="aspect-[4/5] w-full"
-              label={t.home.businessTeaser.eyebrow}
-              sizes="(min-width: 768px) 50vw, 100vw"
-            />
-          </FramedMedia>
-        </ScrollReveal>
-        <ScrollReveal delay={0.1}>
-          <SectionHeading
-            title={t.home.businessTeaser.title}
+      <Container>
+        {/* Kompakte Tafel statt eines dritten grossen Bild/Text-Blocks: ein
+            Angebot fuer eine kleinere Zielgruppe, entsprechend zurueckhaltend. */}
+        <ScrollReveal className="grid overflow-hidden border border-ink/10 bg-background md:grid-cols-5">
+          <div className="flex flex-col justify-center p-8 sm:p-12 md:col-span-3 lg:p-16">
+            <SectionHeading title={t.home.businessTeaser.title} />
+            <p className="mt-6 max-w-[55ch] text-ink/75 leading-relaxed">{content["home.businessTeaser.paragraph"]}</p>
+            <LinkButton href="/unternehmen" className="mt-8 self-start">
+              {t.home.businessTeaser.cta}
+            </LinkButton>
+          </div>
+          <ContentImage
+            src={content["home.businessTeaser.image"] || null}
+            alt=""
+            tone="honey"
+            rounded={false}
+            className="aspect-[4/3] w-full md:col-span-2 md:aspect-auto md:h-full md:min-h-[22rem]"
+            label={t.home.businessTeaser.eyebrow}
+            sizes="(min-width: 768px) 40vw, 100vw"
           />
-          <p className="mt-6 text-ink/75 leading-relaxed">{content["home.businessTeaser.paragraph"]}</p>
-          <LinkButton href="/unternehmen" className="mt-8">
-            {t.home.businessTeaser.cta}
-          </LinkButton>
         </ScrollReveal>
       </Container>
     </section>