update

src/components/Layout.tsx

@@ -10,10 +10,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     const handleScroll = () => {
       setShowScrollTop(window.scrollY > 400);
     };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    
+    const throttledScroll = () => {
+      window.requestAnimationFrame(handleScroll);
+    };
+    
+    window.addEventListener('scroll', throttledScroll, { passive: true });
+    return () => window.removeEventListener('scroll', throttledScroll);
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
@@ -22,10 +31,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     <div className="layout">
       <header>
         <div className="container">
-          <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
-            <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} />
+          <Link
+            to="/"
+            style={{ display: 'flex', alignItems: 'center' }}
+            aria-label="MB Grid Solutions - Zur Startseite"
+          >
+            <img
+              src="/assets/logo.png"
+              alt="MB Grid Solutions"
+              style={{ height: '80px' }}
+              loading="eager"
+            />
           </Link>
-          <nav style={{ display: 'flex', gap: '2rem' }}>
+          <nav style={{ display: 'flex', gap: '2rem' }} aria-label="Hauptnavigation">
             <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
               Startseite
             </NavLink>
@@ -43,58 +61,108 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         {children}
       </main>
 
-      {showScrollTop && (
-        <button 
-          onClick={scrollToTop}
-          className="scroll-top-btn"
-          aria-label="Scroll to top"
-        >
-          <ArrowUp size={24} />
-        </button>
-      )}
+      <button
+        onClick={scrollToTop}
+        className={`scroll-top-btn ${showScrollTop ? 'visible' : ''}`}
+        aria-label="Nach oben scrollen"
+        aria-hidden={!showScrollTop}
+        tabIndex={showScrollTop ? 0 : -1}
+      >
+        <ArrowUp size={24} strokeWidth={2.5} />
+      </button>
 
-      <nav className="mobile-nav">
-        <NavLink to="/" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
-          <Home size={20} />
+      <nav className="mobile-nav" aria-label="Mobile Navigation">
+        <NavLink
+          to="/"
+          className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
+          aria-label="Startseite"
+        >
+          <Home size={22} strokeWidth={2} />
           <span>Start</span>
         </NavLink>
-        <NavLink to="/ueber-uns" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
-          <Info size={20} />
+        <NavLink
+          to="/ueber-uns"
+          className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
+          aria-label="Über uns"
+        >
+          <Info size={22} strokeWidth={2} />
           <span>Über uns</span>
         </NavLink>
-        <NavLink to="/kontakt" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
-          <Mail size={20} />
+        <NavLink
+          to="/kontakt"
+          className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}
+          aria-label="Kontakt"
+        >
+          <Mail size={22} strokeWidth={2} />
           <span>Kontakt</span>
         </NavLink>
       </nav>
 
-      <footer style={{ borderTop: '1px solid var(--secondary-bg)', padding: '4rem 0', marginTop: '4rem', background: 'white' }}>
+      <footer style={{
+        borderTop: '1px solid var(--secondary-bg)',
+        padding: 'clamp(2rem, 4vw, 4rem) 0',
+        marginTop: 'clamp(2rem, 4vw, 4rem)',
+        background: 'white'
+      }}>
         <div className="container">
-          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', marginBottom: '3rem' }}>
+          <div className="grid" style={{
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+            marginBottom: 'clamp(1.5rem, 3vw, 3rem)'
+          }}>
             <div>
-              <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '80px', marginBottom: '1.5rem', filter: 'grayscale(1)' }} />
-              <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
+              <img
+                src="/assets/logo.png"
+                alt="MB Grid Solutions"
+                style={{
+                  height: 'clamp(60px, 10vw, 80px)',
+                  marginBottom: 'var(--spacing-lg)',
+                  filter: 'grayscale(1)'
+                }}
+                loading="lazy"
+              />
+              <p style={{
+                color: 'var(--text-secondary)',
+                fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
+                lineHeight: 1.6
+              }}>
                 Ihr Partner für Energiekabelprojekte bis 110 kV.
               </p>
             </div>
             <div>
-              <h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Navigation</h4>
-              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                <Link to="/">Startseite</Link>
-                <Link to="/ueber-uns">Über uns</Link>
-                <Link to="/kontakt">Kontakt</Link>
+              <h4 style={{
+                fontSize: 'clamp(0.9rem, 2vw, 1rem)',
+                marginBottom: 'var(--spacing-md)',
+                fontWeight: 600
+              }}>Navigation</h4>
+              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.625rem' }} aria-label="Footer Navigation">
+                <Link to="/" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Startseite</Link>
+                <Link to="/ueber-uns" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Über uns</Link>
+                <Link to="/kontakt" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Kontakt</Link>
               </nav>
             </div>
             <div>
-              <h4 style={{ fontSize: '1rem', marginBottom: '1rem' }}>Rechtliches</h4>
-              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                <Link to="/impressum">Impressum</Link>
-                <Link to="/datenschutz">Datenschutz</Link>
-                <Link to="/agb">AGB</Link>
+              <h4 style={{
+                fontSize: 'clamp(0.9rem, 2vw, 1rem)',
+                marginBottom: 'var(--spacing-md)',
+                fontWeight: 600
+              }}>Rechtliches</h4>
+              <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.625rem' }} aria-label="Legal Navigation">
+                <Link to="/impressum" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Impressum</Link>
+                <Link to="/datenschutz" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>Datenschutz</Link>
+                <Link to="/agb" style={{ fontSize: 'clamp(0.875rem, 2vw, 0.95rem)' }}>AGB</Link>
               </nav>
             </div>
           </div>
-          <div style={{ borderTop: '1px solid var(--secondary-bg)', paddingTop: '2rem', display: 'flex', justifyContent: 'space-between', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+          <div style={{
+            borderTop: '1px solid var(--secondary-bg)',
+            paddingTop: 'var(--spacing-xl)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            color: 'var(--text-secondary)',
+            fontSize: 'clamp(0.75rem, 2vw, 0.85rem)',
+            gap: 'var(--spacing-md)',
+            flexWrap: 'wrap'
+          }}>
             <div>&copy; {new Date().getFullYear()} MB Grid Solutions GmbH. Alle Rechte vorbehalten.</div>
             <div>Made with precision.</div>
           </div>