fix(qa): resolve html validation errors and clean up unused dependencies

components/AboutContent.tsx

@@ -102,14 +102,15 @@ export default function About() {
                 <Reveal key={i} delay={i * 0.1}>
                   <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
                     <div className="flex justify-between items-start mb-4 relative z-10">
-                      <h3 className="text-xl font-bold text-primary">
+                      <h2 className="text-xl font-bold text-primary">
                         {person.name}
-                      </h3>
+                      </h2>
                       <a
                         href={person.linkedin}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="text-[#0077b5] hover:scale-110 transition-transform"
+                        aria-label={`LinkedIn Profile of ${person.name}`}
                       >
                         <Linkedin size={20} />
                       </a>
@@ -154,9 +155,9 @@ export default function About() {
                       <div className="text-accent mb-6">
                         <Icon size={32} />
                       </div>
-                      <h4 className="text-xl font-bold text-white mb-4">
+                      <h3 className="text-xl font-bold text-white mb-4">
                         {i + 1}. {item.title}
-                      </h4>
+                      </h3>
                       <p className="text-slate-400 leading-relaxed">
                         {item.desc}
                       </p>

components/ContactContent.tsx

@@ -125,9 +125,9 @@ export default function Contact() {
                     <Mail size={24} />
                   </div>
                   <div className="relative z-10">
-                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">
+                    <h2 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">
                       {t("info.email")}
-                    </h4>
+                    </h2>
                     <a
                       href="mailto:info@mb-grid-solutions.com"
                       className="text-white text-lg md:text-xl font-bold hover:text-accent transition-colors break-all"
@@ -144,9 +144,9 @@ export default function Contact() {
                     <MapPin size={24} />
                   </div>
                   <div className="relative z-10">
-                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">
+                    <h2 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">
                       {t("info.address")}
-                    </h4>
+                    </h2>
                     <p className="text-white text-lg md:text-xl font-bold leading-relaxed">
                       {t("info.company")}
                       <br />
@@ -168,6 +168,7 @@ export default function Contact() {
                     scrolling="no"
                     marginHeight={0}
                     marginWidth={0}
+                    title="Location Map"
                     src="https://www.openstreetmap.org/export/embed.html?bbox=9.445,48.815,9.465,48.825&layer=mapnik&marker=48.8198,9.4552"
                   ></iframe>
                 </div>

components/Layout.tsx

@@ -203,9 +203,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
               </div>
 
               <div>
-                <h4 className="text-white font-bold mb-6">
+                <h2 className="text-white font-bold mb-6 text-base">
                   {t("footer.navigation")}
-                </h4>
+                </h2>
                 <nav className="flex flex-col gap-4">
                   {navLinks.map((link) => (
                     <Link
@@ -226,9 +226,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
               </div>
 
               <div>
-                <h4 className="text-white font-bold mb-6">
+                <h2 className="text-white font-bold mb-6 text-base">
                   {t("footer.legal")}
-                </h4>
+                </h2>
                 <nav className="flex flex-col gap-4">
                   <Link
                     href="/impressum"

components/sections/TechnicalSpecsSection.tsx

@@ -59,9 +59,9 @@ export const TechnicalSpecsSection = () => {
             <Reveal key={i} delay={i * 0.1}>
               <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group overflow-hidden">
                 <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
-                <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
+                <h3 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
                   {item.label}
-                </h4>
+                </h3>
                 <p className="text-2xl font-bold text-white mb-4 leading-tight">
                   {item.value}
                 </p>