design issues

app/agb/page.tsx

@@ -2,10 +2,10 @@ import { Download } from 'lucide-react';
 
 export default function AGB() {
   return (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20">
+    <div className="bg-slate-50 min-h-screen pt-28 pb-20">
       <div className="container-custom">
-        <div className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100">
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
+        <div className="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-[2.5rem] shadow-sm border border-slate-100">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
             <div>
               <h1 className="text-4xl font-extrabold text-primary mb-2">Liefer- und Zahlungsbedingungen</h1>
               <p className="text-slate-500 font-medium">Stand Januar 2026</p>
@@ -20,59 +20,59 @@ export default function AGB() {
             </a>
           </div>
           
-          <div className="space-y-12 text-slate-600 leading-relaxed">
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">1. Allgemeines</h2>
+          <div className="space-y-8 text-slate-600 leading-relaxed">
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">1. Allgemeines</h2>
               <div className="space-y-4">
                 <p>
-                  Diese Liefer- und Zahlungsbedingungen (L&Z) der MB Grid Solutions & Services gelten ausschließlich; 
-                  entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an, 
+                  Diese Liefer- und Zahlungsbedingungen (L&Z) der MB Grid Solutions & Services gelten ausschließlich;
+                  entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an,
                   es sei denn, wir hätten ausdrücklich schriftlich ihrer Geltung zugestimmt.
                 </p>
                 <p>
                   Unsere L&Z gelten nur gegenüber Unternehmern im Sinn von § 310 Abs. 1 BGB sowie juristischen Personen des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen.
                 </p>
               </div>
-            </section>
+            </div>
 
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">2. Angebote</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">2. Angebote</h2>
               <p>
-                Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung 
+                Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung
                 des Kunden ist als Angebot gemäß § 145 BGB zu qualifizieren.
               </p>
-            </section>
+            </div>
 
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">3. Preise</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">3. Preise</h2>
               <p>
-                Die Preise gelten für den in unseren Angeboten und Auftragsbestätigungen aufgeführten Leistungs- und 
-                Lieferumfang. Mehrleistungen werden gesondert berechnet. Die Hohlpreise verstehen sich in Euro zuzüglich 
+                Die Preise gelten für den in unseren Angeboten und Auftragsbestätigungen aufgeführten Leistungs- und
+                Lieferumfang. Mehrleistungen werden gesondert berechnet. Die Hohlpreise verstehen sich in Euro zuzüglich
                 Metallzuschlag, gegebenenfalls Verpackung, auftragsspezifischer Schnittkosten und der gesetzlichen Mehrwertsteuer.
               </p>
-            </section>
+            </div>
 
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">4. Metallnotierung</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">4. Metallnotierung</h2>
               <p>
-                Basis zur Kupferabrechnung ist die Notierung „LME Copper official price cash offer“, Durchschnitt des 
+                Basis zur Kupferabrechnung ist die Notierung „LME Copper official price cash offer“, Durchschnitt des
                 Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie.
               </p>
-            </section>
+            </div>
 
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">17. Technische Beratungsdienstleistungen</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">17. Technische Beratungsdienstleistungen</h2>
               <p>
-                Die technische Unterstützung ersetzt weder die Fachplanung noch die Ausführungs- oder Prüvverantwortung 
+                Die technische Unterstützung ersetzt weder die Fachplanung noch die Ausführungs- oder Prüvverantwortung
                 des beauftragten Ingenieurbüros, Planers oder der ausführenden Fachfirma bzw. verantwortlichen Abteilung.
               </p>
               <p className="mt-4">
-                Alle Hinweise, Einschätzungen und Empfehlungen der MB Grid Solutions and Services erfolgen ohne Gewähr 
+                Alle Hinweise, Einschätzungen und Empfehlungen der MB Grid Solutions and Services erfolgen ohne Gewähr
                 und entbinden den jeweiligen Auftragnehmer nicht von seiner eigenen fachlichen Prüfung, Planung und Verantwortung.
               </p>
-            </section>
+            </div>
 
-            <div className="pt-12 border-t border-slate-100">
+            <div className="pt-8 border-t border-slate-100">
               <p className="font-bold text-primary">Remshalden, 22.1.2026</p>
             </div>
           </div>

app/datenschutz/page.tsx

@@ -1,30 +1,30 @@
 export default function Privacy() {
   return (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20">
+    <div className="bg-slate-50 min-h-screen pt-28 pb-20">
       <div className="container-custom">
-        <div className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100">
-          <h1 className="text-4xl font-extrabold text-primary mb-12">Datenschutzerklärung</h1>
+        <div className="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-[2.5rem] shadow-sm border border-slate-100">
+          <h1 className="text-4xl font-extrabold text-primary mb-8">Datenschutzerklärung</h1>
           
-          <div className="space-y-12 text-slate-600 leading-relaxed">
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">1. Datenschutz auf einen Blick</h2>
+          <div className="space-y-8 text-slate-600 leading-relaxed">
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">1. Datenschutz auf einen Blick</h2>
               <p>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
-            </section>
+            </div>
             
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">2. Hosting</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">2. Hosting</h2>
               <p>Unsere Website wird bei Hetzner Online GmbH gehostet. Der Serverstandort ist Deutschland. Wir haben einen Vertrag über Auftragsverarbeitung (AVV) mit Hetzner geschlossen.</p>
-            </section>
+            </div>
             
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">3. Kontaktformular</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">3. Kontaktformular</h2>
               <p>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
-            </section>
+            </div>
             
-            <section>
-              <h2 className="text-2xl font-bold text-primary mb-6">4. Server-Log-Dateien</h2>
+            <div>
+              <h2 className="text-2xl font-bold text-primary mb-4">4. Server-Log-Dateien</h2>
               <p>Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind: Browsertyp und Browserversion, verwendetes Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage, IP-Adresse.</p>
-            </section>
+            </div>
           </div>
         </div>
       </div>

app/impressum/page.tsx

@@ -5,61 +5,61 @@ import { TechBackground } from '@/components/TechBackground';
 
 export default function Legal() {
   return (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20 relative overflow-hidden">
+    <div className="bg-slate-50 min-h-screen pt-28 pb-20 relative overflow-hidden">
       <TechBackground />
       <div className="container-custom relative z-10">
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ type: "spring", stiffness: 50, damping: 20 }}
-          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
+          className="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
         >
           <div className="tech-corner top-8 left-8 border-t-2 border-l-2 opacity-20" />
           <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2 opacity-20" />
           
-          <h1 className="text-4xl font-extrabold text-primary mb-12 relative z-10">Impressum</h1>
+          <h1 className="text-4xl font-extrabold text-primary mb-8 relative z-10">Impressum</h1>
           
-          <div className="space-y-12 text-slate-600 leading-relaxed relative z-10">
-            <section>
+          <div className="space-y-8 text-slate-600 leading-relaxed relative z-10">
+            <div>
               <h2 className="text-xl font-bold text-primary mb-4">Angaben gemäß § 5 TMG</h2>
               <p>
                 MB Grid Solutions & Services GmbH<br />
                 Raiffeisenstraße 22<br />
                 73630 Remshalden
               </p>
-            </section>
+            </div>
 
-            <section>
+            <div>
               <h2 className="text-xl font-bold text-primary mb-4">Vertreten durch</h2>
               <p>
                 Michael Bodemer<br />
                 Klaus Mintel
               </p>
-            </section>
+            </div>
 
-            <section>
+            <div>
               <h2 className="text-xl font-bold text-primary mb-4">Kontakt</h2>
               <p>
                 E-Mail: <a href="mailto:info@mb-grid-solutions.com" className="text-accent hover:underline">info@mb-grid-solutions.com</a><br />
                 Web: <a href="https://www.mb-grid-solutions.com" className="text-accent hover:underline">www.mb-grid-solutions.com</a>
               </p>
-            </section>
+            </div>
 
-            <section>
+            <div>
               <h2 className="text-xl font-bold text-primary mb-4">Registereintrag</h2>
               <p>
                 Eintragung im Handelsregister.<br />
                 Registergericht: Amtsgericht Stuttgart<br />
                 Registernummer: HRB 803379
               </p>
-            </section>
+            </div>
 
-            <section>
+            <div>
               <h2 className="text-xl font-bold text-primary mb-4">Urheberrecht</h2>
               <p>
                 Alle auf der Website veröffentlichten Texte, Bilder und sonstigen Informationen unterliegen – sofern nicht anders gekennzeichnet – dem Urheberrecht. Jede Vervielfältigung, Verbreitung, Speicherung, Übermittlung, Wiedergabe bzw. Weitergabe der Inhalte ohne schriftliche Genehmigung ist ausdrücklich untersagt.
               </p>
-            </section>
+            </div>
           </div>
         </motion.div>
       </div>

app/layout.tsx

@@ -10,6 +10,7 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://www.mb-grid-solutions.com"),
   title: {
     default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     template: "%s | MB Grid Solutions"
@@ -31,20 +32,11 @@ export const metadata: Metadata = {
     siteName: "MB Grid Solutions",
     title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
-    images: [
-      {
-        url: "/assets/logo.png",
-        width: 800,
-        height: 600,
-        alt: "MB Grid Solutions Logo",
-      },
-    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
-    images: ["/assets/logo.png"],
   },
   robots: {
     index: true,

app/opengraph-image.tsx

@@ -0,0 +1,175 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#ffffff',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        {/* Grid Pattern Background - matching .grid-pattern in globals.css */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
+            backgroundSize: '40px 40px',
+            zIndex: 0,
+          }}
+        />
+        
+        {/* Content Container - matching .card-modern / .glass-panel style */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            padding: '60px 80px',
+            borderRadius: '48px',
+            border: '1px solid #e2e8f0',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
+            zIndex: 1,
+            position: 'relative',
+          }}
+        >
+          {/* Engineering Excellence Badge */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              padding: '8px 20px',
+              backgroundColor: 'rgba(16, 185, 129, 0.1)',
+              borderRadius: '100px',
+              marginBottom: '32px',
+            }}
+          >
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                backgroundColor: '#10b981',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#10b981',
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              Engineering Excellence
+            </div>
+          </div>
+
+          {/* Brand Mark */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100px',
+              height: '100px',
+              backgroundColor: '#0f172a',
+              borderRadius: '24px',
+              marginBottom: '32px',
+              boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '48px',
+                fontWeight: 'bold',
+                color: '#10b981',
+              }}
+            >
+              MB
+            </div>
+          </div>
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: '900',
+              color: '#0f172a',
+              marginBottom: '16px',
+              textAlign: 'center',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
+          </div>
+
+          {/* Subtitle */}
+          <div
+            style={{
+              fontSize: '32px',
+              fontWeight: '500',
+              color: '#64748b',
+              textAlign: 'center',
+              maxWidth: '800px',
+              lineHeight: 1.4,
+            }}
+          >
+            Energiekabelprojekte & Technische Beratung
+            <br />
+            bis 110 kV
+          </div>
+        </div>
+
+        {/* Tech Lines - matching .tech-line style */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '10%',
+            left: 0,
+            width: '200px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '15%',
+            right: 0,
+            width: '300px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

app/twitter-image.tsx

@@ -0,0 +1,175 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#ffffff',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        {/* Grid Pattern Background */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
+            backgroundSize: '40px 40px',
+            zIndex: 0,
+          }}
+        />
+        
+        {/* Content Container */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            padding: '60px 80px',
+            borderRadius: '48px',
+            border: '1px solid #e2e8f0',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
+            zIndex: 1,
+            position: 'relative',
+          }}
+        >
+          {/* Engineering Excellence Badge */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              padding: '8px 20px',
+              backgroundColor: 'rgba(16, 185, 129, 0.1)',
+              borderRadius: '100px',
+              marginBottom: '32px',
+            }}
+          >
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                backgroundColor: '#10b981',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#10b981',
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              Engineering Excellence
+            </div>
+          </div>
+
+          {/* Brand Mark */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100px',
+              height: '100px',
+              backgroundColor: '#0f172a',
+              borderRadius: '24px',
+              marginBottom: '32px',
+              boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '48px',
+                fontWeight: 'bold',
+                color: '#10b981',
+              }}
+            >
+              MB
+            </div>
+          </div>
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: '900',
+              color: '#0f172a',
+              marginBottom: '16px',
+              textAlign: 'center',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
+          </div>
+
+          {/* Subtitle */}
+          <div
+            style={{
+              fontSize: '32px',
+              fontWeight: '500',
+              color: '#64748b',
+              textAlign: 'center',
+              maxWidth: '800px',
+              lineHeight: 1.4,
+            }}
+          >
+            Energiekabelprojekte & Technische Beratung
+            <br />
+            bis 110 kV
+          </div>
+        </div>
+
+        {/* Tech Lines */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '10%',
+            left: 0,
+            width: '200px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '15%',
+            right: 0,
+            width: '300px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

components/ContactContent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import { Mail, MapPin, CheckCircle } from 'lucide-react';
 import { Button } from './Button';
 import { Counter } from './Counter';
 import { Reveal } from './Reveal';

components/Layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowUp, Home, Info, Menu, X } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';