diff --git a/src/index.css b/src/index.css
index c5a77c9..6fd2c58 100644
--- a/src/index.css
+++ b/src/index.css
@@ -111,4 +111,32 @@
       transform: translateY(0);
     }
   }
+
+  /* Modern Tabs Styling - Global for all tabs */
+  [data-radix-tabs-list] {
+    @apply bg-gradient-to-r from-blue-50 to-white border-b border-gray-100 px-4 pt-6 pb-2;
+  }
+
+  [data-radix-tabs-trigger] {
+    @apply relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200;
+    @apply 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;
+    @apply data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0;
+  }
+
+  /* Remove focus outlines completely */
+  button:focus,
+  button:focus-visible,
+  [data-radix-tabs-trigger]:focus,
+  [data-radix-tabs-trigger]:focus-visible {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  [data-state="active"] {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
 }
diff --git a/src/pages/Agentur.tsx b/src/pages/Agentur.tsx
index fbb97cc..aad626e 100644
--- a/src/pages/Agentur.tsx
+++ b/src/pages/Agentur.tsx
@@ -73,17 +73,15 @@ const Agentur = () => {
 
             <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
               <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
-                <div className="border-b border-gray-200 px-4 pt-4">
-                  <TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
-                    <TabsTrigger value="overview" className="px-4 py-2">Philosophie</TabsTrigger>
-                    <TabsTrigger value="leistungen" className="px-4 py-2">Leistungen der Agentur</TabsTrigger>
-                    <TabsTrigger value="philosophie" className="px-4 py-2">Partnerversicherungen</TabsTrigger>
-                    <TabsTrigger value="kontakt" className="px-4 py-2">Finanzdienstleistungen</TabsTrigger>
-                    <TabsTrigger value="links" className="px-4 py-2">Links</TabsTrigger>
-                    <TabsTrigger value="vermoegensverwaltung" className="px-4 py-2">Vermögensverwaltung</TabsTrigger>
-                    <TabsTrigger value="investmentbanken" className="px-4 py-2">Investment-Banken</TabsTrigger>
-                  </TabsList>
-                </div>
+                <TabsList className="grid grid-cols-1 md:grid-cols-3 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                  <TabsTrigger value="overview" className="px-3 py-2.5 text-sm font-medium">Philosophie</TabsTrigger>
+                  <TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">Leistungen der Agentur</TabsTrigger>
+                  <TabsTrigger value="philosophie" className="px-3 py-2.5 text-sm font-medium">Partnerversicherungen</TabsTrigger>
+                  <TabsTrigger value="kontakt" className="px-3 py-2.5 text-sm font-medium">Finanzdienstleistungen</TabsTrigger>
+                  <TabsTrigger value="links" className="px-3 py-2.5 text-sm font-medium">Links</TabsTrigger>
+                  <TabsTrigger value="vermoegensverwaltung" className="px-3 py-2.5 text-sm font-medium">Vermögensverwaltung</TabsTrigger>
+                  <TabsTrigger value="investmentbanken" className="px-3 py-2.5 text-sm font-medium">Investment-Banken</TabsTrigger>
+                </TabsList>
 
                 <TabsContent value="overview" className="p-4 md:p-6">
                   <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
diff --git a/src/pages/Autoversicherung.tsx b/src/pages/Autoversicherung.tsx
index e137f0c..483b227 100644
--- a/src/pages/Autoversicherung.tsx
+++ b/src/pages/Autoversicherung.tsx
@@ -87,6 +87,23 @@ const Autoversicherung = () => {
   return (
     <Layout>
       <div className="min-h-screen bg-gray-50">
+        <style>{`
+          [data-state="active"] {
+            outline: none !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+          button:focus {
+            outline: none !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+          button:focus-visible {
+            outline: none !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+        `}</style>
         <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">
@@ -102,16 +119,64 @@ const Autoversicherung = () => {
                 className="w-full"
                 id="tab-section"
               >
-                <div className="border-b border-gray-200 px-4 pt-4">
-                  <TabsList className="justify-start flex-wrap h-auto">
-                    <TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
-                    <TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
-                    <TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger>
-                    <TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'KFZ-Vergleichsrechner')}</TabsTrigger>
-                    <TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
-                    <TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
-                    <TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger>
-                    <TabsTrigger value="brochure" className="px-6 py-2">{t('tabs.brochure', 'Kundenbroschüre (PDF)')}</TabsTrigger>
+                <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-8 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"
+                    >
+                      <Shield className="w-4 h-4 mr-1.5" />
+                      {t('tabs.overview', 'Übersicht')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="details" 
+                      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" />
+                      {t('tabs.details', 'Details')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="statistics" 
+                      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" />
+                      {t('tabs.statistics', 'Statistik')}
+                    </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"
+                    >
+                      <Gauge className="w-4 h-4 mr-1.5" />
+                      {t('tabs.calculator', 'Rechner')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="form" 
+                      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" />
+                      {t('tabs.form', 'Anfrage')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="claims" 
+                      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" />
+                      {t('tabs.claims', 'Schaden')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="catalog" 
+                      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"
+                    >
+                      <FileCheck className="w-4 h-4 mr-1.5" />
+                      {t('tabs.catalog', 'Katalog')}
+                    </TabsTrigger>
+                    <TabsTrigger 
+                      value="brochure" 
+                      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"
+                    >
+                      <Download className="w-4 h-4 mr-1.5" />
+                      {t('tabs.brochure', 'PDF')}
+                    </TabsTrigger>
                   </TabsList>
                 </div>
 
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 8468717..7e2a0a7 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -175,19 +175,19 @@ export default function ContactPage() {
               }}
               className="w-full"
             >
-              <div id="contact-tabs" className="border-b border-gray-200 px-4 pt-4">
-                <TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
-                  <TabsTrigger value="contact" className="px-4 py-2">{t('tabs.contact', 'Kontakt und Adressen')}</TabsTrigger>
-                  <TabsTrigger value="card" className="px-4 py-2">{t('tabs.card', 'Visitenkarte')}</TabsTrigger>
-                  <TabsTrigger value="reasons" className="px-4 py-2">{t('tabs.reasons', '10 gute Gründe')}</TabsTrigger>
-                  <TabsTrigger value="service" className="px-4 py-2">{t('tabs.service', 'Service')}</TabsTrigger>
-                  <TabsTrigger value="impressum" className="px-4 py-2">{t('tabs.impressum', 'Impressum')}</TabsTrigger>
-                  <TabsTrigger value="leistungen" className="px-4 py-2">{t('tabs.leistungen', 'Leistungen')}</TabsTrigger>
-                  <TabsTrigger value="datenschutz" className="px-4 py-2">{t('tabs.datenschutz', 'Datenschutz')}</TabsTrigger>
-                  <TabsTrigger value="links" className="px-4 py-2">{t('tabs.links', 'Links')}</TabsTrigger>
-                  <TabsTrigger value="news" className="px-4 py-2">{t('tabs.news', 'Aktuelles/News')}</TabsTrigger>
-                  <TabsTrigger value="daily-info" className="px-4 py-2">{t('tabs.dailyInfo', 'Tägliche Info')}</TabsTrigger>
-                  <TabsTrigger value="faq" className="px-4 py-2">{t('tabs.faq', 'FAQ')}</TabsTrigger>
+              <div id="contact-tabs">
+                <TabsList className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                  <TabsTrigger value="contact" className="px-3 py-2.5 text-sm font-medium">{t('tabs.contact', 'Kontakt')}</TabsTrigger>
+                  <TabsTrigger value="card" className="px-3 py-2.5 text-sm font-medium">{t('tabs.card', 'Karte')}</TabsTrigger>
+                  <TabsTrigger value="reasons" className="px-3 py-2.5 text-sm font-medium">{t('tabs.reasons', 'Gründe')}</TabsTrigger>
+                  <TabsTrigger value="service" className="px-3 py-2.5 text-sm font-medium">{t('tabs.service', 'Service')}</TabsTrigger>
+                  <TabsTrigger value="impressum" className="px-3 py-2.5 text-sm font-medium">{t('tabs.impressum', 'Impressum')}</TabsTrigger>
+                  <TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">{t('tabs.leistungen', 'Leistungen')}</TabsTrigger>
+                  <TabsTrigger value="datenschutz" className="px-3 py-2.5 text-sm font-medium">{t('tabs.datenschutz', 'Datenschutz')}</TabsTrigger>
+                  <TabsTrigger value="links" className="px-3 py-2.5 text-sm font-medium">{t('tabs.links', 'Links')}</TabsTrigger>
+                  <TabsTrigger value="news" className="px-3 py-2.5 text-sm font-medium">{t('tabs.news', 'News')}</TabsTrigger>
+                  <TabsTrigger value="daily-info" className="px-3 py-2.5 text-sm font-medium">{t('tabs.dailyInfo', 'Info')}</TabsTrigger>
+                  <TabsTrigger value="faq" className="px-3 py-2.5 text-sm font-medium">{t('tabs.faq', 'FAQ')}</TabsTrigger>
                 </TabsList>
               </div>
 
diff --git a/src/pages/Finanzierung.tsx b/src/pages/Finanzierung.tsx
index 8af7a6e..4e66bd3 100644
--- a/src/pages/Finanzierung.tsx
+++ b/src/pages/Finanzierung.tsx
@@ -5,7 +5,7 @@ import Layout from '@/components/Layout';
 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, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Home, Key, FileCheck } from 'lucide-react';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Home, Key, FileCheck, PhoneCall, MapPin, Gauge } from 'lucide-react';
 import HeroSlider from '@/components/HeroSlider';
 import GeneralNotice from '@/components/GeneralNotice';
 import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@@ -40,17 +40,57 @@ const Finanzierung = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
-            <div className="border-b border-gray-200 px-4 pt-4">
-              <TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1">
-                <TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger>
-                <TabsTrigger value="arten" className="px-4 py-2">Finanzierungs-Arten</TabsTrigger>
-                <TabsTrigger value="immobilien" className="px-4 py-2">Immobilienfinanzierung</TabsTrigger>
-                <TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger>
-                <TabsTrigger value="calculator" className="px-4 py-2">Kreditrechner</TabsTrigger>
-                <TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger>
-                <TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger>
+            <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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"
+              >
+                <Home className="w-4 h-4 mr-1.5" />
+                Übersicht
+              </TabsTrigger>
+              <TabsTrigger 
+                value="arten" 
+                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" />
+                Arten
+              </TabsTrigger>
+              <TabsTrigger 
+                value="immobilien" 
+                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" />
+                Immobilien
+              </TabsTrigger>
+              <TabsTrigger 
+                value="details" 
+                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" />
+                Details
+              </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>
+              <TabsTrigger 
+                value="form" 
+                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="brochure" 
+                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"
+              >
+                <Download className="w-4 h-4 mr-1.5" />
+                PDF
+              </TabsTrigger>
               </TabsList>
-            </div>
 
             <div className="p-4 md:p-6">
               <TabsContent value="overview" className="mt-0">
diff --git a/src/pages/KinderGesundheit.tsx b/src/pages/KinderGesundheit.tsx
index 64a5765..d567dd6 100644
--- a/src/pages/KinderGesundheit.tsx
+++ b/src/pages/KinderGesundheit.tsx
@@ -10,6 +10,15 @@ import {
   Mail,
   Phone,
   Shield,
+  FileText,
+  Calculator,
+  Users,
+  Star,
+  Home,
+  Activity,
+  Baby,
+  Heart,
+  FileCheck
 } from 'lucide-react';
 import Layout from '@/components/Layout';
 import GeneralNotice from '@/components/GeneralNotice';
@@ -98,28 +107,50 @@ const KinderGesundheit = () => {
           <div className="max-w-screen-2xl mx-auto">
             <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
               <Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
-                <div className="border-b border-gray-200 px-4 pt-4">
-                  <TabsList className="justify-start flex-wrap h-auto gap-2">
-                    <TabsTrigger value={TAB_OVERVIEW} className="px-6 py-2">
-                      {t('tabs.overview', 'Übersicht')}
+                <TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
+                  <TabsTrigger 
+                    value={TAB_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"
+                  >
+                    <HeartPulse className="w-4 h-4 mr-1.5" />
+                    {t('tabs.overview', 'Übersicht')}
+                  </TabsTrigger>
+                    <TabsTrigger 
+                      value={TAB_DETAILS} 
+                      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" />
+                      {t('tabs.details', 'Details')}
                     </TabsTrigger>
-                    <TabsTrigger value={TAB_DETAILS} className="px-6 py-2">
-                      {t('tabs.details', 'Details & Vorteile')}
+                    <TabsTrigger 
+                      value={TAB_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" />
+                      {t('tabs.calculator', 'Rechner')}
                     </TabsTrigger>
-                    <TabsTrigger value={TAB_CALCULATOR} className="px-6 py-2">
-                      {t('tabs.calculator', 'Vergleichsrechner')}
+                    <TabsTrigger 
+                      value={TAB_FORM} 
+                      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" />
+                      {t('tabs.form', 'Anfrage')}
                     </TabsTrigger>
-                    <TabsTrigger value={TAB_FORM} className="px-6 py-2">
-                      {t('tabs.form', 'Anfrageformular')}
-                    </TabsTrigger>
-                    <TabsTrigger value={TAB_CATALOG} className="px-6 py-2">
+                    <TabsTrigger 
+                      value={TAB_CATALOG} 
+                      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"
+                    >
+                      <FileCheck className="w-4 h-4 mr-1.5" />
                       {t('tabs.catalog', 'Ratgeber')}
                     </TabsTrigger>
-                    <TabsTrigger value={TAB_BROCHURE} className="px-6 py-2">
-                      {t('tabs.brochure', 'Kundenbroschüre (PDF)')}
+                    <TabsTrigger 
+                      value={TAB_BROCHURE} 
+                      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"
+                    >
+                      <Download className="w-4 h-4 mr-1.5" />
+                      {t('tabs.brochure', 'PDF')}
                     </TabsTrigger>
-                  </TabsList>
-                </div>
+                </TabsList>
 
                 <div className="p-4 md:p-6">
                   <TabsContent value={TAB_OVERVIEW} className="mt-0">
diff --git a/src/pages/haftpflicht.tsx b/src/pages/haftpflicht.tsx
index a3010a3..017d108 100644
--- a/src/pages/haftpflicht.tsx
+++ b/src/pages/haftpflicht.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import GeneralNotice from '@/components/GeneralNotice';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck } from 'lucide-react';
+import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck, FileText, Download, Home, Heart } from 'lucide-react';
 import Layout from '@/components/Layout';
 import HeroSlider from '@/components/HeroSlider';
 
@@ -84,17 +84,50 @@ const Haftpflicht = () => {
             </h2>
 
             <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
-              <div className="border-b border-gray-200 px-4 pt-4">
-                <TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
-                  <TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
-                  <TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
-                  <TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Schadensstatistik')}</TabsTrigger>
-                  <TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Haftpflicht-Rechner')}</TabsTrigger>
-                  <TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
-                  <TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
-                  <TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Infothek')}</TabsTrigger>
-                </TabsList>
-              </div>
+              <TabsList className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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"
+                >
+                  <Home className="w-4 h-4 mr-1.5" />
+                  {t('tabs.overview', 'Übersicht')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="details" 
+                  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" />
+                  {t('tabs.details', 'Details')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="form" 
+                  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" />
+                  {t('tabs.form', 'Anfrage')}
+                </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" />
+                  {t('tabs.calculator', 'Haftpflicht-Rechner')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="claims" 
+                  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" />
+                  {t('tabs.claims', 'Schadenmeldung!')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="catalog" 
+                  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"
+                >
+                  <FileCheck className="w-4 h-4 mr-1.5" />
+                  {t('tabs.catalog', 'Infothek')}
+                </TabsTrigger>
+              </TabsList>
 
               <div className="p-4 md:p-6">
                 <TabsContent value="overview" className="mt-0">
diff --git a/src/pages/hausrat.tsx b/src/pages/hausrat.tsx
index 75ab1e8..18b19af 100644
--- a/src/pages/hausrat.tsx
+++ b/src/pages/hausrat.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import GeneralNotice from '@/components/GeneralNotice';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck, Home } from 'lucide-react';
+import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, Home, FileCheck, AlertCircle, Users, Building } from 'lucide-react';
 import Layout from '@/components/Layout';
 import HeroSlider from '@/components/HeroSlider';
 
@@ -84,17 +84,57 @@ const Hausrat = () => {
             </h2>
 
             <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
-              <div className="border-b border-gray-200 px-4 pt-4">
-                <TabsList className="justify-start flex-wrap h-auto gap-2">
-                  <TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
-                  <TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
-                  <TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Schadensstatistik')}</TabsTrigger>
-                  <TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Hausrat-Rechner')}</TabsTrigger>
-                  <TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
-                  <TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
-                  <TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Infothek')}</TabsTrigger>
+              <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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"
+                >
+                  <Home className="w-4 h-4 mr-1.5" />
+                  {t('tabs.overview', 'Übersicht')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="details" 
+                  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" />
+                  {t('tabs.details', 'Details')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="statistics" 
+                  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" />
+                  {t('tabs.statistics', 'Statistik')}
+                </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" />
+                  {t('tabs.calculator', 'Rechner')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="form" 
+                  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" />
+                  {t('tabs.form', 'Anfrage')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="claims" 
+                  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" />
+                  {t('tabs.claims', 'Schaden')}
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="catalog" 
+                  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"
+                >
+                  <FileCheck className="w-4 h-4 mr-1.5" />
+                  {t('tabs.catalog', 'Infothek')}
+                </TabsTrigger>
                 </TabsList>
-              </div>
 
               <div className="p-4 md:p-6">
                 <TabsContent value="overview" className="mt-0">
diff --git a/src/pages/unfall.tsx b/src/pages/unfall.tsx
index ad16385..8f0ccb0 100644
--- a/src/pages/unfall.tsx
+++ b/src/pages/unfall.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Shield, Heart, CheckCircle, Star, Phone, Mail, AlertTriangle, Clock, FileCheck, PhoneCall, Calculator, Search, AlertCircle } from 'lucide-react';
+import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart, Ambulance, Activity } from 'lucide-react';
 import Layout from '@/components/Layout';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -186,17 +186,57 @@ const Unfall = () => {
             </div>
 
             <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
-              <div className="border-b border-gray-200 px-4 pt-4">
-                <TabsList className="justify-start flex-wrap h-auto gap-2">
-                  <TabsTrigger value="overview" className="px-6 py-2">Übersicht</TabsTrigger>
-                  <TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger>
-                  <TabsTrigger value="statistics" className="px-6 py-2">Unfallstatistik</TabsTrigger>
-                  <TabsTrigger value="calculator" className="px-6 py-2">Unfall-Rechner</TabsTrigger>
-                  <TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger>
-                  <TabsTrigger value="claims" className="px-6 py-2">Unfallmitteilung</TabsTrigger>
-                  <TabsTrigger value="catalog" className="px-6 py-2">Infothek</TabsTrigger>
+              <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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"
+                >
+                  <Shield className="w-4 h-4 mr-1.5" />
+                  Übersicht
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="details" 
+                  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" />
+                  Details
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="statistics" 
+                  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" />
+                  Statistik
+                </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"
+                >
+                  <Gauge className="w-4 h-4 mr-1.5" />
+                  Rechner
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="form" 
+                  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="claims" 
+                  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" />
+                  Mitteilung
+                </TabsTrigger>
+                <TabsTrigger 
+                  value="catalog" 
+                  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"
+                >
+                  <FileCheck className="w-4 h-4 mr-1.5" />
+                  Infothek
+                </TabsTrigger>
                 </TabsList>
-              </div>
 
               <div className="p-4 md:p-6">
                 <TabsContent value="overview" className="mt-0">