update

src/components/Layout.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import { ArrowUp, Home, Info, Mail } from 'lucide-react';
-import { Link, useLocation, NavLink } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
-import { Home, Info, Mail, ArrowUp } from 'lucide-react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation();
@@ -39,7 +39,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             <img
               src="/assets/logo.png"
               alt="MB Grid Solutions"
-              style={{ height: '80px' }}
+              style={{ height: '160px' }}
               loading="eager"
             />
           </Link>

src/index.css

@@ -435,6 +435,7 @@ header .container {
   .hero {
     padding: 0 !important;
     min-height: auto !important;
+    display: block !important;
   }
 
   .hero-bg {
@@ -449,7 +450,7 @@ header .container {
   .hero-content {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     padding: var(--spacing-2xl) var(--spacing-lg);
-    text-align: center;
+    text-align: left !important;
     order: 2;
   }
 
@@ -458,6 +459,7 @@ header .container {
     line-height: 1.15;
     margin-bottom: var(--spacing-md);
     letter-spacing: -0.03em;
+    text-align: left !important;
   }
 
   .hero-content p {
@@ -465,13 +467,16 @@ header .container {
     line-height: 1.6;
     margin-bottom: var(--spacing-xl);
     color: #4b5563;
+    text-align: left !important;
+    max-width: none !important;
   }
 
   .hero-actions {
-    justify-content: center;
+    justify-content: flex-start !important;
     flex-direction: column;
     width: 100%;
     gap: var(--spacing-md) !important;
+    align-items: flex-start !important;
   }
 
   .hero-actions .secondary-link {

src/pages/About.tsx

@@ -3,15 +3,16 @@ import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck }
 const About = () => (
   <div>
     <section style={{
-      background: 'linear-gradient(to right, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
+      background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       minHeight: 'clamp(60vh, 70vh, 80vh)',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      justifyContent: 'flex-start'
     }}>
-      <div className="container">
+      <div className="container" style={{ margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
-        <div className="about-hero-content" style={{ maxWidth: '700px' }}>
+        <div className="about-hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
           <h1 className="no-underline">Über uns</h1>
           <p style={{
             fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
@@ -290,7 +291,7 @@ const About = () => (
         <div className="card" style={{
           background: 'var(--primary-color)',
           color: 'white',
-          textAlign: 'center',
+          textAlign: 'left',
           padding: 'clamp(3rem, 6vw, 4rem)'
         }}>
           <h2
@@ -301,7 +302,8 @@ const About = () => (
               padding: 0,
               marginBottom: 'var(--spacing-lg)',
               fontSize: 'clamp(1.5rem, 6vw, 2rem)',
-              position: 'relative'
+              position: 'relative',
+              textAlign: 'left'
             }}
           >
             Bereit für Ihr nächstes Projekt?
@@ -310,7 +312,8 @@ const About = () => (
             marginBottom: 'var(--spacing-2xl)',
             opacity: 0.9,
             fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
-            lineHeight: 1.65
+            lineHeight: 1.65,
+            textAlign: 'left'
           }}>
             Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
           </p>

src/pages/Contact.tsx

@@ -1,6 +1,6 @@
+import { CheckCircle, Mail, MapPin, Phone, Send } from 'lucide-react';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
 
 const Contact = () => {
   const [submitted, setSubmitted] = useState(false);
@@ -32,316 +32,342 @@ const Contact = () => {
   };
 
   return (
-    <div className="container">
+    <div>
-      <section>
+      <section
-        <div className="grid contact-grid" style={{
+        className="hero"
-          gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
+        style={{
-          gap: 'clamp(2rem, 6vw, 4rem)'
+          minHeight: 'clamp(40vh, 50vh, 60vh)',
-        }}>
+          display: 'flex',
-          <div>
+          alignItems: 'center',
-            <h1>Kontakt</h1>
+          background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/business/iStock-1068752548.jpg")',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          position: 'relative',
+          overflow: 'hidden',
+          padding: 'clamp(1.5rem, 4vw, 3rem) 0',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <div className="container" style={{ position: 'relative', zIndex: 1, margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
+          <div className="hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
+            <span className="badge">Kontakt</span>
+            <h1 style={{ marginBottom: 'var(--spacing-md)' }}>
+              Kontakt
+            </h1>
             <p style={{
-              fontSize: 'clamp(1.0625rem, 2.5vw, 1.1rem)',
+              fontSize: 'clamp(1rem, 2vw, 1.1rem)',
+              marginBottom: 'var(--spacing-xl)',
               color: 'var(--text-secondary)',
-              marginBottom: 'var(--spacing-2xl)',
+              lineHeight: 1.6,
-              lineHeight: 1.65
+              maxWidth: '600px'
             }}>
               Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
             </p>
+          </div>
+        </div>
+      </section>
 
-            <div style={{
+      <section>
-              display: 'flex',
+        <div className="container">
-              flexDirection: 'column',
+          <div className="grid contact-grid" style={{
-              gap: 'var(--spacing-xl)'
+            gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
-            }}>
+            gap: 'clamp(2rem, 6vw, 4rem)'
-              <a
+          }}>
-                href="mailto:info@mb-grid-solutions.com"
+            <div>
-                className="contact-info-item"
+              <div style={{
-                style={{
+                display: 'flex',
-                  display: 'flex',
+                flexDirection: 'column',
-                  gap: 'var(--spacing-lg)',
+                gap: 'var(--spacing-xl)'
-                  alignItems: 'flex-start',
+              }}>
-                  textDecoration: 'none'
+                <a
-                }}
+                  href="mailto:info@mb-grid-solutions.com"
-                aria-label="E-Mail an info@mb-grid-solutions.com senden"
+                  className="contact-info-item"
-              >
+                  style={{
-                <div style={{
+                    display: 'flex',
-                  color: 'var(--accent-green)',
+                    gap: 'var(--spacing-lg)',
-                  background: 'white',
+                    alignItems: 'flex-start',
-                  padding: 'var(--spacing-md)',
+                    textDecoration: 'none'
-                  border: '1px solid var(--secondary-bg)',
+                  }}
-                  borderRadius: '12px',
+                  aria-label="E-Mail an info@mb-grid-solutions.com senden"
-                  flexShrink: 0
+                >
-                }}>
+                  <div style={{
-                  <Mail size={24} strokeWidth={2} />
+                    color: 'var(--accent-green)',
-                </div>
+                    background: 'white',
-                <div>
+                    padding: 'var(--spacing-md)',
-                  <h4 style={{
+                    border: '1px solid var(--secondary-bg)',
-                    marginBottom: '0.25rem',
+                    borderRadius: '12px',
-                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+                    flexShrink: 0
-                    fontWeight: 600
                   }}>
-                    E-Mail
+                    <Mail size={24} strokeWidth={2} />
-                  </h4>
+                  </div>
-                  <span style={{
+                  <div>
-                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
+                    <h4 style={{
-                    fontWeight: 500,
+                      marginBottom: '0.25rem',
-                    color: 'var(--primary-color)'
+                      fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+                      fontWeight: 600
+                    }}>
+                      E-Mail
+                    </h4>
+                    <span style={{
+                      fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
+                      fontWeight: 500,
+                      color: 'var(--primary-color)'
+                    }}>
+                      info@mb-grid-solutions.com
+                    </span>
+                  </div>
+                </a>
+                <a
+                  href="tel:+49123456789"
+                  className="contact-info-item"
+                  style={{
+                    display: 'flex',
+                    gap: 'var(--spacing-lg)',
+                    alignItems: 'flex-start',
+                    textDecoration: 'none'
+                  }}
+                  aria-label="Anrufen unter +49 (0) 123 456789"
+                >
+                  <div style={{
+                    color: 'var(--accent-green)',
+                    background: 'white',
+                    padding: 'var(--spacing-md)',
+                    border: '1px solid var(--secondary-bg)',
+                    borderRadius: '12px',
+                    flexShrink: 0
                   }}>
-                    info@mb-grid-solutions.com
+                    <Phone size={24} strokeWidth={2} />
-                  </span>
+                  </div>
-                </div>
+                  <div>
-              </a>
+                    <h4 style={{
-              <a
+                      marginBottom: '0.25rem',
-                href="tel:+49123456789"
+                      fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
-                className="contact-info-item"
+                      fontWeight: 600
-                style={{
+                    }}>
-                  display: 'flex',
+                      Telefon
-                  gap: 'var(--spacing-lg)',
+                    </h4>
-                  alignItems: 'flex-start',
+                    <span style={{
-                  textDecoration: 'none'
+                      fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
-                }}
+                      fontWeight: 500,
-                aria-label="Anrufen unter +49 (0) 123 456789"
+                      color: 'var(--primary-color)'
-              >
+                    }}>
-                <div style={{
+                      +49 (0) 123 456789
-                  color: 'var(--accent-green)',
+                    </span>
-                  background: 'white',
+                  </div>
-                  padding: 'var(--spacing-md)',
+                </a>
-                  border: '1px solid var(--secondary-bg)',
+                <div
-                  borderRadius: '12px',
+                  className="contact-info-item"
-                  flexShrink: 0
+                  style={{
-                }}>
+                    display: 'flex',
-                  <Phone size={24} strokeWidth={2} />
+                    gap: 'var(--spacing-lg)',
-                </div>
+                    alignItems: 'flex-start'
-                <div>
+                  }}
-                  <h4 style={{
+                >
-                    marginBottom: '0.25rem',
+                  <div style={{
-                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+                    color: 'var(--accent-green)',
-                    fontWeight: 600
+                    background: 'white',
+                    padding: 'var(--spacing-md)',
+                    border: '1px solid var(--secondary-bg)',
+                    borderRadius: '12px',
+                    flexShrink: 0
                   }}>
-                    Telefon
+                    <MapPin size={24} strokeWidth={2} />
-                  </h4>
+                  </div>
-                  <span style={{
+                  <div>
-                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
+                    <h4 style={{
-                    fontWeight: 500,
+                      marginBottom: '0.25rem',
-                    color: 'var(--primary-color)'
+                      fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
-                  }}>
+                      fontWeight: 600
-                    +49 (0) 123 456789
+                    }}>
-                  </span>
+                      Anschrift
-                </div>
+                    </h4>
-              </a>
+                    <p style={{
-              <div
+                      fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
-                className="contact-info-item"
+                      fontWeight: 500,
-                style={{
+                      color: 'var(--primary-color)',
-                  display: 'flex',
+                      lineHeight: 1.6
-                  gap: 'var(--spacing-lg)',
+                    }}>
-                  alignItems: 'flex-start'
+                      MB Grid Solutions GmbH<br />
-                }}
+                      Raiffeisenstraße 22<br />
-              >
+                      73630 Remshalden
-                <div style={{
+                    </p>
-                  color: 'var(--accent-green)',
+                  </div>
-                  background: 'white',
-                  padding: 'var(--spacing-md)',
-                  border: '1px solid var(--secondary-bg)',
-                  borderRadius: '12px',
-                  flexShrink: 0
-                }}>
-                  <MapPin size={24} strokeWidth={2} />
-                </div>
-                <div>
-                  <h4 style={{
-                    marginBottom: '0.25rem',
-                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
-                    fontWeight: 600
-                  }}>
-                    Anschrift
-                  </h4>
-                  <p style={{
-                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
-                    fontWeight: 500,
-                    color: 'var(--primary-color)',
-                    lineHeight: 1.6
-                  }}>
-                    MB Grid Solutions GmbH<br />
-                    Raiffeisenstraße 22<br />
-                    73630 Remshalden
-                  </p>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div className="card">
+            <div className="card">
-            {submitted ? (
+              {submitted ? (
-              <div style={{
-                textAlign: 'center',
-                padding: 'clamp(2rem, 6vw, 3rem) 0'
-              }}>
                 <div style={{
-                  color: 'var(--accent-green)',
+                  textAlign: 'center',
-                  marginBottom: 'var(--spacing-lg)',
+                  padding: 'clamp(2rem, 6vw, 3rem) 0'
+                }}>
+                  <div style={{
+                    color: 'var(--accent-green)',
+                    marginBottom: 'var(--spacing-lg)',
+                    display: 'flex',
+                    justifyContent: 'center'
+                  }}>
+                    <CheckCircle size={64} strokeWidth={2} />
+                  </div>
+                  <h3 style={{
+                    fontSize: 'clamp(1.25rem, 4vw, 1.5rem)',
+                    marginBottom: 'var(--spacing-md)'
+                  }}>
+                    Nachricht gesendet
+                  </h3>
+                  <p style={{
+                    color: 'var(--text-secondary)',
+                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+                    lineHeight: 1.65,
+                    marginBottom: 'var(--spacing-xl)'
+                  }}>
+                    Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
+                  </p>
+                  <button
+                    onClick={() => setSubmitted(false)}
+                    className="cta-button"
+                    aria-label="Weitere Nachricht senden"
+                  >
+                    Weitere Nachricht
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} style={{
                   display: 'flex',
-                  justifyContent: 'center'
+                  flexDirection: 'column'
                 }}>
-                  <CheckCircle size={64} strokeWidth={2} />
+                  <div className="grid contact-form-grid" style={{
-                </div>
+                    gridTemplateColumns: '1fr 1fr',
-                <h3 style={{
+                    gap: 'var(--spacing-md)'
-                  fontSize: 'clamp(1.25rem, 4vw, 1.5rem)',
+                  }}>
-                  marginBottom: 'var(--spacing-md)'
+                    <div>
-                }}>
+                      <label
-                  Nachricht gesendet
+                        htmlFor="name"
-                </h3>
+                        style={{
-                <p style={{
+                          display: 'block',
-                  color: 'var(--text-secondary)',
+                          marginBottom: 'var(--spacing-xs)',
-                  fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
+                          fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
-                  lineHeight: 1.65,
+                          fontWeight: 600
-                  marginBottom: 'var(--spacing-xl)'
+                        }}
-                }}>
+                      >
-                  Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
+                        Name *
-                </p>
+                      </label>
-                <button
+                      <input
-                  onClick={() => setSubmitted(false)}
+                        type="text"
-                  className="cta-button"
+                        id="name"
-                  aria-label="Weitere Nachricht senden"
+                        name="name"
-                >
+                        required
-                  Weitere Nachricht
+                        minLength={2}
-                </button>
+                        maxLength={100}
-              </div>
+                        placeholder="Ihr Name"
-            ) : (
+                        aria-required="true"
-              <form onSubmit={handleSubmit} style={{
+                      />
-                display: 'flex',
+                    </div>
-                flexDirection: 'column'
+                    <div>
-              }}>
+                      <label
-                <div className="grid contact-form-grid" style={{
+                        htmlFor="company"
-                  gridTemplateColumns: '1fr 1fr',
+                        style={{
-                  gap: 'var(--spacing-md)'
+                          display: 'block',
-                }}>
+                          marginBottom: 'var(--spacing-xs)',
-                  <div>
+                          fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
-                    <label
+                          fontWeight: 600
-                      htmlFor="name"
+                        }}
-                      style={{
+                      >
-                        display: 'block',
+                        Firma
-                        marginBottom: 'var(--spacing-xs)',
+                      </label>
-                        fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
+                      <input
-                        fontWeight: 600
+                        type="text"
-                      }}
+                        id="company"
-                    >
+                        name="company"
-                      Name *
+                        placeholder="Ihr Unternehmen"
-                    </label>
+                      />
-                    <input
+                    </div>
-                      type="text"
-                      id="name"
-                      name="name"
-                      required
-                      minLength={2}
-                      maxLength={100}
-                      placeholder="Ihr Name"
-                      aria-required="true"
-                    />
                   </div>
-                  <div>
-                    <label
-                      htmlFor="company"
-                      style={{
-                        display: 'block',
-                        marginBottom: 'var(--spacing-xs)',
-                        fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
-                        fontWeight: 600
-                      }}
-                    >
-                      Firma
-                    </label>
-                    <input
-                      type="text"
-                      id="company"
-                      name="company"
-                      placeholder="Ihr Unternehmen"
-                    />
-                  </div>
-                </div>
                   
-                <label
+                  <label
-                  htmlFor="email"
+                    htmlFor="email"
-                  style={{
-                    display: 'block',
-                    marginBottom: 'var(--spacing-xs)',
-                    fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
-                    fontWeight: 600
-                  }}
-                >
-                  E-Mail *
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  required
-                  placeholder="ihre@email.de"
-                  aria-required="true"
-                />
-                
-                <label
-                  htmlFor="message"
-                  style={{
-                    display: 'block',
-                    marginBottom: 'var(--spacing-xs)',
-                    fontSize: 'clamp(0.875rem, 2vw, 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?"
-                  aria-required="true"
-                ></textarea>
-                
-                <div className="visually-hidden" style={{ display: 'none' }}>
-                  <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' }}
-                  aria-label={loading ? 'Nachricht wird gesendet' : 'Nachricht senden'}
-                >
-                  {loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
-                </button>
-                <p style={{
-                  fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
-                  marginTop: 'var(--spacing-lg)',
-                  color: 'var(--text-secondary)',
-                  lineHeight: 1.5
-                }}>
-                  * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
-                  <Link
-                    to="/datenschutz"
                     style={{
-                      textDecoration: 'underline',
+                      display: 'block',
-                      fontWeight: 500
+                      marginBottom: 'var(--spacing-xs)',
+                      fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
+                      fontWeight: 600
                     }}
                   >
-                    Datenschutzerklärung
+                    E-Mail *
-                  </Link>{' '}
+                  </label>
-                  einverstanden.
+                  <input
-                </p>
+                    type="email"
-              </form>
+                    id="email"
-            )}
+                    name="email"
+                    required
+                    placeholder="ihre@email.de"
+                    aria-required="true"
+                  />
+                  
+                  <label
+                    htmlFor="message"
+                    style={{
+                      display: 'block',
+                      marginBottom: 'var(--spacing-xs)',
+                      fontSize: 'clamp(0.875rem, 2vw, 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?"
+                    aria-required="true"
+                  ></textarea>
+                  
+                  <div className="visually-hidden" style={{ display: 'none' }}>
+                    <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' }}
+                    aria-label={loading ? 'Nachricht wird gesendet' : 'Nachricht senden'}
+                  >
+                    {loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
+                  </button>
+                  <p style={{
+                    fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
+                    marginTop: 'var(--spacing-lg)',
+                    color: 'var(--text-secondary)',
+                    lineHeight: 1.5
+                  }}>
+                    * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
+                    <Link
+                      to="/datenschutz"
+                      style={{
+                        textDecoration: 'underline',
+                        fontWeight: 500
+                      }}
+                    >
+                      Datenschutzerklärung
+                    </Link>{' '}
+                    einverstanden.
+                  </p>
+                </form>
+              )}
+            </div>
           </div>
         </div>
       </section>

src/pages/Home.tsx

@@ -9,16 +9,17 @@ const Home = () => (
         minHeight: 'clamp(70vh, 80vh, 90vh)',
         display: 'flex',
         alignItems: 'center',
-        background: 'linear-gradient(to right, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.7) 100%), url("/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp")',
+        background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/cables/HS Kabel 2.jpg")',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         position: 'relative',
         overflow: 'hidden',
-        padding: 'clamp(2rem, 6vw, 4rem) 0'
+        padding: 'clamp(2rem, 6vw, 4rem) 0',
+        justifyContent: 'flex-start'
       }}
     >
-      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
+      <div className="container" style={{ position: 'relative', zIndex: 1, margin: '0 auto', display: 'flex', justifyContent: 'flex-start', paddingLeft: 0 }}>
-        <div className="hero-content" style={{ maxWidth: '700px' }}>
+        <div className="hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
           <span className="badge">Engineering Excellence</span>
           <h1 style={{ marginBottom: 'var(--spacing-lg)' }}>
             Spezialisierter Partner für Energiekabelprojekte
@@ -30,7 +31,7 @@ const Home = () => (
             lineHeight: 1.6,
             maxWidth: '600px'
           }}>
-            Herstellerneutrale technische Mit-Begleitung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
+            Herstellerneutrale technische Beratung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
           </p>
           <div className="hero-actions" style={{
             display: 'flex',
@@ -115,7 +116,7 @@ const Home = () => (
           gap: 'clamp(2rem, 6vw, 4rem)'
         }}>
           <img
-            src="/media/27158-power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp"
+            src="/media/cables/HS Kabel.png"
             alt="Technical Engineering and Cable Infrastructure"
             className="split-img"
             style={{
@@ -288,7 +289,7 @@ const Home = () => (
         overflow: 'hidden'
       }}
     >
-      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
+      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'left' }}>
         <h2
           className="no-underline"
           style={{
@@ -298,7 +299,8 @@ const Home = () => (
             marginBottom: 'var(--spacing-lg)',
             fontSize: 'clamp(1.5rem, 6vw, 2.5rem)',
             lineHeight: 1.2,
-            position: 'relative'
+            position: 'relative',
+            textAlign: 'left'
           }}
         >
           Bereit für Ihr nächstes Projekt?
@@ -308,8 +310,9 @@ const Home = () => (
           marginBottom: 'var(--spacing-2xl)',
           fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
           maxWidth: '700px',
-          margin: '0 auto var(--spacing-2xl)',
+          margin: '0 0 var(--spacing-2xl) 0',
-          lineHeight: 1.65
+          lineHeight: 1.65,
+          textAlign: 'left'
         }}>
           Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
         </p>