Geschaeftskunden

src/App.tsx

@@ -59,6 +59,18 @@ import Risikoschutz from "./pages/Risikoschutz";
 import Sachversicherung from "./pages/Sachversicherung";
 import Vermoegenssicherung from "./pages/Vermoegenssicherung";
 import RiesterRente from "./pages/RiesterRente";
+import GeschaeftskundenFlottenversicherung from "./pages/GeschaeftskundenFlottenversicherung";
+import GeschaeftskundenBetriebsrente from "./pages/GeschaeftskundenBetriebsrente";
+import GeschaeftskundenBetriebshaftpflicht from "./pages/GeschaeftskundenBetriebshaftpflicht";
+import GeschaeftskundenBetriebsunterbrechung from "./pages/GeschaeftskundenBetriebsunterbrechung";
+import GeschaeftskundenBetriebskrankenversicherung from "./pages/GeschaeftskundenBetriebskrankenversicherung";
+import GeschaeftskundenCyberVersicherung from "./pages/GeschaeftskundenCyberVersicherung";
+import GeschaeftskundenGebaeudeversicherung from "./pages/GeschaeftskundenGebaeudeversicherung";
+import GeschaeftskundenRechtsschutz from "./pages/GeschaeftskundenRechtsschutz";
+import GeschaeftskundenRisikoschutz from "./pages/GeschaeftskundenRisikoschutz";
+import GeschaeftskundenSachversicherung from "./pages/GeschaeftskundenSachversicherung";
+import GeschaeftskundenUmwelthaftpflicht from "./pages/GeschaeftskundenUmwelthaftpflicht";
+import GeschaeftskundenVermoegenssicherung from "./pages/GeschaeftskundenVermoegenssicherung";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -160,6 +172,18 @@ const App = () => {
               <Route path="/sachversicherung" element={<Sachversicherung />} />
               <Route path="/vermoegenssicherung" element={<Vermoegenssicherung />} />
               <Route path="/riester-rente" element={<RiesterRente />} />
+              <Route path="/geschaeftskunden/flottenversicherung" element={<GeschaeftskundenFlottenversicherung />} />
+              <Route path="/geschaeftskunden/betriebsrente" element={<GeschaeftskundenBetriebsrente />} />
+              <Route path="/geschaeftskunden/betriebshaftpflicht" element={<GeschaeftskundenBetriebshaftpflicht />} />
+              <Route path="/geschaeftskunden/betriebsunterbrechung" element={<GeschaeftskundenBetriebsunterbrechung />} />
+              <Route path="/geschaeftskunden/betriebskrankenversicherung" element={<GeschaeftskundenBetriebskrankenversicherung />} />
+              <Route path="/geschaeftskunden/cyber-versicherung" element={<GeschaeftskundenCyberVersicherung />} />
+              <Route path="/geschaeftskunden/gebaeudeversicherung" element={<GeschaeftskundenGebaeudeversicherung />} />
+              <Route path="/geschaeftskunden/rechtsschutz" element={<GeschaeftskundenRechtsschutz />} />
+              <Route path="/geschaeftskunden/risikoschutz" element={<GeschaeftskundenRisikoschutz />} />
+              <Route path="/geschaeftskunden/sachversicherung" element={<GeschaeftskundenSachversicherung />} />
+              <Route path="/geschaeftskunden/umwelthaftpflicht" element={<GeschaeftskundenUmwelthaftpflicht />} />
+              <Route path="/geschaeftskunden/vermoegenssicherung" element={<GeschaeftskundenVermoegenssicherung />} />
               <Route path="*" element={<NotFound />} />
             </Routes>
           </BrowserRouter>

src/pages/Geschaeftskunden.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
-import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, Building, Briefcase, Truck } from 'lucide-react';
+import { Heart, Building, Truck, Shield, Briefcase, TrendingUp, Clock, DollarSign, Users, Phone, Mail, MapPin } from 'lucide-react';
 import Layout from '@/components/Layout';
 import HeroSlider from '@/components/HeroSlider';
 
@@ -11,16 +11,142 @@ const Geschaeftskunden = () => {
   const navigate = useNavigate();
   const baseUrl = import.meta.env.BASE_URL;
   const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
-  const [focusTopics, setFocusTopics] = useState<Array<{ title: string; href: string; image: string }>>([]);
-  const [services, setServices] = useState<Array<{ title: string; description: string; features: string[] }>>([]);
-  const [benefits, setBenefits] = useState<Array<{ title: string; description: string }>>([]);
+  const [focusTopics, setFocusTopics] = useState<
+    Array<{
+      id: string;
+      title: string;
+      subtitle?: string;
+      href: string;
+      image: string;
+      links: Array<{ title: string; href: string }>;
+    }>
+  >([]);
+  const [showContactForm, setShowContactForm] = useState(false);
 
   useEffect(() => {
     const pool = [
-      { title: t('focus.items.fleet', 'Flottenversicherung'), href: '/flottenversicherung', image: assetUrl('Fotolia_8654128_XS.jpg') },
-      { title: t('focus.items.assets', 'Vermögenssicherung'), href: '/finanzen', image: assetUrl('iStock-957363908.jpg') },
-      { title: t('focus.items.property', 'Sachversicherung'), href: '/hausrat', image: assetUrl('iStock-495809266.jpg') },
-      { title: t('focus.items.risk', 'Risikoschutz'), href: '/unfall', image: assetUrl('Fotolia_67327775_XS.jpg') },
+      {
+        id: 'flottenversicherung',
+        title: 'Flottenversicherung',
+        subtitle: 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.',
+        href: '/geschaeftskunden/flottenversicherung',
+        image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
+        links: [
+          { title: 'Flottenmanagement', href: '/geschaeftskunden/flottenversicherung' },
+        ],
+      },
+      {
+        id: 'betriebsrente',
+        title: 'Betriebsrente (BAV)',
+        subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
+        href: '/geschaeftskunden/betriebsrente',
+        image: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
+        links: [
+          { title: 'Mitarbeiter-Vorsorge', href: '/geschaeftskunden/betriebsrente' },
+        ],
+      },
+      {
+        id: 'betriebskrankenversicherung',
+        title: 'Betriebskrankenversicherung',
+        subtitle: 'Gesundheitsschutz für Ihre Mitarbeiter\nZukunftssicher investieren.',
+        href: '/geschaeftskunden/betriebskrankenversicherung',
+        image: assetUrl('Geascheaftskunden/iStock-1134003031.jpg'),
+        links: [
+          { title: 'Mitarbeiter schützen', href: '/geschaeftskunden/betriebskrankenversicherung' },
+        ],
+      },
+      {
+        id: 'vermoegen',
+        title: t('focus.items.assets', 'Vermögenssicherung'),
+        subtitle: 'Schützen Sie Ihr Unternehmensvermögen\nZukunftssicher handeln.',
+        href: '/geschaeftskunden/vermoegen',
+        image: assetUrl('Geascheaftskunden/iStock-948602744.jpg'),
+        links: [
+          { title: 'Unternehmensvermögen', href: '/geschaeftskunden/vermoegen' },
+        ],
+      },
+      {
+        id: 'gebaeudeversicherung',
+        title: 'Gebäudeversicherung',
+        subtitle: 'Schutz für Ihre Unternehmensgebäude\nSicher und umfassend.',
+        href: '/geschaeftskunden/gebaeudeversicherung',
+        image: assetUrl('Geascheaftskunden/iStock-115948634.jpg'),
+        links: [
+          { title: 'Gebäude schützen', href: '/geschaeftskunden/gebaeudeversicherung' },
+        ],
+      },
+      {
+        id: 'betriebshaftpflicht',
+        title: 'Betriebshaftpflicht',
+        subtitle: 'Schutz vor Haftungsansprüchen\nSicher für Ihr Business.',
+        href: '/geschaeftskunden/betriebshaftpflicht',
+        image: assetUrl('Geascheaftskunden/Fotolia_3984526_XS.jpg'),
+        links: [
+          { title: 'Haftpflicht schützen', href: '/geschaeftskunden/betriebshaftpflicht' },
+        ],
+      },
+      {
+        id: 'betriebsunterbrechung',
+        title: 'Betriebsunterbrechung',
+        subtitle: 'Absicherung bei Stillstand\nFinanzielle Sicherheit.',
+        href: '/geschaeftskunden/betriebsunterbrechung',
+        image: assetUrl('Geascheaftskunden/iStock-940251778.jpg'),
+        links: [
+          { title: 'Stillstand absichern', href: '/geschaeftskunden/betriebsunterbrechung' },
+        ],
+      },
+      {
+        id: 'sachversicherung',
+        title: t('focus.items.property', 'Sachversicherung'),
+        subtitle: 'Comprehensive protection for your business assets\nInsure what matters most.',
+        href: '/geschaeftskunden/sachversicherung',
+        image: assetUrl('iStock-943842590.jpg'),
+        links: [
+          { title: 'Business property', href: '/geschaeftskunden/sachversicherung' },
+        ],
+      },
+      {
+        id: 'risikoschutz',
+        title: t('focus.items.risk', 'Risikoschutz'),
+        subtitle: 'Umfassender Schutz für alle Unternehmensrisiken\nSicher in die Zukunft.',
+        href: '/geschaeftskunden/risikoschutz',
+        image: assetUrl('Geascheaftskunden/iStock-694835984.jpg'),
+        links: [
+          { title: 'Risikoanalyse', href: '/geschaeftskunden/risikoschutz' },
+        ],
+      },
+      {
+        id: 'rechtsschutz',
+        title: 'Rechtsschutz',
+        subtitle: 'Juristische Absicherung für Ihr Unternehmen\nRechtssicherheit gewähren.',
+        href: '/geschaeftskunden/rechtsschutz',
+        image: assetUrl('Geascheaftskunden/iStock-1079882856.jpg'),
+        links: [
+          { title: 'Unternehmens-Rechtsschutz', href: '/geschaeftskunden/rechtsschutz' },
+        ],
+      },
+      {
+        id: 'cyber',
+        title: 'Cyber-Versicherung',
+        subtitle: 'Schutz vor digitalen Risiken\nIT-Sicherheit für Ihr Business.',
+        href: '/geschaeftskunden/cyber',
+        image: assetUrl('Geascheaftskunden/iStock-922758092.jpg'),
+        links: [
+          { title: 'Details', href: '/geschaeftskunden/cyber' },
+          { title: 'Cyber-Schutz', href: '/geschaeftskunden/cyber' },
+        ],
+      },
+      {
+        id: 'umwelt',
+        title: 'Umwelthaftpflicht',
+        subtitle: 'Umweltrechtliche Absicherung\nNachhaltig und sicher.',
+        href: '/geschaeftskunden/umwelt',
+        image: assetUrl('Geascheaftskunden/iStock-1039705312.jpg'),
+        links: [
+          { title: 'Umweltrisiken', href: '/geschaeftskunden/umwelt' },
+          { title: 'Umwelt-Schutz', href: '/geschaeftskunden/umwelt' },
+        ],
+      },
     ];
 
     setFocusTopics(
@@ -28,25 +154,6 @@ const Geschaeftskunden = () => {
     );
   }, [t]);
 
-  useEffect(() => {
-    const servicesDataRaw = t('services.items', { returnObjects: true }) as unknown;
-    const servicesData = Array.isArray(servicesDataRaw)
-      ? (servicesDataRaw as Array<{ title: string; description: string; features: string[] }>)
-      : [];
-    setServices(servicesData);
-  }, [t]);
-
-  useEffect(() => {
-    const benefitsDataRaw = t('benefits.items', { returnObjects: true }) as unknown;
-    const benefitsData = Array.isArray(benefitsDataRaw)
-      ? (benefitsDataRaw as Array<{ title: string; description: string }>)
-      : [];
-    setBenefits(benefitsData);
-  }, [t]);
-
-  const serviceIcons = [Building, Truck, Briefcase, Shield];
-  const benefitIcons = [TrendingUp, Clock, DollarSign, Users];
-
   return (
     <Layout>
       <HeroSlider
@@ -69,31 +176,70 @@ const Geschaeftskunden = () => {
         ]}
       />
 
-      {/* Services Section */}
-      <section className="py-16">
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold text-center mb-12">
-            {t('services.title', 'Unsere Geschäftskunden-Lösungen')}
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {services.map((service, index) => {
-              const Icon = serviceIcons[index] ?? Shield;
-              return (
-                <div key={index} className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
-                  <Icon className="w-12 h-12 text-blue-600 mb-4" />
-                  <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
-                  <p className="text-gray-600 mb-4">{service.description}</p>
-                  <ul className="space-y-2">
-                    {service.features.map((feature, idx) => (
-                      <li key={idx} className="text-sm text-gray-500 flex items-center">
-                        <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
-                        {feature}
-                      </li>
-                    ))}
-                  </ul>
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+              Themen für Geschäftskunden
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Die wichtigsten Lösungen für Ihr Unternehmen
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {focusTopics.map((item) => (
+              <div
+                key={`${item.id}-${item.title}`}
+                className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
+                role="link"
+                tabIndex={0}
+                onClick={() => navigate(item.href)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
+                }}
+              >
+                <div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
+                  <div
+                    className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
+                    style={{ backgroundImage: `url(${item.image})` }}
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+
+                  <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
+                    <div className="text-xl font-bold">{item.title}</div>
+                    {item.subtitle ? (
+                      <div className="mt-1 text-sm text-white/90 whitespace-pre-line">{item.subtitle}</div>
+                    ) : null}
+                  </div>
                 </div>
-              );
-            })}
+
+                <div className="mt-4 p-4 bg-white rounded-lg shadow-md">
+                  <div className="space-y-2">
+                    <div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">Details:</div>
+                    <div className="grid grid-cols-1 gap-2">
+                      {item.links.map((link) => (
+                        <Link
+                          key={`${item.id}-${link.href}-${link.title}`}
+                          to={link.href}
+                          className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (link.href.includes('#')) {
+                              e.preventDefault();
+                              navigate(link.href);
+                            }
+                          }}
+                        >
+                          <span className="w-2 h-2 bg-blue-700 rounded-full mr-2 group-hover:bg-blue-900 transition-colors" />
+                          {link.title}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       </section>
@@ -102,82 +248,147 @@ const Geschaeftskunden = () => {
       <section className="py-16 bg-white">
         <div className="container mx-auto px-4">
           <h2 className="text-3xl font-bold text-center mb-12">
-            {t('benefits.title', 'Ihre Vorteile als Geschäftskunde')}
+            Ihre Vorteile als Geschäftskunde
           </h2>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {benefits.map((benefit, index) => {
-              const Icon = benefitIcons[index] ?? Shield;
-              return (
-                <div key={index} className="text-center">
-                  <Icon className="w-16 h-16 text-blue-600 mx-auto mb-4" />
-                  <h3 className="text-xl font-semibold mb-3">{benefit.title}</h3>
-                  <p className="text-gray-600">{benefit.description}</p>
-                </div>
-              );
-            })}
+            <div className="text-center">
+              <TrendingUp className="w-16 h-16 text-blue-600 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-3">Wettbewerbsvorteil</h3>
+              <p className="text-gray-600">Stärken Sie Ihre Marktposition durch optimierten Versicherungsschutz</p>
+            </div>
+            <div className="text-center">
+              <Clock className="w-16 h-16 text-blue-600 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-3">Zeitersparnis</h3>
+              <p className="text-gray-600">Effiziente Beratung und Verwaltung aller Versicherungsanliegen</p>
+            </div>
+            <div className="text-center">
+              <DollarSign className="w-16 h-16 text-blue-600 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-3">Kostenoptimierung</h3>
+              <p className="text-gray-600">Maßgeschneiderte Lösungen zu besten Konditionen für Ihr Unternehmen</p>
+            </div>
+            <div className="text-center">
+              <Users className="w-16 h-16 text-blue-600 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-3">Persönliche Beratung</h3>
+              <p className="text-gray-600">Individuelle Betreuung durch erfahrene Versicherungsexperten</p>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Focus Topics */}
-      <section className="py-16">
-        <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold text-center mb-12">
-            {t('focus.title', 'Unsere Schwerpunkte')}
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {focusTopics.map((topic, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow cursor-pointer"
-                   onClick={() => navigate(topic.href)}>
-                <div className="h-48 bg-gray-200">
-                  <img 
-                    src={topic.image} 
-                    alt={topic.title}
-                    className="w-full h-full object-cover"
+      {/* Geschäftskunden Kontakt Section */}
+      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-10 text-center text-white shadow-2xl max-w-6xl mx-auto mb-12">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">
+          Kontaktieren Sie uns
+        </h2>
+        <p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
+          Lassen Sie sich unverbindlich zu Ihren Geschäftskunden-Lösungen beraten.
+        </p>
+        
+        {/* Buttons - immer sichtbar */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button 
+            className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg"
+            onClick={() => window.location.href = 'tel:01719864053'}
+          >
+            <Phone className="h-5 w-5 mr-2" />
+            Jetzt anrufen
+          </Button>
+          <Button 
+            variant="outline" 
+            className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold"
+            onClick={() => setShowContactForm(!showContactForm)}
+          >
+            <Mail className="h-5 w-5 mr-2" />
+            Angebot anfordern
+          </Button>
+        </div>
+
+        {/* Kontaktformular - erst sichtbar beim Klick auf "Angebot anfordern" */}
+        {showContactForm && (
+          <div className="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-2xl mx-auto animate-fade-in">
+            <h3 className="text-2xl font-bold mb-4">Angebot anfordern</h3>
+            <form className="space-y-4">
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Firma*</label>
+                  <input 
+                    type="text" 
+                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
+                    placeholder="Ihr Firmenname"
+                    required
                   />
                 </div>
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold mb-2">{topic.title}</h3>
-                  <p className="text-blue-600 hover:text-blue-700">
-                    {t('focus.learnMore', 'Mehr erfahren')} →
-                  </p>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Name*</label>
+                  <input 
+                    type="text" 
+                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
+                    placeholder="Ihr Name"
+                    required
+                  />
                 </div>
               </div>
-            ))}
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-2">E-Mail*</label>
+                  <input 
+                    type="email" 
+                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
+                    placeholder="ihre@email.de"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Telefon</label>
+                  <input 
+                    type="tel" 
+                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
+                    placeholder="0123 456789"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-2">Interessierte Leistungen</label>
+                <select className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-white/50">
+                  <option value="">Bitte wählen...</option>
+                  <option value="flottenversicherung">Flottenversicherung</option>
+                  <option value="vermoegenssicherung">Vermögenssicherung</option>
+                  <option value="sachversicherung">Sachversicherung</option>
+                  <option value="risikoschutz">Risikoschutz</option>
+                  <option value="betriebshaftpflicht">Betriebshaftpflicht</option>
+                  <option value="betriebsunterbrechung">Betriebsunterbrechung</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-2">Nachricht</label>
+                <textarea 
+                  className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 h-32 resize-none"
+                  placeholder="Ihre Nachricht an uns..."
+                ></textarea>
+              </div>
+              <div className="flex gap-4">
+                <Button 
+                  type="submit"
+                  className="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 font-semibold"
+                >
+                  Anfrage senden
+                </Button>
+                <Button 
+                  type="button"
+                  variant="outline" 
+                  className="border-white text-white hover:bg-white hover:text-blue-600 px-6 py-2 font-semibold"
+                  onClick={() => setShowContactForm(false)}
+                >
+                  Abbrechen
+                </Button>
+              </div>
+            </form>
           </div>
-        </div>
-      </section>
+        )}
+      </div>
 
-      {/* CTA Section */}
-      <section className="py-16 bg-blue-600 text-white">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold mb-4">
-            {t('cta.title', 'Bereit für die optimale Absicherung?')}
-          </h2>
-          <p className="text-xl mb-8 text-blue-100">
-            {t('cta.subtitle', 'Kontaktieren Sie uns für ein unverbindliches Beratungsgespräch')}
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button 
-              size="lg" 
-              className="bg-white text-blue-600 hover:bg-blue-50"
-              onClick={() => navigate('/contact')}
-            >
-              {t('cta.contact', 'Kontakt aufnehmen')}
-            </Button>
-            <Button 
-              size="lg" 
-              variant="outline"
-              className="border-white text-white hover:bg-white hover:text-blue-600"
-              onClick={() => navigate('/service')}
-            >
-              {t('cta.service', 'Unsere Services')}
-            </Button>
-          </div>
-        </div>
-      </section>
     </Layout>
   );
 };
 
-export default Geschaeftskunden;
+export default Geschaeftskunden;

src/pages/Geschaeftskunden.tsx.backup

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Heart } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const Geschaeftskunden = () => {
+  const { t } = useTranslation('geschaeftskunden');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [focusTopics, setFocusTopics] = useState<
+    Array<{
+      id: string;
+      title: string;
+      subtitle?: string;
+      href: string;
+      image: string;
+      links: Array<{ title: string; href: string }>;
+    }>
+  >([]);
+
+  useEffect(() => {
+    const pool = [
+      {
+        id: 'flottenversicherung',
+        title: t('focus.items.fleet', 'Flottenversicherung'),
+        subtitle: 'Optimaler Schutz für Ihr Fuhrpark\nSicher und wirtschaftlich.',
+        href: '/geschaeftskunden/flottenversicherung',
+        image: assetUrl('Fotolia_8654128_XS.jpg'),
+        links: [
+          { title: 'Flottenmanagement', href: '/geschaeftskunden/flottenversicherung' },
+          { title: 'Beratung', href: '/contact' },
+        ],
+      },
+      {
+        id: 'vermoegen',
+        title: t('focus.items.assets', 'Vermögenssicherung'),
+        subtitle: 'Schützen Sie Ihr Unternehmensvermögen\nZukunftssicher handeln.',
+        href: '/geschaeftskunden/vermoegen',
+        image: assetUrl('iStock-957363908.jpg'),
+        links: [
+          { title: 'Unternehmensvermögen', href: '/geschaeftskunden/vermoegen' },
+          { title: 'Beratung', href: '/contact' },
+        ],
+      },
+      {
+        id: 'sachversicherung',
+        title: t('focus.items.property', 'Sachversicherung'),
+        subtitle: 'Comprehensive protection for your business assets\nInsure what matters most.',
+        href: '/geschaeftskunden/sachversicherung',
+        image: assetUrl('iStock-495809266.jpg'),
+        links: [
+          { title: 'Business property', href: '/geschaeftskunden/sachversicherung' },
+          { title: 'Beratung', href: '/contact' },
+        ],
+      },
+      {
+        id: 'risikoschutz',
+        title: t('focus.items.risk', 'Risikoschutz'),
+        subtitle: 'Umfassender Schutz für alle Unternehmensrisiken\nSicher in die Zukunft.',
+        href: '/geschaeftskunden/risikoschutz',
+        image: assetUrl('Fotolia_67327775_XS.jpg'),
+        links: [
+          { title: 'Risikoanalyse', href: '/geschaeftskunden/risikoschutz' },
+          { title: 'Beratung', href: '/contact' },
+        ],
+      },
+    ];
+
+    setFocusTopics(
+      [...pool].sort((a, b) => a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }))
+    );
+  }, [t]);
+
+  const [services, setServices] = useState<Array<{ title: string; description: string; features: string[] }>>([]);
+  const [benefits, setBenefits] = useState<Array<{ title: string; description: string }>>([]);
+
+  useEffect(() => {
+    const servicesDataRaw = t('services.items', { returnObjects: true }) as unknown;
+    const servicesData = Array.isArray(servicesDataRaw)
+      ? (servicesDataRaw as Array<{ title: string; description: string; features: string[] }>)
+      : [];
+    setServices(servicesData);
+  }, [t]);
+
+  useEffect(() => {
+    const benefitsDataRaw = t('benefits.items', { returnObjects: true }) as unknown;
+    const benefitsData = Array.isArray(benefitsDataRaw)
+      ? (benefitsDataRaw as Array<{ title: string; description: string }>)
+      : [];
+    setBenefits(benefitsData);
+  }, [t]);
+
+  const serviceIcons = [Building, Truck, Briefcase, Shield];
+  const benefitIcons = [TrendingUp, Clock, DollarSign, Users];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-1',
+            kicker: t('hero.kicker', 'Versicherungen für Geschäftskunden'),
+            title: t('hero.title', 'Sicherheit für Ihr Unternehmen.'),
+            subtitle: t(
+              'hero.subtitle',
+              'Professionelle Versicherungsberatung für Unternehmen und Selbstständige – individuell, transparent und zuverlässig.'
+            ),
+            imageUrl: assetUrl('iStock-943842590.jpg'),
+            imagePosition: 'center',
+            ctas: [
+              { label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
+              { label: t('hero.secondaryCta', 'Alle Leistungen'), href: '/leistungen' },
+            ],
+          },
+        ]}
+      />
+
+      <section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+              Themen für Geschäftskunden
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Die wichtigsten Lösungen für Ihr Unternehmen
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {focusTopics.map((item) => (
+              <div
+                key={`${item.id}-${item.title}`}
+                className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
+                role="link"
+                tabIndex={0}
+                onClick={() => navigate(item.href)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
+                }}
+              >
+                <div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
+                  <div
+                    className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
+                    style={{ backgroundImage: `url(${item.image})` }}
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+
+                  <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
+                    <div className="text-xl font-bold">{item.title}</div>
+                    {item.subtitle ? (
+                      <div className="mt-1 text-sm text-white/90 whitespace-pre-line">{item.subtitle}</div>
+                    ) : null}
+                  </div>
+                </div>
+
+                <div className="mt-4 p-4 bg-white rounded-lg shadow-md">
+                  <div className="space-y-2">
+                    <div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">Details:</div>
+                    <div className="grid grid-cols-1 gap-2">
+                      {item.links.map((link) => (
+                        <Link
+                          key={`${item.id}-${link.href}-${link.title}`}
+                          to={link.href}
+                          className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (link.href.includes('#')) {
+                              e.preventDefault();
+                              navigate(link.href);
+                            }
+                          }}
+                        >
+                          <span className="w-2 h-2 bg-blue-700 rounded-full mr-2 group-hover:bg-blue-900 transition-colors" />
+                          {link.title}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="py-12 bg-white">
+        <div className="container mx-auto px-4">
+          <div className="max-w-4xl mx-auto rounded-xl border border-gray-200 bg-blue-50 p-6">
+            <div className="flex items-start gap-3">
+              <div className="mt-1">
+                <Heart className="w-6 h-6 text-blue-700" />
+              </div>
+              <div>
+                <div className="text-lg font-bold text-gray-900">Direktkontakt</div>
+                <div className="mt-1 text-sm text-gray-700">Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></div>
+                <div className="mt-1 text-sm text-gray-700">E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </Layout>
+  );
+};
+
+export default Geschaeftskunden;

src/pages/GeschaeftskundenBetriebshaftpflicht.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Gavel, Scale, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenBetriebshaftpflicht = () => {
+  const { t } = useTranslation('geschaeftskundenBetriebshaftpflicht');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Umfassender Schutz',
+      description: 'Sicherheit vor allen Haftungsrisiken'
+    },
+    {
+      icon: Scale,
+      title: 'Rechtssicherheit',
+      description: 'Professionelle Vertretung bei Schadensfällen'
+    },
+    {
+      icon: Users,
+      title: 'Vertrauensschutz',
+      description: 'Sicherheit für Kunden und Partner'
+    },
+    {
+      icon: Activity,
+      title: 'Business-Kontinuität',
+      description: 'Sicherung des Unternehmensfortbestands'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Allgemeine Betriebshaftpflicht',
+      description: 'Grundschutz für alle Unternehmen',
+      details: 'Schutz vor Personen- und Sachschäden aus dem Geschäftsbetrieb'
+    },
+    {
+      title: 'Berufshaftpflicht',
+      description: 'Spezifischer Schutz für bestimmte Berufe',
+      details: 'Erweiterte Deckung für berufsbedingte Risiken wie Ärzte, Anwälte'
+    },
+    {
+      title: 'Produkthaftpflicht',
+      description: 'Schutz bei Produktschäden',
+      details: 'Deckung für Schäden durch fehlerhafte Produkte an Personen und Sachen'
+    },
+    {
+      title: 'Umwelthaftpflicht',
+      description: 'Umweltrechtliche Absicherung',
+      details: 'Schutz bei Umweltschäden und Umweltrisiken'
+    },
+    {
+      title: 'Cyber-Haftpflicht',
+      description: 'Schutz vor digitalen Risiken',
+      details: 'Deckung für Datenschutzverletzungen, Hacker-Angriffe, IT-Fehler'
+    },
+    {
+      title: 'Manager-Haftpflicht',
+      description: 'Persönlicher Schutz für Führungskräfte',
+      details: 'Erweiterte Deckung für persönliche Haftung von Geschäftsführern'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Risikoanalyse',
+      description: 'Ermittlung Ihrer spezifischen Haftungsrisiken'
+    },
+    {
+      step: '2',
+      title: 'Tarif-Vergleich',
+      description: 'Analyse der passenden Versicherungslösungen'
+    },
+    {
+      step: '3',
+      title: 'Optimierung',
+      description: 'Anpassung der Deckungssummen und Risiken'
+    },
+    {
+      step: '4',
+      title: 'Abschluss & Service',
+      description: 'Vertragsabschluss und laufende Betreuung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-betriebshaftpflicht-1',
+            kicker: 'Betriebshaftpflicht für Geschäftskunden',
+            title: 'Sicher für Ihr Business',
+            subtitle: 'Professioneller Schutz vor Haftungsansprüchen für Unternehmen und Selbstständige',
+            imageUrl: assetUrl('Geascheaftskunden/Fotolia_3984526_XS.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Betriebshaftpflicht für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Gavel className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Shield className="w-4 h-4" />
+                          <span>Haftungsschutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Betriebshaftpflicht für Geschäftskunden
+                          <span className="block text-blue-700">Sicher für Ihr Business</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Betriebshaftpflicht schützen Sie sich vor finanziellen Forderungen
+                          durch Dritte. Wir finden die passende Lösung für Ihre spezifischen Risiken.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
+                              <div className="text-gray-600">Alle Haftungsrisiken</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Scale className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Rechtssicherheit</div>
+                              <div className="text-gray-600">Professionelle Vertretung</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/Fotolia_3984526_XS.jpg')}
+                            alt="Betriebshaftpflicht"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Gavel className="w-4 h-4" />
+                              <span>Alle Haftungsrisiken abgedeckt</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihr Unternehmen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Gesetzlich nicht vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber dringend empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schneller Schutz
+                            </CardTitle>
+                            <CardDescription>Sofortige Absicherung möglich.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Haftpflichtlösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Haftpflichtversicherungen, die perfekt auf Ihre
+                          Branche und Unternehmensgröße zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Branche</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Allgemein:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Berufshaftpflicht:</strong> Für spezifische Berufe</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Produkthaftpflicht:</strong> Für Hersteller</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Cyber-Haftpflicht:</strong> Für digitale Risiken</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Betriebshaftpflicht für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Betriebshaftpflicht
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Haftpflicht-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Haftungsrisiken und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Shield className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Betriebshaftpflicht beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenBetriebshaftpflicht;

src/pages/GeschaeftskundenBetriebskrankenversicherung.tsx

@@ -0,0 +1,411 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, HeartPulse, Stethoscope, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenBetriebskrankenversicherung = () => {
+  const { t } = useTranslation('geschaeftskundenBetriebskrankenversicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: HeartPulse,
+      title: 'Mitarbeiter-Gesundheit',
+      description: 'Bessere medizinische Versorgung'
+    },
+    {
+      icon: Shield,
+      title: 'Steuerliche Vorteile',
+      description: 'Absetzbare Beiträge für Unternehmen'
+    },
+    {
+      icon: Users,
+      title: 'Mitarbeiterbindung',
+      description: 'Attraktiver Arbeitgeber durch Zusatzleistungen'
+    },
+    {
+      icon: Activity,
+      title: 'Wettbewerbsvorteil',
+      description: 'Stärkung als Arbeitgebermarke'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Krankentagegeld-Versicherung',
+      description: 'Sicherung bei Arbeitsunfähigkeit',
+      details: 'Tagesgelder bei Krankheit, Rehabilitation, Übergangsgeld'
+    },
+    {
+      title: 'Dread-Disease-Versicherung',
+      description: 'Schutz bei schweren Krankheiten',
+      details: 'Einmalzahlung bei Diagnose, Übernahme von Behandlungskosten'
+    },
+    {
+      title: 'Zahnzusatzversicherung',
+      description: 'Bessere zahnärztliche Versorgung',
+      details: 'Professionelle Reinigung, Füllungen, Kronen, Implantate'
+    },
+    {
+      title: 'Auslandsreisekrankenversicherung',
+      description: 'Schutz bei Auslandsreisen',
+      details: 'Kostenübernahme für medizinische Notfälle, Rückholung'
+    },
+    {
+      title: 'Pflege-Tagegeld-Versicherung',
+      description: 'Zusätzliche Absicherung bei Pflegebedarf',
+      details: 'Tagegeld bei häuslicher Pflege, Pflegekostenübernahme'
+    },
+    {
+      title: 'Unfall-Zusatzversicherung',
+      description: 'Erweiterter Schutz bei Unfällen',
+      details: 'Invaliditätsrente, Unfallrente, Todesfallsumme'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Bedarfsanalyse',
+      description: 'Ermittlung Ihrer Mitarbeiterbedürfnisse'
+    },
+    {
+      step: '2',
+      title: 'Tarif-Vergleich',
+      description: 'Analyse der passenden Versicherungstarife'
+    },
+    {
+      step: '3',
+      title: 'Gestaltung',
+      description: 'Anpassung der Tarife an Ihr Unternehmen'
+    },
+    {
+      step: '4',
+      title: 'Implementierung',
+      description: 'Einführung und laufende Betreuung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-betriebskranken-1',
+            kicker: 'Betriebskrankenversicherung für Geschäftskunden',
+            title: 'Gesundheitsschutz für Ihre Mitarbeiter',
+            subtitle: 'Attraktive Zusatzleistungen mit steuerlichen Vorteilen für Ihr Unternehmen und Ihre Mitarbeiter',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-1134003031.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Tarifvergleich', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Betriebskrankenversicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Stethoscope className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <HeartPulse className="w-4 h-4" />
+                          <span>Mitarbeiter-Gesundheit</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Betriebskrankenversicherung für Geschäftskunden
+                          <span className="block text-blue-700">Zukunftssichere Mitarbeiter</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Betriebskrankenversicherung bieten Sie Ihren Mitarbeitern
+                          attraktive Zusatzleistungen und stärken gleichzeitig Ihre Position als Arbeitgeber.
+                          Profitieren Sie von steuerlichen Vorteilen und besserer Mitarbeiterbindung.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <HeartPulse className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Mitarbeiter-Gesundheit</div>
+                              <div className="text-gray-600">Bessere medizinische Versorgung</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Steuerliche Vorteile</div>
+                              <div className="text-gray-600">Absetzbare Beiträge</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-1134003031.jpg')}
+                            alt="Betriebskrankenversicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Stethoscope className="w-4 h-4" />
+                              <span>Gesundheitsschutz für Mitarbeiter</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden die optimale Lösung für Ihre Mitarbeiter.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Steuerlich absetzbar
+                            </CardTitle>
+                            <CardDescription>Vorteile für Unternehmen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Freiwillig
+                            </CardTitle>
+                            <CardDescription>Keine gesetzliche Pflicht.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Flexible Tarife
+                            </CardTitle>
+                            <CardDescription>Individuelle Anpassung.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Betriebskranken-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Betriebskrankenversicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und Mitarbeiterbedürfnisse zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Unternehmensgröße</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Krankentagegeld:</strong> Basis-Absicherung</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Dread Disease:</strong> Für schwere Krankheiten</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Zahnzusatz:</strong> Für bessere Zahngesundheit</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Auslandsversicherung:</strong> Für Geschäftsreisen</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Betriebskrankenversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Betriebskrankenversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Betriebskranken-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre steuerlichen Vorteile und die optimale Lösung
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Stethoscope className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Betriebskrankenversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenBetriebskrankenversicherung;

src/pages/GeschaeftskundenBetriebsrente.tsx

@@ -0,0 +1,411 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, PiggyBank, TrendingUp, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenBetriebsrente = () => {
+  const { t } = useTranslation('geschaeftskundenBetriebsrente');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Heart,
+      title: 'Mitarbeiterbindung',
+      description: 'Attraktiver Arbeitgeber durch Zusatzleistungen'
+    },
+    {
+      icon: PiggyBank,
+      title: 'Steuervorteile',
+      description: 'Steuerliche Absetzbarkeit für Unternehmen'
+    },
+    {
+      icon: Users,
+      title: 'Soziale Sicherheit',
+      description: 'Bessere Altersvorsorge für Mitarbeiter'
+    },
+    {
+      icon: TrendingUp,
+      title: 'Wettbewerbsvorteil',
+      description: 'Stärkung als Arbeitgebermarke'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Direktversicherung',
+      description: 'Direktabschluss mit Versicherer',
+      details: 'Einfache Verwaltung, günstige Konditionen, transparente Struktur'
+    },
+    {
+      title: 'Pensionskasse',
+      description: 'Mitarbeiter im Mittelpunkt',
+      details: 'Eigene Verwaltung, flexible Gestaltung, hohe Transparenz'
+    },
+    {
+      title: 'Pensionsfonds',
+      description: 'Kapitalmarktgebundene Lösung',
+      details: 'Chancen auf höhere Renditen, flexible Anlagestrategien'
+    },
+    {
+      title: 'Riester-Rente',
+      description: 'Staatlich geförderte Vorsorge',
+      details: 'Zulagen, Steuerfreistellungen, sichere Basisvorsorge'
+    },
+    {
+      title: 'Rürup-Rente',
+      description: 'Für Selbstständige und Freiberufler',
+      details: 'Hohe Steuervorteile, flexible Beiträge, sichere Altersvorsorge'
+    },
+    {
+      title: 'Betriebliche Altersvorsorge',
+      description: 'Umfassende Lösung',
+      details: 'Verschiedene Modelle, individuelle Anpassung, professionelle Beratung'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Bedarfsanalyse',
+      description: 'Ermittlung Ihrer Unternehmensbedürfnisse'
+    },
+    {
+      step: '2',
+      title: 'Konzept-Erstellung',
+      description: 'Entwicklung des passenden Vorsorgekonzepts'
+    },
+    {
+      step: '3',
+      title: 'Implementierung',
+      description: 'Einführung der gewählten Lösung'
+    },
+    {
+      step: '4',
+      title: 'Laufende Betreuung',
+      description: 'Regelmäßige Überprüfung und Optimierung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-betriebsrente-1',
+            kicker: 'Betriebsrente für Geschäftskunden',
+            title: 'Zukunftssichere Altersvorsorge für Ihre Mitarbeiter',
+            subtitle: 'Attraktive Mitarbeiterbindung mit steuerlichen Vorteilen für Ihr Unternehmen',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Rechner', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Betriebsrente (BAV) für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <PiggyBank className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <PiggyBank className="w-4 h-4" />
+                          <span>Altersvorsorge</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Betriebsrente (BAV) für Geschäftskunden
+                          <span className="block text-blue-700">Zukunftssichere Lösungen</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Betriebsrente bieten Sie Ihren Mitarbeitern attraktive
+                          Zusatzleistungen und stärken gleichzeitig Ihre Position als Arbeitgeber.
+                          Profitieren Sie von steuerlichen Vorteilen und staatlichen Förderungen.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Heart className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Mitarbeiterbindung</div>
+                              <div className="text-gray-600">Attraktive Zusatzleistungen</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <TrendingUp className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Steuerliche Vorteile</div>
+                              <div className="text-gray-600">Absetzbarkeit für Unternehmen</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-917884956.jpg')}
+                            alt="Betriebsrente"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <PiggyBank className="w-4 h-4" />
+                              <span>Altersvorsorge für Mitarbeiter</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden die optimale Lösung für Ihre Mitarbeiter.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Steuerlich absetzbar
+                            </CardTitle>
+                            <CardDescription>Vorteile für Unternehmen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Mitarbeiterbindung
+                            </CardTitle>
+                            <CardDescription>Stärkung als Arbeitgeber.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Flexible Modelle
+                            </CardTitle>
+                            <CardDescription>Individuelle Anpassung.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Betriebsrente-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Betriebsrente-Modelle, die perfekt auf Ihre
+                          Unternehmensgröße und Mitarbeiterbedürfnisse zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welches Modell passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Unternehmensgröße</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Direktversicherung:</strong> Für kleine Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Pensionskasse:</strong> Für mittelständische Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Pensionsfonds:</strong> Für flexible Lösungen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Riester/Rürup:</strong> Mit staatlicher Förderung</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Betriebsrente für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Betriebsrente
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Betriebsrente-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre steuerlichen Vorteile und die optimale Lösung
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <PiggyBank className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Betriebsrente beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenBetriebsrente;

src/pages/GeschaeftskundenBetriebsunterbrechung.tsx

@@ -0,0 +1,411 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, AlertCircle, TrendingDown, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenBetriebsunterbrechung = () => {
+  const { t } = useTranslation('geschaeftskundenBetriebsunterbrechung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Finanzielle Sicherheit',
+      description: 'Absicherung bei Einnahmeausfällen'
+    },
+    {
+      icon: TrendingDown,
+      title: 'Kostenübernahme',
+      description: 'Fixkosten und laufende Ausgaben'
+    },
+    {
+      icon: Users,
+      title: 'Mitarbeiter-Schutz',
+      description: 'Sicherung der Arbeitsplätze'
+    },
+    {
+      icon: Activity,
+      title: 'Business-Kontinuität',
+      description: 'Schnelle Wiederherstellung des Betriebs'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Betriebsunterbrechungs-Versicherung',
+      description: 'Klassische Absicherung bei Stillstand',
+      details: 'Deckung für entgangene Gewinne, Fixkosten, laufende Ausgaben'
+    },
+    {
+      title: 'Extra-Kosten-Versicherung',
+      description: 'Zusätzliche Kosten bei Wiederaufnahme',
+      details: 'Übernahme von Mehrkosten für beschleunigte Wiederherstellung'
+    },
+    {
+      title: 'Dritt-Partei-Schaden',
+      description: 'Schäden durch Lieferanten/Kunden',
+      details: 'Deckung für Schäden, die durch Geschäftspartner entstehen'
+    },
+    {
+      title: 'Ertragsausfall-Versicherung',
+      description: 'Spezifischer Schutz bei Umsatzausfällen',
+      details: 'Absicherung bei Ausfall von Schlüsselkunden oder Lieferketten'
+    },
+    {
+      title: 'Elektronik-Versicherung',
+      description: 'Schutz für elektronische Systeme',
+      details: 'Deckung für IT-Systeme, Maschinen, elektronische Geräte'
+    },
+    {
+      title: 'Contingent-Business-Expense',
+      description: 'Krisenmanagement-Unterstützung',
+      details: 'Kostenübernahme für Krisenmanagement und PR-Maßnahmen'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Risikoanalyse',
+      description: 'Ermittlung Ihrer kritischen Geschäftsprozesse'
+    },
+    {
+      step: '2',
+      title: 'Bedarfs-Ermittlung',
+      description: 'Analyse der potenziellen Schadenszenarien'
+    },
+    {
+      step: '3',
+      title: 'Tarif-Gestaltung',
+      description: 'Zuschnitt der Versicherungssummen und Laufzeiten'
+    },
+    {
+      step: '4',
+      title: 'Notfallplanung',
+      description: 'Erstellung von Krisenmanagement-Plänen'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-betriebsunterbrechung-1',
+            kicker: 'Betriebsunterbrechung für Geschäftskunden',
+            title: 'Finanzielle Sicherheit bei Stillstand',
+            subtitle: 'Umfassende Absicherung für Einnahmeausfälle und Betriebskosten bei Geschäftsunterbrechung',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-940251778.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Betriebsunterbrechung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <AlertCircle className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <AlertCircle className="w-4 h-4" />
+                          <span>Stillstand-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Betriebsunterbrechung für Geschäftskunden
+                          <span className="block text-blue-700">Finanzielle Sicherheit</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Betriebsunterbrechungsversicherung sichern Sie Ihr Unternehmen
+                          gegen finanzielle Verluste bei Stillstand. Wir finden die passende Lösung für Ihre
+                          kritischen Geschäftsprozesse.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Finanzielle Sicherheit</div>
+                              <div className="text-gray-600">Einnahmeausfälle gedeckt</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <TrendingDown className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Kostenübernahme</div>
+                              <div className="text-gray-600">Fixkosten und Ausgaben</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-940251778.jpg')}
+                            alt="Betriebsunterbrechung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <AlertCircle className="w-4 h-4" />
+                              <span>Stillstand und Wiederherstellung</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihr Unternehmen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber existenziell wichtig.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Auszahlung
+                            </CardTitle>
+                            <CardDescription>Sofortige Hilfe im Notfall.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900"> Unsere Betriebsunterbrechungs-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Betriebsunterbrechungs-Modelle, die perfekt auf Ihre
+                          Unternehmensgröße und Branche zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Branche</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Klassisch:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Extra-Kosten:</strong> Für schnelle Wiederherstellung</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Dritt-Partei:</strong> Für Lieferketten</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Elektronik:</strong> Für IT-Systeme</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Betriebsunterbrechungsversicherung wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Betriebsunterbrechungsversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Betriebsunterbrechungs-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Stillstandskosten und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <AlertCircle className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Betriebsunterbrechungsversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenBetriebsunterbrechung;

src/pages/GeschaeftskundenCyberVersicherung.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Lock, Globe, ShieldAlert, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenCyberVersicherung = () => {
+  const { t } = useTranslation('geschaeftskundenCyberVersicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Umfassender Schutz',
+      description: 'Alle digitalen Risiken abgedeckt'
+    },
+    {
+      icon: Lock,
+      title: 'Datenschutzkonformität',
+      description: 'DSGVO-konforme Lösungen'
+    },
+    {
+      icon: Globe,
+      title: 'Internationale Absicherung',
+      description: 'Schutz auch im Ausland'
+    },
+    {
+      id: 'activity',
+      title: 'Business-Kontinuität',
+      description: 'Schnelle Hilfe bei Cyber-Angriffen'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Cyber-Haftpflichtversicherung',
+      description: 'Schutz vor Haftungsansprüchen',
+      details: 'Deckung für Datenschutzverletzungen, Hacker-Angriffe, IT-Fehler'
+    },
+    {
+      title: 'IT-Schaden-Versicherung',
+      description: 'Direkte Schadensabdeckung',
+      details: 'Reparaturkosten, Datenwiederherstellung, Betriebsunterbrechung'
+    },
+    {
+      title: 'Drittmannenschutz',
+      description: 'Schutz bei Lieferketten',
+      details: 'Haftungsrisiken von Dienstleistern und Lieferanten'
+    },
+    {
+      title: 'Social-Media-Versicherung',
+      description: 'Schutz bei Social-Media-Fehlern',
+      details: 'Haftungsrisiken durch falsche Beiträge, Urheberrechtsverletzungen'
+    },
+    {
+      title: 'Ransomware-Schutz',
+      description: 'Erpressungssoftware-Abwehr',
+      details: 'Lösegeld, Krisenmanagement, Schadenersatz'
+    },
+    {
+      title: 'Phishing-Schutz',
+      description: 'Betrugsversuch-Abwehr',
+      details: 'Schulung für Mitarbeiter, E-Mail-Sicherheit, Aufklärung'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Risikoanalyse',
+      description: 'Ermittlung Ihrer digitalen Schwachstellen'
+    },
+    {
+      step: '2',
+      title: 'Schutzkonzept',
+      description: 'Entwicklung maßgeschneiderter Sicherheitslösungen'
+    },
+    {
+      step: '3',
+      title: 'Implementierung',
+      description: 'Einrichtung der Schutzmaßnahmen'
+    },
+    {
+      step: '4',
+      title: 'Monitoring',
+      description: 'Laufende Überwachung und Optimierung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-cyber-1',
+            kicker: 'Cyber-Versicherung für Geschäftskunden',
+            title: 'Schutz vor digitalen Risiken',
+            subtitle: 'Umfassende Absicherung für Ihr Unternehmen gegen Cyber-Bedrohungen, Datenverlust und IT-Schäden',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-922758092.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Cyber-Versicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Shield className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <ShieldAlert className="w-4 h-4" />
+                          <span>Digitaler Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Cyber-Versicherung für Geschäftskunden
+                          <span className="block text-blue-700">IT-Sicherheit für Ihr Business</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Cyber-Versicherung schützen Sie Ihr Unternehmen vor den wachsenden digitalen
+                          Bedrohungen. Wir finden die passende Lösung für Ihre spezifischen IT-Risiken.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
+                              <div className="text-gray-600">Alle digitalen Risiken</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Lock className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Datenschutzkonformität</div>
+                              <div className="text-gray-600">DSGVO-konform</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-922758092.jpg')}
+                            alt="Cyber-Versicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Globe className="w-4 h-4" />
+                              <span>Schutz vor Cyber-Bedrohungen</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre IT-Systeme.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber dringend empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Hilfe
+                            </CardTitle>
+                            <CardDescription>24/7 Support verfügbar.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Cyber-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Cyber-Versicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und IT-Infrastruktur zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer IT-Infrastruktur</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Cyber-Haftpflicht:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>IT-Schaden:</strong> Für direkte IT-Schäden</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Drittmannenschutz:</strong> Für Lieferketten</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Ransomware:</strong> Für Erpressungsangriffe</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Cyber-Versicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Cyber-Versicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Cyber-Risiko-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Cyber-Risiken und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Shield className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Cyber-Versicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenCyberVersicherung;

src/pages/GeschaeftskundenFlottenversicherung.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Car, Truck, MapPin, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenFlottenversicherung = () => {
+  const { t } = useTranslation('geschaeftskundenFlottenversicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Umfassender Schutz',
+      description: 'Alle Fahrzeuge optimal abgesichert'
+    },
+    {
+      icon: Car,
+      title: 'Kosteneffizienz',
+      description: 'Günstige Konditionen für den Fuhrpark'
+    },
+    {
+      icon: Users,
+      title: 'Mitarbeiter-Schutz',
+      description: 'Sicherheit für alle Fahrer'
+    },
+    {
+      icon: Activity,
+      title: 'Flexibilität',
+      description: 'Anpassung an Unternehmensbedarf'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Fahrzeug-Haftpflicht',
+      description: 'Schutz bei Personen- und Sachschäden',
+      details: 'Deckung für Schäden, die Sie mit Ihrem Fahrzeug verursachen'
+    },
+    {
+      title: 'Vollkasko-Versicherung',
+      description: 'Schutz für eigene Fahrzeugschäden',
+      details: 'Diebstahl, Vandalismus, Unfallschäden, Naturgefahren'
+    },
+    {
+      title: 'Insassen-Unfallversicherung',
+      description: 'Schutz für Fahrer und Beifahrer',
+      details: 'Invalidität, Todesfall, Krankenhaustagegeld, Kurkostenbeihilfe'
+    },
+    {
+      title: 'Gepäck-Versicherung',
+      description: 'Schutz für mitgeführtes Gut',
+      details: 'Diebstahl, Beschädigung, Verlust von Gepäck und Ladung'
+    },
+    {
+      title: 'Schutzbrief-Versicherung',
+      description: 'Schnelle Hilfe im Notfall',
+      details: 'Pannenhilfe, Abschleppdienst, Mobilitätsservice'
+    },
+    {
+      title: 'Fahrergeld-Versicherung',
+      description: 'Zusätzliche Absicherung für Fahrer',
+      details: 'Todesfall, Invalidität, Unfallrenten für Fahrer'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Fuhrpark-Analyse',
+      description: 'Ermittlung Ihrer Fahrzeugflotte und Bedürfnisse'
+    },
+    {
+      step: '2',
+      title: 'Tarif-Vergleich',
+      description: 'Analyze der passenden Versicherungstarife'
+    },
+    {
+      step: '3',
+      title: 'Optimierung',
+      description: 'Anpassung der Tarife an Ihr Unternehmen'
+    },
+    {
+      step: '4',
+      title: 'Abschluss & Service',
+      description: 'Vertragsabschluss und laufende Betreuung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-flotten-1',
+            kicker: 'Flottenversicherung für Geschäftskunden',
+            title: 'Optimaler Schutz für Ihren Fuhrpark',
+            subtitle: 'Umfassende Absicherung für alle Unternehmensfahrzeuge zu besten Konditionen',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Tarifrechner', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Flottenversicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Car className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Truck className="w-4 h-4" />
+                          <span>Fuhrpark-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Flottenversicherung für Geschäftskunden
+                          <span className="block text-blue-700">Sicher und wirtschaftlich</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Flottenversicherung schützen Sie alle Unternehmensfahrzeuge
+                          zu optimalen Konditionen. Wir finden die passende Lösung für Ihre Fahrzeugflotte.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
+                              <div className="text-gray-600">Alle Fahrzeugtypen</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Car className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Kosteneffizienz</div>
+                              <div className="text-gray-600">Günstige Konditionen</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-637230106.jpg')}
+                            alt="Flottenversicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Truck className="w-4 h-4" />
+                              <span>PKW, LKW, Transporter & mehr</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre Fahrzeugflotte.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Mindestens 2 Fahrzeuge
+                            </CardTitle>
+                            <CardDescription>Ab 2 Fahrzeugen möglich.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Alle Fahrzeugtypen
+                            </CardTitle>
+                            <CardDescription>PKW, LKW, Transporter, Motorräder.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Sofortiger Schutz
+                            </CardTitle>
+                            <CardDescription>Schnelle Vertragsabwicklung.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Flottenlösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Versicherungsmodule, die perfekt auf Ihre
+                          Fahrzeugflotte zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Flotte</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Haftpflicht:</strong> Gesetzlich vorgeschrieben</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Vollkasko:</strong> Für neue/wertvolle Fahrzeuge</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Insassen-Unfall:</strong> Zusätzlicher Schutz</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Schutzbrief:</strong> Pannenhilfe & Service</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Flottenversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Flottenversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Flotten-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Flotten-Kosten und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Truck className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Flottenversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenFlottenversicherung;

src/pages/GeschaeftskundenGebaeudeversicherung.tsx

@@ -0,0 +1,411 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Building, Home, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenGebaeudeversicherung = () => {
+  const { t } = useTranslation('geschaeftskundenGebaeudeversicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Building,
+      title: 'Immobilien-Schutz',
+      description: 'Schutz für Ihre Unternehmensgebäude'
+    },
+    {
+      icon: Shield,
+      title: 'Wert-Erhalt',
+      description: 'Erhaltung Ihrer Investitionen'
+    },
+    {
+      icon: Users,
+      title: 'Mitarbeiter-Schutz',
+      description: 'Sichere Arbeitsumgebung'
+    },
+    {
+      icon: Activity,
+      title: 'Business-Kontinuität',
+      description: 'Schnelle Wiederherstellung nach Schäden'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Gebäude-Versicherung',
+      description: 'Grundschutz für Immobilien',
+      details: 'Schutz vor Feuer, Leitungswasser, Sturm, Hagel, Blitzschlag'
+    },
+    {
+      title: 'Wohngebäude-Versicherung',
+      description: 'Spezifisch für Wohngebäude',
+      details: 'Schutz für private Wohngebäude, auch bei Vermietung'
+    },
+    {
+      title: 'Gewerbegebäude-Versicherung',
+      description: 'Für Produktions- und Lagerhallen',
+      details: 'Schutz für Maschinen, Lager, Betriebsstätten'
+    },
+    {
+      title: 'Landwirtschaftliche Gebäudeversicherung',
+      description: 'Für landwirtschaftliche Betriebe',
+      details: 'Schutz für Scheunen, Ställe, Ernte, Maschinen'
+    },
+    {
+      title: 'Betriebs- und Anlagenversicherung',
+      description: 'Für gewerbliche Anlagen',
+      details: 'Schutz für Maschinen, Anlagen, Einrichtungen'
+    },
+    {
+      title: 'Elementarschaden-Versicherung',
+      description: 'Zusätzlicher Schutz für Bauteile',
+      details: 'Schutz für Konstruktionsschäden, Montageschäden'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Gebäude-Analyse',
+      description: 'Ermittlung Ihrer Immobilien und Risiken'
+    },
+    {
+      step: '2',
+      title: 'Wert-Ermittlung',
+      description: 'Bewertung der Versicherungssummen'
+    },
+    {
+      step: '3',
+      title: 'Tarif-Vergleich',
+      description: 'Analyse der passenden Versicherungsanbieter'
+    },
+    {
+      step: '4',
+      title: 'Vertragsabschluss',
+      description: 'Schnelle und unkomplizierte Abwicklung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-gebaeude-1',
+            kicker: 'Gebäudeversicherung für Geschäftskunden',
+            title: 'Schutz für Ihre Unternehmensgebäude',
+            subtitle: 'Umfassende Absicherung für alle Immobilien und Gewerbe gegen Feuer, Leitungswasser, Sturm und andere Risiken',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-115948634.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Wert-Rechner', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Gebäudeversicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Building className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Building className="w-4 h-4" />
+                          <span>Immobilien-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Gebäudeversicherung für Geschäftskunden
+                          <span className="block text-blue-700">Wert-Erhalt</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Gebäudeversicherung schützen Sie Ihre Immobilien vor den größten Risiken wie
+                          Feuer, Leitungswasser und Sturm. Wir finden die passende Lösung für Ihre spezifischen
+                          Gebäude und Risiken.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Building className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Immobilien-Schutz</div>
+                              <div className="text-gray-600">Schutz für Immobilien</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Wert-Erhalt</div>
+                              <div className="text-gray-600">Erhaltung der Investitionen</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-115948634.jpg')}
+                            alt="Gebäudeversicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Home className="w-4 h-4" />
+                              <span>Schutz für alle Gebäudetypen</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre Immobilien.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Gesetzlich nicht vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber oft empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Regulierung
+                            </CardTitle>
+                            <CardDescription>Sofortige Schadenregulierung.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Gebäude-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Gebäudeversicherungen, die perfekt auf Ihre
+                          Immobilien und Risikoprofile zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Immobilienart</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Gebäudeversicherung:</strong> Für alle Immobilien</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Wohngebäude:</strong> Für private Immobilien</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Gewerbe:</strong> Für Produktionsstätten</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Landwirtschaft:</strong> Für landwirtschaftliche Betriebe</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Gebäudeversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Gebäudeversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Gebäude-Wert-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Versicherungssummen und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Building className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Gebäudeversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenGebaeudeversicherung;

src/pages/GeschaeftskundenRechtsschutz.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Gavel, Scale, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenRechtsschutz = () => {
+  const { t } = useTranslation('geschaeftskundenRechtsschutz');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Gavel,
+      title: 'Rechtssicherheit',
+      description: 'Professionelle Vertretung bei Rechtsstreitigkeiten'
+    },
+    {
+      icon: Shield,
+      title: 'Kostenschutz',
+      description: 'Minimierung von Prozesskosten'
+    },
+    {
+      icon: Users,
+      title: 'Vertrauensschutz',
+      description: 'Stärkung der Kundenbeziehungen'
+    },
+    {
+      icon: Activity,
+      title: 'Business-Kontinuität',
+      description: 'Sicherung bei rechtlichen Auseinandersetzungen'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Allgemeine Rechtsschutz-Versicherung',
+      description: 'Grundschutz für alle Unternehmen',
+      details: 'Deckung für Anwalts-, Gerichts- und Verfahrenskosten'
+    },
+    {
+      title: 'Berufshaftpflicht',
+      description: 'Spezifischer Schutz für bestimmte Berufe',
+      details: 'Erweiterte Deckung für berufsbedingte Risiken wie Ärzte, Anwälte, Architekten'
+    },
+    {
+      title: 'D&O-Versicherung',
+      description: 'Schutz bei Vertrags- und Organisationsfehlern',
+      details: 'Deckung für Organisations-, Haftungs- und Vermögensschäden'
+    },
+    {
+      title: 'IT- und Datenschutz-Rechtsschutz',
+      description: 'Spezifischer Schutz für IT-Systeme',
+      details: 'Deckung für Datenschutzverletzungen, IT-Fehler, Hacker-Angriffe'
+    },
+    {
+      title: 'Patentrecht-Versicherung',
+      description: 'Schutz für geistiges Eigentum',
+      details: 'Deckung für Patente, Marken, Designs, Lizenzen'
+    },
+    {
+      title: 'Media-Rechtsschutz',
+      description: 'Schutz bei Medien- und Urheberrechtsverletzungen',
+      details: 'Deckung für Bildrechte, Texte, Social Media Beiträge'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Risikoanalyse',
+      description: 'Ermittlung Ihrer rechtlichen Risiken'
+    },
+    {
+      step: '2',
+      title: 'Schutzkonzept',
+      description: 'Entwicklung des passenden Rechtsschutzkonzepts'
+    },
+    {
+      step: '3',
+      title: 'Tarif-Gestaltung',
+      description: 'Anpassung der Deckungssummen und Selbstbehalte'
+    },
+    {
+      step: '4',
+      title: 'Laufende Betreuung',
+      description: 'Regelmäßige Überprüfung und Anpassung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-rechtsschutz-1',
+            kicker: 'Rechtsschutz für Geschäftskunden',
+            title: 'Professionelle Vertretung bei Rechtsstreitigkeiten',
+            subtitle: 'Umfassender Schutz vor Haftungsansprüchen aus Ihrer Geschäftstätigkeit mit professioneller Rechtsberatung',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-1079882856.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Rechtsschutz für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Gavel className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Gavel className="w-4 h-4" />
+                          <span>Rechtssicherheit</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Rechtsschutz für Geschäftskunden
+                          <span className="block text-blue-700">Professionelle Vertretung</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Rechtsschutzversicherung schützen Sie sich vor teuren Haftungsansprüchen aus Ihrer
+                          Geschäftstätigkeit. Wir finden die passende Lösung für Ihre spezifischen Risiken und Branchen.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Gavel className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Rechtssicherheit</div>
+                              <div className="text-gray-600">Professionelle Vertretung</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Scale className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Kostenschutz</div>
+                              <div className="text-gray-600">Minimierung von Prozesskosten</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-1079882856.jpg')}
+                            alt="Rechtsschutz"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Scale className="w-4 h-4" />
+                              <span>Professionelle Rechtsberatung</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre Rechtsfragen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber oft empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Hilfe
+                            </CardTitle>
+                            <CardDescription>24/7 Support verfügbar.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Rechtsschutz-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Rechtsschutzversicherungen, die perfekt auf Ihre
+                          Branche und Unternehmensgröße zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Branche</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Allgemein:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Berufshaftpflicht:</strong> Für bestimmte Berufe</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>D&O-Versicherung:</strong> Für Organisationen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>IT-Rechtsschutz:</strong> Für IT-Systeme</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Rechtsschutzversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Rechtsschutzversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Rechtsschutz-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Haftungsrisiken und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Gavel className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Rechtsschutzversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenRechtsschutz;

src/pages/GeschaeftskundenRisikoschutz.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, AlertCircle, TrendingUp, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenRisikoschutz = () => {
+  const { t } = useTranslation('geschaeftskundenRisikoschutz');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Umfassender Schutz',
+      description: 'Alle Unternehmensrisiken abgedeckt'
+    },
+    {
+      icon: TrendingUp,
+      title: 'Wachstumssicherung',
+      description: 'Sichere Unternehmensentwicklung'
+    },
+    {
+      icon: Users,
+      title: 'Vertrauensschutz',
+      description: 'Sicherheit für Kunden und Partner'
+    },
+    {
+      icon: Activity,
+      title: 'Business-Kontinuität',
+      description: 'Sicherung des Unternehmensfortbestands'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Allgemeine Risikoversicherung',
+      description: 'Grundschutz für alle Unternehmen',
+      details: 'Deckung für Betriebsunterbrechung, Haftungsrisiken, Vermögensschäden'
+    },
+    {
+      title: 'Spezial-Risikoversicherung',
+      description: 'Branchenspezifischer Schutz',
+      details: 'Deckung für branchenspezifische Risiken wie Bau, IT, Handel'
+    },
+    {
+      title: 'D&O-Versicherung',
+      description: 'Schutz für Unternehmensführung',
+      details: 'Deckung für persönliche Haftung von Geschäftsführern und Vorständen'
+    },
+    {
+      title: 'Fiduciary-Versicherung',
+      description: 'Schutz bei Verwaltung von Vermögen',
+      details: 'Deckung für Verwaltungsfehler, Pflichtverletzungen'
+    },
+    {
+      title: 'Cyber-Risikoversicherung',
+      description: 'Schutz vor digitalen Risiken',
+      details: 'Deckung für Hacker-Angriffe, Datenschutzverletzungen, IT-Ausfälle'
+    },
+    {
+      title: 'Umweltrisiko-Versicherung',
+      description: 'Schutz vor Umweltschäden',
+      details: 'Deckung für Umweltschäden, Haftungsrisiken, Umwelthaftpflicht'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Risikoanalyse',
+      description: 'Ermittlung Ihrer spezifischen Unternehmensrisiken'
+    },
+    {
+      step: '2',
+      title: 'Risikobewertung',
+      description: 'Analyse und Priorisierung der Risiken'
+    },
+    {
+      step: '3',
+      title: 'Schutzkonzept',
+      description: 'Entwicklung maßgeschneiderter Schutzlösungen'
+    },
+    {
+      step: '4',
+      title: 'Monitoring',
+      description: 'Laufende Überwachung und Optimierung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-risikoschutz-1',
+            kicker: 'Risikoschutz für Geschäftskunden',
+            title: 'Umfassender Schutz für alle Unternehmensrisiken',
+            subtitle: 'Professionelle Absicherung gegen finanzielle Verluste, Haftungsansprüche und Betriebsunterbrechungen',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-694835984.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Risikoschutz für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <AlertCircle className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <AlertCircle className="w-4 h-4" />
+                          <span>Risiko-Management</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Risikoschutz für Geschäftskunden
+                          <span className="block text-blue-700">Sicher in die Zukunft</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einem umfassenden Risikoschutz sichern Sie Ihr Unternehmen vor allen möglichen
+                          finanziellen Risiken. Wir finden die passende Lösung für Ihre spezifischen Bedürfnisse.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
+                              <div className="text-gray-600">Alle Unternehmensrisiken</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <TrendingUp className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Wachstumssicherung</div>
+                              <div className="text-gray-600">Sichere Entwicklung</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-694835984.jpg')}
+                            alt="Risikoschutz"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <AlertCircle className="w-4 h-4" />
+                              <span>Umfassender Risikoschutz</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihr Unternehmen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber dringend empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Hilfe
+                            </CardTitle>
+                            <CardDescription>24/7 Support verfügbar.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Risikoschutz-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Risikoversicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und Branche zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Branche</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Allgemein:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Spezial:</strong> Für bestimmte Branchen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>D&O:</strong> Für Unternehmensführung</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Cyber:</strong> Für digitale Risiken</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum ein umfassender Risikoschutz für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Risikoschutz-Lösung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Risiko-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Unternehmensrisiken und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <AlertCircle className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrem Risikoschutz beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenRisikoschutz;

src/pages/GeschaeftskundenSachversicherung.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Package, Box, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenSachversicherung = () => {
+  const { t } = useTranslation('geschaeftskundenSachversicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Shield,
+      title: 'Wert-Erhalt',
+      description: 'Schutz für Ihr Unternehmensvermögen'
+    },
+    {
+      icon: Package,
+      title: 'Umfassender Schutz',
+      description: 'Alle Sachwerte abgedeckt'
+    },
+    {
+      icon: Users,
+      title: 'Business-Kontinuität',
+      description: 'Schnelle Wiederherstellung nach Schäden'
+    },
+    {
+      icon: Activity,
+      title: 'Wert-Erhalt',
+      description: 'Erhaltung Ihrer Investitionen'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Gebäude-Versicherung',
+      description: 'Schutz für Immobilien',
+      details: 'Deckung für Feuer, Leitungswasser, Sturm, Hagel, Blitzschlag'
+    },
+    {
+      title: 'Maschinen-Versicherung',
+      description: 'Schutz für Produktionsanlagen',
+      details: 'Deckung für Maschinenschäden, Ausfallkosten, Reparaturen'
+    },
+    {
+      title: 'Lager-Versicherung',
+      description: 'Schutz für Waren und Material',
+      details: 'Deckung für Diebstahl, Beschädigung, Verlust von Lagergütern'
+    },
+    {
+      title: 'Elektronik-Versicherung',
+      description: 'Schutz für IT-Systeme',
+      details: 'Deckung für Computer, Server, Netzwerk, Peripheriegeräte'
+    },
+    {
+      title: 'Fuhrpark-Versicherung',
+      description: 'Schutz für Fahrzeuge',
+      details: 'Deckung für Diebstahl, Beschädigung, Unfallschäden'
+    },
+    {
+      title: 'Betriebs- und Anlagenversicherung',
+      description: 'Schutz für gewerbliche Anlagen',
+      details: 'Deckung für Maschinen, Anlagen, Einrichtungen, Betriebsstätten'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Inventur',
+      description: 'Ermittlung Ihrer Sachwerte und Risiken'
+    },
+    {
+      step: '2',
+      title: 'Wert-Ermittlung',
+      description: 'Bewertung der Versicherungssummen'
+    },
+    {
+      step: '3',
+      title: 'Tarif-Vergleich',
+      description: 'Analyse der passenden Versicherungsanbieter'
+    },
+    {
+      step: '4',
+      title: 'Vertragsabschluss',
+      description: 'Schnelle und unkomplizierte Abwicklung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-sach-1',
+            kicker: 'Sachversicherung für Geschäftskunden',
+            title: 'Comprehensive protection for your business assets',
+            subtitle: 'Umfassende Absicherung für alle Sachwerte, Maschinen, Lager und Betriebsstätten',
+            imageUrl: assetUrl('iStock-943842590.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Wert-Rechner', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Sachversicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Package className="w-4 h-4" />
+                          <span>Sachwerte-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Sachversicherung für Geschäftskunden
+                          <span className="block text-blue-700">Wert-Erhalt</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Sachversicherung schützen Sie Ihr Unternehmensvermögen vor den größten Risiken wie
+                          Feuer, Diebstahl und Beschädigung. Wir finden die passende Lösung für Ihre spezifischen Sachwerte.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Wert-Erhalt</div>
+                              <div className="text-gray-600">Schutz für Vermögen</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Package className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umfassender Schutz</div>
+                              <div className="text-gray-600">Alle Sachwerte</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('iStock-943842590.jpg')}
+                            alt="Sachversicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Box className="w-4 h-4" />
+                              <span>Schutz für alle Sachwerte</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihr Vermögen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber oft empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Regulierung
+                            </CardTitle>
+                            <CardDescription>Sofortige Schadenregulierung.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Sach-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Sachversicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und Sachwerte zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihren Sachwerten</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Gebäude:</strong> Für Immobilien</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Maschinen:</strong> Für Produktionsanlagen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Lager:</strong> Für Waren und Material</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Elektronik:</strong> Für IT-Systeme</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Sachversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Sachversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Sachwert-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Versicherungssummen und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Package className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Sachversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenSachversicherung;

src/pages/GeschaeftskundenUmwelthaftpflicht.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Leaf, TreePine, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenUmwelthaftpflicht = () => {
+  const { t } = useTranslation('geschaeftskundenUmwelthaftpflicht');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: Leaf,
+      title: 'Umweltschutz',
+      description: 'Nachhaltige Unternehmensführung'
+    },
+    {
+      icon: Shield,
+      title: 'Haftungs-Schutz',
+      description: 'Sicherheit vor Umweltschäden'
+    },
+    {
+      icon: Users,
+      title: 'Vertrauensschutz',
+      description: 'Glaubwürdigkeit bei Kunden und Partnern'
+    },
+    {
+      icon: Activity,
+      title: 'Rechtssicherheit',
+      description: 'Einhaltung von Umweltvorschriften'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Allgemeine Umwelthaftpflicht',
+      description: 'Grundschutz für alle Unternehmen',
+      details: 'Deckung für Umweltschäden, Haftungsrisiken, Umwelthaftpflicht'
+    },
+    {
+      title: 'Gewässerschutz-Versicherung',
+      description: 'Spezifischer Schutz für Gewässer',
+      details: 'Deckung für Wasserverschmutzung, Gewässerschäden, Haftungsrisiken'
+    },
+    {
+      title: 'Bodenschutz-Versicherung',
+      description: 'Schutz für Böden und Grundwasser',
+      details: 'Deckung für Bodenverschmutzung, Grundwasserschäden, Sanierungskosten'
+    },
+    {
+      title: 'Luftreinhaltung-Versicherung',
+      description: 'Schutz bei Luftverschmutzung',
+      details: 'Deckung für Emissionen, Luftverschmutzung, Haftungsrisiken'
+    },
+    {
+      title: 'Abfallrecht-Versicherung',
+      description: 'Schutz bei Abfallentsorgung',
+      details: 'Deckung für Abfallentsorgung, Haftungsrisiken, Umweltschäden'
+    },
+    {
+      title: 'Naturschutz-Versicherung',
+      description: 'Schutz bei Naturschäden',
+      details: 'Deckung für Naturschäden, Haftungsrisiken, Umwelthaftpflicht'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Umwelt-Analyse',
+      description: 'Ermittlung Ihrer Umweltrisiken'
+    },
+    {
+      step: '2',
+      title: 'Risikobewertung',
+      description: 'Analyse und Priorisierung der Umweltrisiken'
+    },
+    {
+      step: '3',
+      title: 'Schutzkonzept',
+      description: 'Entwicklung maßgeschneiderter Umweltschutzlösungen'
+    },
+    {
+      step: '4',
+      title: 'Monitoring',
+      description: 'Laufende Überwachung und Optimierung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-umwelt-1',
+            kicker: 'Umwelthaftpflicht für Geschäftskunden',
+            title: 'Umweltrechtliche Absicherung für Ihr Unternehmen',
+            subtitle: 'Nachhaltig und sicher - Umfassender Schutz vor Umweltschäden und Haftungsansprüchen',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-1039705312.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Risikoanalyse', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Umwelthaftpflicht für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Leaf className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <Leaf className="w-4 h-4" />
+                          <span>Umwelt-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Umwelthaftpflicht für Geschäftskunden
+                          <span className="block text-blue-700">Nachhaltig und sicher</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Umwelthaftpflichtversicherung schützen Sie Ihr Unternehmen vor den wachsenden
+                          umweltrechtlichen Risiken. Wir finden die passende Lösung für Ihre spezifischen Umweltrisiken.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Leaf className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Umweltschutz</div>
+                              <div className="text-gray-600">Nachhaltige Unternehmensführung</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <Shield className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Haftungs-Schutz</div>
+                              <div className="text-gray-600">Sicherheit vor Umweltschäden</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-1039705312.jpg')}
+                            alt="Umwelthaftpflicht"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <TreePine className="w-4 h-4" />
+                              <span>Umweltrechtliche Absicherung</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre Umweltrisiken.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber oft empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Schnelle Hilfe
+                            </CardTitle>
+                            <CardDescription>24/7 Support verfügbar.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Umweltschutz-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Umwelthaftpflichtversicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und Umweltrisiken zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihrer Branche</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Allgemein:</strong> Für alle Unternehmen</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Gewässerschutz:</strong> Für Wasserbetriebe</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Bodenschutz:</strong> Für Landwirtschaft</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Luftreinhaltung:</strong> Für Industrie</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Umwelthaftpflichtversicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Umwelthaftpflichtversicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Umweltrisiko-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Umweltrisiken und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <Leaf className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Umwelthaftpflichtversicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenUmwelthaftpflicht;

src/pages/GeschaeftskundenVermoegenssicherung.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, TrendingUp, DollarSign, Calculator } from 'lucide-react';
+import Layout from '@/components/Layout';
+import HeroSlider from '@/components/HeroSlider';
+
+const GeschaeftskundenVermoegenssicherung = () => {
+  const { t } = useTranslation('geschaeftskundenVermoegenssicherung');
+  const navigate = useNavigate();
+  const baseUrl = import.meta.env.BASE_URL;
+  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  const benefits = [
+    {
+      icon: TrendingUp,
+      title: 'Wert-Erhalt',
+      description: 'Schutz und Vermehrung Ihres Vermögens'
+    },
+    {
+      icon: DollarSign,
+      title: 'Finanzielle Sicherheit',
+      description: 'Absicherung gegen Wertverluste'
+    },
+    {
+      icon: Users,
+      title: 'Generationenschutz',
+      description: 'Sicherung für die nächste Generation'
+    },
+    {
+      icon: Activity,
+      title: 'Wachstumssicherung',
+      description: 'Sichere Unternehmensentwicklung'
+    }
+  ];
+
+  const products = [
+    {
+      title: 'Lebensversicherung',
+      description: 'Grundlegende Absicherung',
+      details: 'Deckung für Todesfall, Berufsunfähigkeit, Erwerbsminderung'
+    },
+    {
+      title: 'Kapitallebensversicherung',
+      description: 'Vermögensaufbau mit Garantie',
+      details: 'Deckung mit garantierter Kapitalleistung, flexible Laufzeiten'
+    },
+    {
+      title: 'Risikolebensversicherung',
+      description: 'Reiner Risikoschutz',
+      details: 'Deckung für Todesfall, hohe Leistungen bei geringen Beiträgen'
+    },
+    {
+      title: 'Fondsgebundene Lebensversicherung',
+      description: 'Chancen auf höhere Renditen',
+      details: 'Deckung mit Fondsinvestition, Chancen auf höhere Gewinne'
+    },
+    {
+      title: 'Rentenversicherung',
+      description: 'Altersvorsorge mit Rente',
+      details: 'Deckung für lebenslange Rente, flexible Rentenoptionen'
+    },
+    {
+      title: 'Dread-Disease-Versicherung',
+      description: 'Schutz bei schweren Krankheiten',
+      details: 'Deckung für Krebs, Herzinfarkt, Schlaganfall, Multiple Sklerose'
+    }
+  ];
+
+  const steps = [
+    {
+      step: '1',
+      title: 'Bedarfsanalyse',
+      description: 'Ermittlung Ihrer Vermögenssituation'
+    },
+    {
+      step: '2',
+      title: 'Zieldefinition',
+      description: 'Festlegung Ihrer finanziellen Ziele'
+    },
+    {
+      step: '3',
+      title: 'Konzept-Erstellung',
+      description: 'Entwicklung maßgeschneiderter Lösungen'
+    },
+    {
+      step: '4',
+      title: 'Implementierung',
+      description: 'Umsetzung und laufende Betreuung'
+    }
+  ];
+
+  return (
+    <Layout>
+      <HeroSlider
+        slides={[
+          {
+            id: 'geschaeftskunden-vermoegen-1',
+            kicker: 'Vermögenssicherung für Geschäftskunden',
+            title: 'Schützen Sie Ihr Unternehmensvermögen',
+            subtitle: 'Zukunftssicher handeln - Umfassende Absicherung für Ihr Unternehmen und Ihre Familie',
+            imageUrl: assetUrl('Geascheaftskunden/iStock-948602744.jpg'),
+            imagePosition: 'center 35%',
+            ctas: [
+              { label: 'Beratung anfordern', href: '#form' },
+              { label: 'Vermögens-Rechner', href: '#calculator' },
+            ],
+          },
+        ]}
+      />
+
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 md:px-6 py-8">
+          <div className="max-w-screen-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Vermögenssicherung für Geschäftskunden
+            </h2>
+
+            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
+                  <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                    <TabsTrigger 
+                      value="overview" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Phone className="w-4 h-4 mr-1.5" />
+                      Anfrage
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="products" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <TrendingUp className="w-4 h-4 mr-1.5" />
+                      Übersicht
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="benefits" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Star className="w-4 h-4 mr-1.5" />
+                      Vorteile
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="process" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <FileText className="w-4 h-4 mr-1.5" />
+                      Prozess
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="calculator" 
+                      className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
+                    >
+                      <Calculator className="w-4 h-4 mr-1.5" />
+                      Rechner
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
+
+                <div className="p-4 md:p-6">
+                  <TabsContent value="overview" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                      <div>
+                        <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
+                          <TrendingUp className="w-4 h-4" />
+                          <span>Vermögens-Schutz</span>
+                        </div>
+                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
+                          Vermögenssicherung für Geschäftskunden
+                          <span className="block text-blue-700">Zukunftssicher handeln</span>
+                        </h1>
+                        <p className="mt-4 text-gray-600 text-lg">
+                          Mit einer Vermögenssicherung schützen Sie Ihr Unternehmensvermögen vor den größten Risiken und
+                          sichern gleichzeitig die Zukunft für Ihre Familie. Wir finden die passende Lösung für Ihre spezifischen Bedürfnisse.
+                        </p>
+
+                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                            Beratung anfordern
+                          </Button>
+                          <Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
+                            Kostenlos beraten lassen
+                          </Button>
+                        </div>
+
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <TrendingUp className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Wert-Erhalt</div>
+                              <div className="text-gray-600">Schutz und Vermehrung</div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
+                            <DollarSign className="w-5 h-5 text-blue-700" />
+                            <div className="text-sm">
+                              <div className="font-semibold text-gray-900">Finanzielle Sicherheit</div>
+                              <div className="text-gray-600">Absicherung vor Verlusten</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
+                        <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+                          <img
+                            src={assetUrl('Geascheaftskunden/iStock-948602744.jpg')}
+                            alt="Vermögenssicherung"
+                            className="w-full h-[320px] object-cover"
+                            onError={(e) => {
+                              (e.currentTarget as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
+                          <div className="p-5">
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <DollarSign className="w-4 h-4" />
+                              <span>Schutz für Ihr Vermögen</span>
+                            </div>
+                            <div className="mt-2 text-sm text-gray-600">
+                              Wir finden den optimalen Schutz für Ihre Finanzen.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
+                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700" />
+                              Nicht gesetzlich vorgeschrieben
+                            </CardTitle>
+                            <CardDescription>Aber dringend empfohlen.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <AlertTriangle className="w-4 h-4 text-blue-700" />
+                              Hohe Schadensummen
+                            </CardTitle>
+                            <CardDescription>Können existenzbedrohend sein.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-base flex items-center gap-2">
+                              <Clock className="w-4 h-4 text-blue-700" />
+                              Langfristiger Schutz
+                            </CardTitle>
+                            <CardDescription>Sicherheit für die Zukunft.</CardDescription>
+                          </CardHeader>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="products" className="mt-0">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                      <div className="lg:col-span-2">
+                        <h3 className="text-2xl font-bold text-gray-900">Unsere Vermögenssicherungs-Lösungen</h3>
+                        <p className="mt-2 text-gray-600">
+                          Wir bieten verschiedene Vermögenssicherungen, die perfekt auf Ihre
+                          Unternehmensgröße und finanziellen Ziele zugeschnitten sind.
+                        </p>
+
+                        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                          {products.map((product, index) => (
+                            <Card key={index} className="border-gray-200">
+                              <CardHeader>
+                                <CardTitle className="text-lg">{product.title}</CardTitle>
+                                <CardDescription>{product.description}</CardDescription>
+                              </CardHeader>
+                              <CardContent className="text-sm text-gray-700">
+                                {product.details}
+                              </CardContent>
+                            </Card>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <Card className="border-gray-200">
+                          <CardHeader>
+                            <CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
+                            <CardDescription>Abhängig von Ihren Zielen</CardDescription>
+                          </CardHeader>
+                          <CardContent className="space-y-3 text-sm text-gray-700">
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Lebensversicherung:</strong> Grundschutz</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Kapitallebensversicherung:</strong> Garantie</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Risikolebensversicherung:</strong> Reiner Schutz</span>
+                            </div>
+                            <div className="flex items-start gap-2">
+                              <CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
+                              <span><strong>Fondsgebunden:</strong> Renditechancen</span>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="benefits" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Ihre Vorteile
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Warum eine Vermögenssicherung für Ihr Unternehmen wichtig ist
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                      {benefits.map((benefit, index) => {
+                        const Icon = benefit.icon;
+                        return (
+                          <div key={index} className="text-center">
+                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                              <Icon className="h-8 w-8 text-blue-700" />
+                            </div>
+                            <h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
+                            <p className="text-gray-600 text-sm">{benefit.description}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="process" className="mt-0">
+                    <div className="text-center mb-12">
+                      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        So läuft die Beratung ab
+                      </h3>
+                      <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        Schritt für Schritt zu Ihrer optimalen Vermögenssicherung
+                      </p>
+                    </div>
+
+                    <div className="grid md:grid-cols-4 gap-6">
+                      {steps.map((step) => (
+                        <div key={step.step} className="text-center">
+                          <div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                            {step.step}
+                          </div>
+                          <h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
+                          <p className="text-gray-600 text-sm">{step.description}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="calculator" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Vermögens-Rechner</h3>
+                      <p className="text-gray-600 mb-6">
+                        Berechnen Sie Ihre Vermögenswerte und den optimalen Schutz
+                      </p>
+                      <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
+                        <TrendingUp className="mr-2 h-4 w-4" />
+                        Rechner starten
+                      </Button>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="form" className="mt-0">
+                    <div className="text-center">
+                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
+                      <p className="text-gray-600 mb-6">
+                        Lassen Sie sich unverbindlich zu Ihrer Vermögenssicherung beraten
+                      </p>
+                      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
+                          <Phone className="h-5 w-5 mr-2" />
+                          Jetzt anrufen
+                        </Button>
+                        <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
+                          <Mail className="h-5 w-5 mr-2" />
+                          Kontakt aufnehmen
+                        </Button>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default GeschaeftskundenVermoegenssicherung;

src/pages/Index.tsx

@@ -11,7 +11,7 @@ const Index = () => {
   const { t } = useTranslation('home');
   const navigate = useNavigate();
   
-  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+  const assetUrl = (fileName: string) => `${import.meta.env.BASE_URL}${encodeURI(fileName)}`;
   const [yearsOfExperience, setYearsOfExperience] = useState(new Date().getFullYear() - 1994);
   const [focusTopics, setFocusTopics] = useState<Array<{ title: string; href: string; image: string }>>([]);
 
@@ -24,7 +24,7 @@ const Index = () => {
 
   useEffect(() => {
     
-    const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
+    const assetUrl = (fileName: string) => `${import.meta.env.BASE_URL}${encodeURI(fileName)}`;
     
     const pool = [
       { title: 'KFZ-Fahrzeuge', href: '/kfz', image: import.meta.env.BASE_URL + encodeURI('Fotolia_8654128_XS.jpg') },
@@ -308,7 +308,7 @@ const Index = () => {
                 </div>
               </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>
@@ -443,7 +443,7 @@ const Index = () => {
               <Link to="/contact#contact">
                 <Phone className="mr-2 h-5 w-5" />
                 {t('cta.button', 'Jetzt kontaktieren')}
-              </div>
+              </Link>
             </Button>
           </div>
         </div>