init

src/pages/AGB.tsx

@@ -0,0 +1,13 @@
+const AGB = () => (
+  <div className="container">
+    <section>
+      <h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
+      <div style={{ maxWidth: '800px' }}>
+        <p>Hier finden Sie unsere Allgemeinen Geschäftsbedingungen...</p>
+        <p style={{ marginTop: '1rem' }}>[Platzhalter für AGB-Inhalte]</p>
+      </div>
+    </section>
+  </div>
+);
+
+export default AGB;

src/pages/About.tsx

@@ -0,0 +1,135 @@
+import { motion } from 'framer-motion';
+import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck } from 'lucide-react';
+
+const About = () => (
+  <div>
+    <section style={{ background: 'white' }}>
+      <div className="container">
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}>
+          <div>
+            <h1 className="no-underline">Über uns</h1>
+            <p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}>
+              Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
+            </p>
+            <p style={{ marginBottom: '1.5rem' }}>
+              MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse, der mit jahrzehntelanger Erfahrung und einem klaren Blick für zukunftsweisende Entwicklungen komplexe Projekte sicher zum Ziel führt.
+            </p>
+            <p>
+              Unsere Wurzeln liegen in der tiefen praktischen Erfahrung. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV und darüber hinaus zu realisieren.
+            </p>
+          </div>
+          <div className="img-placeholder" style={{ height: '500px', marginBottom: 0 }}>
+            [ Engineering Excellence Visualization ]
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <div className="container">
+        <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
+          <h2 className="no-underline">Die Köpfe hinter MB Grid Solution</h2>
+          <p style={{ color: 'var(--text-secondary)' }}>Expertise, die Energie zum Laufen bringt.</p>
+        </div>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
+          <div className="card">
+            <div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
+              <div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
+              <div>
+                <h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3>
+                <p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Technische Leitung</p>
+              </div>
+            </div>
+            <p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
+              „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“
+            </p>
+            <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
+              Michael Bodemer ist der Experte für komplexe Kabelnetze. Mit seinem scharfen Blick für praktikable Lösungen treibt er Projekte in der Planung und technischen Umsetzung voran. Er stellt sicher, dass für jedes Vorhaben die optimalen Komponenten ausgewählt werden.
+            </p>
+          </div>
+
+          <div className="card">
+            <div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
+              <div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
+              <div>
+                <h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3>
+                <p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Projektmanagement</p>
+              </div>
+            </div>
+            <p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
+              „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“
+            </p>
+            <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
+              Klaus Mintel bewahrt auch bei komplexesten Anforderungen den Weitblick. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er für reibungslose Abläufe. Er bringt technische Themen präzise auf den Punkt und sichert den Projekterfolg.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: 'white' }}>
+      <div className="container">
+        <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
+          <h2 className="no-underline">Unser Manifest</h2>
+          <p style={{ color: 'var(--text-secondary)' }}>Werte, die unsere tägliche Arbeit leiten.</p>
+        </div>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>1. Kompetenz</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.</p>
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>2. Verfügbarkeit</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.</p>
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>3. Lösungen</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.</p>
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>4. Logistik & Überwachung</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.</p>
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>5. Offenheit</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.</p>
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '1.5rem' }}>
+            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div>
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4>
+              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <div className="container">
+        <div className="card" style={{ background: 'var(--primary-color)', color: 'white', textAlign: 'center', padding: '4rem' }}>
+          <h2 style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem' }}>Bereit für Ihr nächstes Projekt?</h2>
+          <p style={{ marginBottom: '2.5rem', opacity: 0.9, fontSize: '1.1rem' }}>Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.</p>
+          <a href="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>Jetzt Kontakt aufnehmen</a>
+        </div>
+      </div>
+    </section>
+  </div>
+);
+
+export default About;

src/pages/Contact.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
+
+const Contact = () => {
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    const formData = new FormData(e.currentTarget);
+    const data = Object.fromEntries(formData.entries());
+    
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      if (response.ok) {
+        setSubmitted(true);
+      } else {
+        const err = await response.json();
+        alert(`Fehler: ${err.error || 'Es gab einen Fehler beim Senden Ihrer Nachricht.'}`);
+      }
+    } catch (error) {
+      alert('Es gab einen Fehler beim Senden Ihrer Nachricht.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container">
+      <section>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '4rem' }}>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <h1>Kontakt</h1>
+            <p style={{ fontSize: '1.1rem', color: 'var(--text-secondary)', marginBottom: '3rem' }}>
+              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
+            </p>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+              <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
+                <div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Mail size={24} /></div>
+                <div>
+                  <h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>E-Mail</h4>
+                  <a href="mailto:info@mb-grid-solutions.com" style={{ fontSize: '1.1rem', fontWeight: 500 }}>info@mb-grid-solutions.com</a>
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
+                <div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><Phone size={24} /></div>
+                <div>
+                  <h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Telefon</h4>
+                  <a href="tel:+49123456789" style={{ fontSize: '1.1rem', fontWeight: 500 }}>+49 (0) 123 456789</a>
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start' }}>
+                <div style={{ color: 'var(--accent-green)', background: 'white', padding: '1rem', border: '1px solid var(--secondary-bg)' }}><MapPin size={24} /></div>
+                <div>
+                  <h4 style={{ marginBottom: '0.25rem', fontSize: '1rem' }}>Anschrift</h4>
+                  <p style={{ fontSize: '1.1rem', fontWeight: 500, color: 'var(--primary-color)' }}>
+                    MB Grid Solutions GmbH<br />
+                    Raiffeisenstraße 22<br />
+                    73630 Remshalden
+                  </p>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="card"
+          >
+            {submitted ? (
+              <div style={{ textAlign: 'center', padding: '3rem 0' }}>
+                <div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}><CheckCircle size={64} /></div>
+                <h3>Nachricht gesendet</h3>
+                <p style={{ color: 'var(--text-secondary)' }}>Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.</p>
+                <button onClick={() => setSubmitted(false)} className="cta-button" style={{ marginTop: '2rem' }}>Weitere Nachricht</button>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
+                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                  <div>
+                    <label htmlFor="name" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Name *</label>
+                    <input type="text" id="name" name="name" required minLength={2} maxLength={100} placeholder="Ihr Name" />
+                  </div>
+                  <div>
+                    <label htmlFor="company" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Firma</label>
+                    <input type="text" id="company" name="company" placeholder="Ihr Unternehmen" />
+                  </div>
+                </div>
+                
+                <label htmlFor="email" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>E-Mail *</label>
+                <input type="email" id="email" name="email" required placeholder="ihre@email.de" />
+                
+                <label htmlFor="message" style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Nachricht *</label>
+                <textarea id="message" name="message" required minLength={20} maxLength={4000} rows={6} placeholder="Wie können wir Ihnen helfen?"></textarea>
+                
+                <div className="visually-hidden">
+                  <label htmlFor="website">Website (bitte leer lassen)</label>
+                  <input type="text" id="website" name="website" tabIndex={-1} autoComplete="off" />
+                </div>
+                
+                <button type="submit" disabled={loading} className="cta-button" style={{ alignSelf: 'flex-start' }}>
+                  {loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} />
+                </button>
+                <p style={{ fontSize: '0.75rem', marginTop: '1.5rem', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
+                  * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer <Link to="/datenschutz" style={{ textDecoration: 'underline' }}>Datenschutzerklärung</Link> einverstanden.
+                </p>
+              </form>
+            )}
+          </motion.div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Contact;

src/pages/Home.tsx

@@ -0,0 +1,145 @@
+import { Link } from 'react-router-dom';
+import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';
+
+const Home = () => (
+  <div className="home-page">
+    <section className="hero" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', background: 'white', position: 'relative', overflow: 'hidden', padding: '4rem 0' }}>
+      <div style={{ position: 'absolute', top: 0, right: 0, width: '50%', height: '100%', background: '#f1f5f9', clipPath: 'polygon(20% 0, 100% 0, 100% 100%, 0% 100%)', zIndex: 0 }} />
+      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
+          <div>
+            <span className="badge">Engineering Excellence</span>
+            <h1 style={{ marginBottom: '1.5rem' }}>Spezialisierter Partner für Energiekabelprojekte</h1>
+            <p style={{ fontSize: '1.2rem', marginBottom: '2.5rem', color: 'var(--text-secondary)', lineHeight: 1.5, maxWidth: '600px' }}>
+              Herstellerneutrale technische Beratung und Projektbegleitung für Hochspannungsnetze bis 110 kV.
+            </p>
+            <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+              <Link to="/kontakt" className="cta-button">
+                Projekt anfragen <ArrowRight size={18} />
+              </Link>
+              <Link to="/ueber-uns" style={{ fontWeight: 700, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                Mehr erfahren <ArrowRight size={16} />
+              </Link>
+            </div>
+          </div>
+          <div className="img-placeholder" style={{ height: '400px', marginBottom: 0, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }}>
+            [ High-Voltage Infrastructure ]
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: '#f8fafc' }}>
+      <div className="container">
+        <div style={{ marginBottom: '5rem' }}>
+          <span className="badge">Portfolio</span>
+          <h2 style={{ border: 'none', padding: 0 }}>Unsere Leistungen</h2>
+          <p style={{ color: 'var(--text-secondary)', maxWidth: '600px' }}>Präzision und Unabhängigkeit in jeder Phase Ihres Projekts.</p>
+        </div>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2.5rem' }}>
+          {[
+            { icon: <Zap size={32} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte und technische Spezifikationen für Ihre Kabelinfrastruktur.' },
+            { icon: <Shield size={32} />, title: 'Projektbegleitung', desc: 'Professionelle Überwachung und Qualitätssicherung während der gesamten Ausführung.' },
+            { icon: <BarChart3 size={32} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl.' }
+          ].map((item, i) => (
+            <div key={i} className="card">
+              <div style={{ color: 'var(--accent-green)', marginBottom: '1.5rem' }}>{item.icon}</div>
+              <h3 style={{ marginBottom: '1rem' }}>{item.title}</h3>
+              <p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: 'white' }}>
+      <div className="container">
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', alignItems: 'center', gap: '4rem' }}>
+          <div className="img-placeholder" style={{ height: '400px', marginBottom: 0 }}>
+            [ Technical Drawing / CAD ]
+          </div>
+          <div>
+            <span className="badge">Expertise</span>
+            <h2>Anwendungen & Zielgruppen</h2>
+            <p style={{ marginBottom: '2.5rem', color: 'var(--text-secondary)', fontSize: '1.1rem' }}>Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.</p>
+            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
+              {[
+                'Energieversorger',
+                'Ingenieurbüros',
+                'Tiefbauunternehmen',
+                'Industrie',
+                'Projektierer EE',
+                'Planungsbüros'
+              ].map((item, i) => (
+                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', fontSize: '0.95rem', fontWeight: 600, color: 'var(--primary-color)' }}>
+                  <CheckCircle2 size={18} style={{ color: 'var(--accent-green)' }} />
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: '#0f172a', color: 'white' }}>
+      <div className="container">
+        <div style={{ marginBottom: '5rem' }}>
+          <span className="badge" style={{ color: 'white', opacity: 0.6 }}>Expertise</span>
+          <h2 style={{ color: 'white', border: 'none', padding: 0 }}>Technische Spezifikationen</h2>
+        </div>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
+          {[
+            { label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y, NA2XS(FL)2Y, NA2X(F)KLD2Y', desc: 'Umfassende Expertise in der Spezifikation gängiger Hochspannungskabel.' },
+            { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für die 110-kV-Ebene und komplexe Mittelspannung.' },
+            { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Millikenleiter', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
+          ].map((item, i) => (
+            <div 
+              key={i}
+              style={{ background: 'rgba(255,255,255,0.05)', padding: '2.5rem', border: '1px solid rgba(255,255,255,0.1)' }}
+            >
+              <h4 style={{ fontSize: '0.75rem', textTransform: 'uppercase', color: 'var(--accent-green)', marginBottom: '1rem', letterSpacing: '0.2em' }}>{item.label}</h4>
+              <p style={{ fontWeight: 700, fontSize: '1.15rem', marginBottom: '1rem', color: 'white' }}>{item.value}</p>
+              <p style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.6)', lineHeight: 1.6 }}>{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: 'white' }}>
+      <div className="container">
+        <div style={{ marginBottom: '5rem' }}>
+          <span className="badge">Werte</span>
+          <h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2>
+        </div>
+        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
+          {[
+            { title: 'Exzellenz', desc: 'Höchste technische Präzision in jedem Detail. Wir suchen die optimale Lösung jenseits des Standards.' },
+            { title: 'Nachhaltigkeit', desc: 'Zukunftssichere Lösungen für die Infrastruktur. Wir denken in Lebenszyklen und Zuverlässigkeit.' },
+            { title: 'Transparenz', desc: 'Ehrliche Beratung auf Augenhöhe. Wir kommunizieren klar und herstellerneutral.' }
+          ].map((item, i) => (
+            <div key={i} style={{ borderLeft: '3px solid var(--accent-green)', paddingLeft: '2rem' }}>
+              <h3 style={{ marginBottom: '1rem', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '1.1rem' }}>{item.title}</h3>
+              <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, fontSize: '1rem' }}>{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <section style={{ background: 'var(--primary-color)', padding: '6rem 0', position: 'relative', overflow: 'hidden' }}>
+      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
+        <h2 className="no-underline" style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem', fontSize: 'clamp(1.8rem, 5vw, 2.5rem)' }}>Bereit für Ihr nächstes Projekt?</h2>
+        <p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: '3rem', fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 3rem' }}>
+          Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
+        </p>
+        <Link to="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>
+          Jetzt Kontakt aufnehmen <ArrowRight size={18} />
+        </Link>
+      </div>
+    </section>
+  </div>
+);
+
+export default Home;

src/pages/Legal.tsx

@@ -0,0 +1,34 @@
+const Legal = () => (
+  <div className="container">
+    <section>
+      <h1>Impressum</h1>
+      <div style={{ maxWidth: '800px' }}>
+        <p><strong>Angaben gemäß § 5 TMG</strong></p>
+        <p style={{ marginBottom: '1.5rem' }}>
+          MB Grid Solutions GmbH<br />
+          Raiffeisenstraße 22<br />
+          73630 Remshalden
+        </p>
+        <p><strong>Vertreten durch:</strong></p>
+        <p style={{ marginBottom: '1.5rem' }}>Michael Bodemer</p>
+        <p><strong>Kontakt:</strong></p>
+        <p style={{ marginBottom: '1.5rem' }}>
+          E-Mail: info@mb-grid-solutions.com<br />
+          Web: www.mb-grid-solutions.com
+        </p>
+        <p><strong>Registereintrag:</strong></p>
+        <p style={{ marginBottom: '1.5rem' }}>
+          Eintragung im Handelsregister.<br />
+          Registergericht: Amtsgericht Stuttgart<br />
+          Registernummer: HRB 798037
+        </p>
+        <p><strong>Urheberrecht:</strong></p>
+        <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>
+      </div>
+    </section>
+  </div>
+);
+
+export default Legal;

src/pages/Privacy.tsx

@@ -0,0 +1,22 @@
+const Privacy = () => (
+  <div className="container">
+    <section>
+      <h1>Datenschutzerklärung</h1>
+      <div style={{ maxWidth: '800px' }}>
+        <h2>1. Datenschutz auf einen Blick</h2>
+        <p style={{ marginBottom: '1.5rem' }}>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>
+        
+        <h2>2. Hosting</h2>
+        <p style={{ marginBottom: '1.5rem' }}>Unsere Website wird bei Hetzner Online GmbH gehostet. Der Serverstandort ist Deutschland. Wir haben einen Vertrag über Auftragsverarbeitung (AVV) mit Hetzner geschlossen.</p>
+        
+        <h2>3. Kontaktformular</h2>
+        <p style={{ marginBottom: '1.5rem' }}>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>
+        
+        <h2>4. Server-Log-Dateien</h2>
+        <p style={{ marginBottom: '1.5rem' }}>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>
+      </div>
+    </section>
+  </div>
+);
+
+export default Privacy;