chore: fix linting errors and ts bugs.

2026-06-17 17:41:21 +02:00
parent 3e04a3c7e3
commit 51494e25a8
41 changed files with 285 additions and 251 deletions
--- a/src/spa/pages/About.tsx
+++ b/src/spa/pages/About.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { Link } from '@/spa/router';
 import { Star, ChevronRight } from 'lucide-react';
 import TestimonialsSection from '@/spa/components/TestimonialsSection';
-import { Button } from '@/spa/components/ui/button';
 import { WINNERS } from '@/spa/data/winners';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
@@ -23,7 +23,7 @@ const About: React.FC = () => {

      {/* ── 1. HERO ─────────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', minHeight: '72vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: '#060C14' }}>
-        <img
+        <Image unoptimized
          src="/images/saal-leer-atmosphaere.jpg"
          alt="BMP Gala"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
@@ -120,7 +120,7 @@ const About: React.FC = () => {

          {/* Right – full-bleed image (+ heading on mobile) */}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined, order: isMobile ? 1 : 0 }}>
-            <img
+            <Image unoptimized
              src="/images/preistraeger-gruppe.jpg"
              alt="BMP Gala Preisverleihung"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
@@ -154,7 +154,7 @@ const About: React.FC = () => {

          {/* Left – full-bleed image (+ heading on mobile) */}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined }}>
-            <img
+            <Image unoptimized
              src="/images/networking-innenhof.jpg"
              alt="Bayerischer Mittelstand"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
@@ -422,7 +422,7 @@ function HighlightCard({ winner }: { winner: import('@/spa/data/winners').Winner
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
-      <img
+      <Image unoptimized
        src={winner.img}
        alt={winner.name}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s ease', transform: hovered ? 'scale(1.07)' : 'scale(1)', filter: 'grayscale(15%)' }}
--- a/src/spa/pages/BlogDetail.tsx
+++ b/src/spa/pages/BlogDetail.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { useParams, Link } from '@/spa/router';
 import { ArrowLeft, Clock, User, Tag, ArrowRight } from 'lucide-react';
 import { motion } from 'framer-motion';
-import { getArticleBySlug, articles, type BlogArticle } from '@/spa/data/blog';
+import { getArticleBySlug, articles, type BlogArticle, type BlogSection } from '@/spa/data/blog';
 import { useCmsRoute } from '@/spa/cmsRoute';
 import { docImageUrl } from '@/spa/cmsMediaField';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const NAVY = '#111D55';
 const GOLD = '#EFBF04';
@@ -35,9 +36,17 @@ export default function BlogDetail() {
    readTime: String(cmsArticle.readTime || '1 min'),
    img: docImageUrl(cmsArticle, '/images/gala-saal-overview.jpg', 'heroImage'),
    excerpt: String(cmsArticle.excerpt || cmsArticle.meta?.description || 'Dieser Pressebeitrag wird aus Payload CMS geladen.'),
-    sections: Array.isArray(cmsArticle.sections) && cmsArticle.sections.length > 0 ? cmsArticle.sections as any : [{ body: String(cmsArticle.excerpt || cmsArticle.meta?.description || 'Dieser Pressebeitrag wird aus Payload CMS geladen.') }],
-    tags: Array.isArray(cmsArticle.tags) ? cmsArticle.tags.map((item: any) => item.tag).filter(Boolean) : ['Presse'],
-    relatedSlugs: Array.isArray(cmsArticle.relatedSlugs) ? cmsArticle.relatedSlugs.map((item: any) => item.slug).filter(Boolean) : [],
+    sections: Array.isArray(cmsArticle.sections) && cmsArticle.sections.length > 0 ? cmsArticle.sections as BlogSection[] : [{ body: String(cmsArticle.excerpt || cmsArticle.meta?.description || 'Dieser Pressebeitrag wird aus Payload CMS geladen.') }],
+    tags: Array.isArray(cmsArticle.tags)
+      ? cmsArticle.tags
+          .map((item: { tag?: string }) => item.tag)
+          .filter((tag): tag is string => Boolean(tag))
+      : ['Presse'],
+    relatedSlugs: Array.isArray(cmsArticle.relatedSlugs)
+      ? cmsArticle.relatedSlugs
+          .map((item: { slug?: string }) => item.slug)
+          .filter((slug): slug is string => Boolean(slug))
+      : [],
  } as BlogArticle : undefined);

  if (!article) {
@@ -60,7 +69,7 @@ export default function BlogDetail() {

      {/* ── HERO ──────────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', height: isMobile ? 'auto' : '70vh', minHeight: 520, overflow: 'hidden', display: 'flex', alignItems: 'flex-end' }}>
-        <img
+        <Image unoptimized
          src={article.img}
          alt={article.title}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }}
@@ -288,7 +297,7 @@ function RelatedCard({ article, bordered, isMobile }: { article: ReturnType<type
    >
      {/* Thumbnail */}
      <div style={{ height: 180, overflow: 'hidden', marginBottom: 24 }}>
-        <img
+        <Image unoptimized
          src={article.img}
          alt={article.title}
          style={{
--- a/src/spa/pages/Contact.tsx
+++ b/src/spa/pages/Contact.tsx
@@ -3,6 +3,7 @@ import { MapPin, Mail, Phone, Clock, ChevronDown } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import KontaktForm from '@/spa/components/forms/KontaktForm';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const NAVY  = '#111D55';
 const GOLD  = '#EFBF04';
@@ -43,7 +44,7 @@ const Contact: React.FC = () => {

      {/* ── Hero ───────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', height: '68vh', minHeight: 520, overflow: 'hidden', display: 'flex', alignItems: 'flex-end' }}>
-        <img
+        <Image unoptimized
          src="/images/gala-dinner.jpg"
          alt="BMP Gala"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }}
@@ -130,7 +131,7 @@ const Contact: React.FC = () => {

            {!isMobile && (
              <div style={{ height: 200, position: 'relative', overflow: 'hidden', flexShrink: 0, zIndex: 1 }}>
-                <img src="/images/preistraeger-gruppe.jpg" alt="BMP Gala 2025" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', filter: 'sepia(0.18) brightness(0.92)' }} />
+                <Image unoptimized src="/images/preistraeger-gruppe.jpg" alt="BMP Gala 2025" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', filter: 'sepia(0.18) brightness(0.92)' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(168,120,0,0.1) 0%, rgba(168,120,0,0.25) 50%, rgba(168,120,0,0.92) 88%, #A87800 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'rgba(17,29,85,0.35)' }} />
                <div style={{ position: 'absolute', bottom: 14, left: 40, display: 'flex', alignItems: 'center', gap: 8 }}>
--- a/src/spa/pages/Datenschutz.tsx
+++ b/src/spa/pages/Datenschutz.tsx
@@ -175,7 +175,7 @@ export default function Datenschutz() {
          </Section>

          <Section id="recaptcha" title="Spamschutz mit Google reCAPTCHA">
-            <p style={body}>Wir haben Google reCAPTCHA in Formularen auf unserer Webseite implementiert, um zu überprüfen, ob die in den Formularen eingegebenen Daten von menschlichen Besuchern stammen oder von Maschinen bzw. automatisierten Programmen („Bots").</p>
+            <p style={body}>Wir haben Google reCAPTCHA in Formularen auf unserer Webseite implementiert, um zu überprüfen, ob die in den Formularen eingegebenen Daten von menschlichen Besuchern stammen oder von Maschinen bzw. automatisierten Programmen („Bots“).</p>
            <p style={body}>Dieses Tool analysiert automatisch das Verhalten der Webseitenbesucher, sobald sie mit der Webseite interagieren, unter Verwendung verschiedener Informationen wie IP-Adresse, Aufenthaltsdauer und Mausbewegungen.</p>
            <p style={{ ...body, fontWeight: 600, color: NAVY, marginBottom: 8 }}>Verarbeitete Daten</p>
            <ul style={{ ...body, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 16 }}>
--- a/src/spa/pages/EventDetail.tsx
+++ b/src/spa/pages/EventDetail.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react'
 import { useParams, Link } from '@/spa/router'
 import { motion } from 'framer-motion'
-import { Calendar, MapPin, Clock, Bell, BellOff, ArrowLeft, ChevronRight, Users, Tag } from 'lucide-react'
-import { getEventBySlug, EventUpdate, UpdateType, type BmpEvent } from '@/spa/data/events'
+import { Calendar, MapPin, Clock, Bell, BellOff, ArrowLeft, ChevronRight } from 'lucide-react'
+import { getEventBySlug, EventUpdate, UpdateType, type BmpEvent, type EventEckdaten } from '@/spa/data/events'
 import { useCmsRoute } from '@/spa/cmsRoute'
 import { docImageUrl } from '@/spa/cmsMediaField'
 import { useIsMobile } from '@/spa/hooks/useIsMobile'
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const NAVY  = '#111D55'
 const GOLD  = '#EFBF04'
 const CREAM = '#EFE5E3'
-const INK   = '#3A3A3A'

 // ── Timestamp formatter ──────────────────────────────────────────────────────
 const MONATE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']
@@ -88,12 +88,12 @@ export default function EventDetail() {
    location: String(cmsEvent.location || 'Bayern'),
    venue: String(cmsEvent.venue || 'Ort folgt'),
    category: String(cmsEvent.category || 'Event'),
-    status: (cmsEvent.status as any) || 'geplant',
+    status: (cmsEvent.status as BmpEvent['status']) || 'geplant',
    img: docImageUrl(cmsEvent, '/images/buehne-moderatoren.jpg'),
    description: String(cmsEvent.description || cmsEvent.meta?.description || ''),
    longDescription: String(cmsEvent.longDescription || cmsEvent.description || cmsEvent.meta?.description || 'Dieses Event wird aus Payload CMS geladen.'),
-    eckdaten: Array.isArray(cmsEvent.eckdaten) ? cmsEvent.eckdaten as any : [],
-    updates: Array.isArray(cmsEvent.updates) ? cmsEvent.updates as any : [],
+    eckdaten: Array.isArray(cmsEvent.eckdaten) ? cmsEvent.eckdaten as EventEckdaten[] : [],
+    updates: Array.isArray(cmsEvent.updates) ? cmsEvent.updates as EventUpdate[] : [],
  } as BmpEvent : undefined)
  const [subscribed, setSubscribed] = useState(false)
  const isMobile = useIsMobile()
@@ -117,7 +117,7 @@ export default function EventDetail() {

      {/* ── Hero ─────────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', height: isMobile ? 'auto' : '65vh', minHeight: isMobile ? 520 : 480, overflow: 'hidden' }}>
-        <img
+        <Image unoptimized
          src={event.img}
          alt={event.title}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
--- a/src/spa/pages/Home.tsx
+++ b/src/spa/pages/Home.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button } from '@/spa/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/spa/components/ui/card';
-import { Badge } from '@/spa/components/ui/badge';
-import { Award, Users, TrendingUp, Play, ChevronRight, Building2, ShieldCheck, Leaf, HeartHandshake, X, Star } from 'lucide-react';
+import { Play, ChevronRight, X, Star } from 'lucide-react';
 import { Link } from '@/spa/router';
 import { PartnerTicker } from '@/spa/components/ui/partner-ticker';
 import { WINNERS } from '@/spa/data/winners';
@@ -10,6 +8,7 @@ import BewerbungsForm from '@/spa/components/forms/BewerbungsForm';
 import TestimonialsSection from '@/spa/components/TestimonialsSection';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const PARTNERS = [
  { id: 'rsm', label: <><span style={{fontWeight:700,fontSize:11,letterSpacing:2}}>RSM</span><br/><span style={{fontWeight:300,fontSize:8,letterSpacing:1,opacity:.7}}>Ebner Stolz</span></> },
@@ -103,7 +102,7 @@ function HomeWinnerCard({ winner }: { winner: import('@/spa/data/winners').Winne
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
-      <img src={winner.img} alt={winner.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.5s ease', transform: hovered ? 'scale(1.07)' : 'scale(1)', filter: 'grayscale(15%)' }} />
+      <Image unoptimized src={winner.img} alt={winner.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.5s ease', transform: hovered ? 'scale(1.07)' : 'scale(1)', filter: 'grayscale(15%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%, transparent 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.2)', opacity: hovered ? 1 : 0, transition: 'opacity 0.25s' }} />
      <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)' }} />
@@ -131,7 +130,7 @@ const Home: React.FC = () => {
      {/* Hero Section */}
      <section className="relative flex items-center overflow-hidden" style={{ background: '#111D55', height: isMobile ? '88svh' : '100vh' }}>
        <div className="absolute inset-0 z-0">
-          <img
+          <Image unoptimized
            src="/images/gala-saal-overview.jpg"
            alt="Awards Gala"
            className="w-full h-full object-cover scale-105"
@@ -259,7 +258,7 @@ const Home: React.FC = () => {

          {/* Right (desktop) / Top (mobile) – image; on mobile the heading is overlaid here */}
          <div style={{ position: 'relative', minHeight: isMobile ? 280 : 560, overflow: 'hidden', order: isMobile ? 1 : 0 }}>
-            <img
+            <Image unoptimized
              src="/images/buehne-gewinner.jpg"
              alt="Preisverleihung Bühne"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: isMobile ? 'center right' : 'center center' }}
@@ -289,7 +288,7 @@ const Home: React.FC = () => {
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%' }}>
          {/* Left – full-bleed image with stats overlay (+ heading on mobile) */}
          <div style={{ position: 'relative', minHeight: isMobile ? 300 : 600, overflow: 'hidden' }}>
-            <img
+            <Image unoptimized
              src="/images/preistraeger-jubel.jpg"
              alt="BMP Auszeichnung"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
@@ -343,7 +342,7 @@ const Home: React.FC = () => {
            )}
            <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28, display: isMobile ? 'none' : 'block' }} />
            <blockquote style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 18, fontStyle: 'italic', color: '#101828', lineHeight: 1.7, borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
-              "Ein Unternehmen zu gründen erfordert nicht allein spezielle Fähigkeiten. Es erfordert Persönlichkeit!"
+              „Ein Unternehmen zu gründen erfordert nicht allein spezielle Fähigkeiten. Es erfordert Persönlichkeit!“
            </blockquote>
            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: '0 0 36px' }}>
              Wir suchen Vorbilder, die sich trotz aller Risiken nicht scheuen, Visionen in Businesspläne und Ideen in Unternehmungen zu verwandeln, und das mit großem persönlichen Einsatz und Verantwortung für Ihre Mitarbeiter. Seit vielen Jahren würdigen wir herausragende unternehmerische Leistungen im Freistaat.
@@ -444,7 +443,7 @@ const Home: React.FC = () => {

          {/* Right – full-bleed photo (+ heading on mobile) */}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : 'auto', order: isMobile ? 1 : 0 }}>
-            <img
+            <Image unoptimized
              src="/images/networking-innenhof.jpg"
              alt="BMP Gala Netzwerk"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center', display: 'block' }}
@@ -531,7 +530,7 @@ const Home: React.FC = () => {
            {/* Award ceremony photo */}
            {!isMobile && (
              <div style={{ height: 220, position: 'relative', overflow: 'hidden', flexShrink: 0, zIndex: 1 }}>
-                <img
+                <Image unoptimized
                  src="/images/preisuebergabe.jpg"
                  alt="Preisverleihung Bayerischer Mittelstandspreis"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', filter: 'sepia(0.18) brightness(0.92)' }}
--- a/src/spa/pages/MitgliedWerden.tsx
+++ b/src/spa/pages/MitgliedWerden.tsx
@@ -4,6 +4,7 @@ import { ChevronRight, ArrowLeft, Users, Star, Eye, Heart } from 'lucide-react';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
 import MembershipWizard from '@/spa/components/membership/MembershipWizard';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const NAVY = '#111D55';
 const GOLD = '#EFBF04';
@@ -597,7 +598,7 @@ function QuoteCard({
          flex: 1,
        }}
      >
-        "{quote}"
+        „{quote}“
      </p>
      <div style={{ width: 32, height: 1, background: GOLD, marginBottom: 20 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
@@ -708,7 +709,7 @@ const MitgliedWerden: React.FC = () => {
        }}
      >
        {/* Background image */}
-        <img
+        <Image unoptimized
          src="/images/mitglied-hero.jpg"
          alt=""
          aria-hidden="true"
@@ -1313,7 +1314,7 @@ const MitgliedWerden: React.FC = () => {
          <div style={{ display: 'flex', flexDirection: 'column', background: 'rgba(0,0,0,0.18)', overflowY: isMobile ? 'visible' : 'auto', minHeight: 0 }}>
            {!isMobile && (
              <div style={{ height: 180, position: 'relative', overflow: 'hidden', flexShrink: 0 }}>
-                <img src="/images/gewinner-gruppenfoto.jpg" alt="BMP Mitglieder" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
+                <Image unoptimized src="/images/gewinner-gruppenfoto.jpg" alt="BMP Mitglieder" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(17,29,85,0.5) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.45) 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 3, background: GOLD }} />
                <div style={{ position: 'absolute', bottom: 16, left: 40, display: 'flex', alignItems: 'center', gap: 8 }}>
--- a/src/spa/pages/Netzwerk.tsx
+++ b/src/spa/pages/Netzwerk.tsx
@@ -4,6 +4,7 @@ import { ChevronRight, X, ArrowRight, Globe, Linkedin, Building2, MapPin, Extern
 import SponsoringForm from '@/spa/components/forms/SponsoringForm';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
@@ -41,7 +42,7 @@ function PersonCard({ imgSrc, imgAlt, name, titleLine1, titleLine2, institution,
      onMouseLeave={() => setHovered(false)}
    >
      <div style={{ position: 'relative', height: isMobileCard ? 250 : 320, overflow: 'hidden', width: '100%' }}>
-        <img
+        <Image unoptimized
          src={imgSrc}
          alt={imgAlt}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: hovered ? 'grayscale(0%)' : 'grayscale(100%)', transition: 'filter 0.55s ease, transform 0.55s ease', transform: hovered ? 'scale(1.04)' : 'scale(1)' }}
@@ -78,7 +79,7 @@ const JuryCard: React.FC<{ member: JuryMember; idx: number }> = ({ member, idx }
      style={{ borderLeft: !isMobileCard && idx > 0 ? '1px solid rgba(255,255,255,0.07)' : 'none', display: 'flex', flexDirection: 'column', cursor: 'default', background: hovered ? 'rgba(255,255,255,0.03)' : 'transparent', transition: 'background 0.2s', ...(isMobileCard ? { minWidth: '74vw', maxWidth: '74vw', flexShrink: 0, scrollSnapAlign: 'start', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, overflow: 'hidden' } : {}) }}
    >
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '3/4' }}>
-        <img src={member.img} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
+        <Image unoptimized src={member.img} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%', background: 'linear-gradient(to top, rgba(3,9,58,0.65), transparent)' }} />
      </div>
      <div style={{ padding: isMobileCard ? '28px 28px 32px' : '32px 32px 36px' }}>
@@ -111,7 +112,7 @@ const JuryChairCard: React.FC<{ member: JuryMember }> = ({ member }) => {
      }}
    >
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: isMobileCard ? '16/10' : '3/4', minHeight: isMobileCard ? 240 : 'auto' }}>
-        <img src={member.img} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
+        <Image unoptimized src={member.img} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '45%', background: 'linear-gradient(to top, rgba(3,9,58,0.7), transparent)' }} />
      </div>
      <div style={{ padding: isMobileCard ? '32px 28px 36px' : '56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
@@ -144,30 +145,6 @@ interface Partner {
  linkedin?: string;
 }

-const PartnerCell: React.FC<{ partner: Partner; idx: number; total: number; onClick: () => void }> = ({ partner, idx, total, onClick }) => {
-  const [hovered, setHovered] = useState(false);
-  const isMobileCell = useIsMobile();
-  const borderLeft = isMobileCell ? 'none' : (idx % 4 === 0 ? 'none' : '1px solid rgba(3,9,58,0.08)');
-  const showBottom = isMobileCell ? idx < total - 1 : idx < 8;
-  return (
-    <div
-      onClick={onClick}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{ padding: isMobileCell ? '24px 20px' : '36px 32px', borderLeft, borderBottom: showBottom ? '1px solid rgba(3,9,58,0.08)' : 'none', display: 'flex', flexDirection: 'column', gap: 16, cursor: 'pointer', background: hovered ? '#E8E5E4' : 'transparent', transition: 'background 0.15s' }}
-    >
-      <div style={{ height: 48, display: 'flex', alignItems: 'center' }}>{partner.logo}</div>
-      <div style={{ width: hovered ? 48 : 20, height: 1, background: GOLD, transition: 'width 0.3s ease' }} />
-      <div style={{ fontFamily: FF, fontSize: 18, fontWeight: 700, color: '#101828' }}>{partner.name}</div>
-      <div style={{ fontFamily: FF, fontSize: 11, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.2em', fontWeight: 700 }}>{partner.role}</div>
-      <div style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.45)', lineHeight: 1.6, flexGrow: 1 }}>{partner.desc}</div>
-      <div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: GOLD, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
-        Details <ArrowRight size={10} />
-      </div>
-    </div>
-  );
-};
-
 // ── SponsorCell (tiered) ──────────────────────────────────────────────────────

 const SponsorCell: React.FC<{ partner: Partner; variant: 'lg' | 'md' | 'sm'; idx: number; cols: number; onClick: () => void }> = ({ partner, variant, idx, cols, onClick }) => {
@@ -242,7 +219,7 @@ function PartnerModal({ partner, onClose }: { partner: Partner; onClose: () => v
        <div style={{ position: 'relative', height: 220, flexShrink: 0, overflow: 'hidden' }}>
          {/* Background */}
          {partner.heroImg
-            ? <img src={partner.heroImg} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
+            ? <Image unoptimized src={partner.heroImg} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            : <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${accentColor}33 0%, ${NAVY} 70%)` }} />
          }
          {/* Gradient to white */}
@@ -527,7 +504,7 @@ const Netzwerk: React.FC = () => {

      {/* ── 1. HERO ──────────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', minHeight: '72vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: '#060C14' }}>
-        <img src="/images/netzwerk-hero.jpg" alt="BMP Netzwerk Preisverleihung" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
+        <Image unoptimized src="/images/netzwerk-hero.jpg" alt="BMP Netzwerk Preisverleihung" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
        <div style={{ position: 'absolute', inset: 0, background: isMobile ? 'linear-gradient(to top, rgba(2,9,48,0.95) 0%, rgba(2,9,48,0.72) 38%, rgba(2,9,48,0.22) 72%, transparent 100%)' : 'linear-gradient(to right, #020930 0%, rgba(2,9,48,0.90) 38%, rgba(2,9,48,0.18) 65%, transparent 100%)' }} />
        <div style={{ position: 'absolute', top: 0, left: 80, width: 2, height: '100%', background: `linear-gradient(to bottom, transparent, ${GOLD}, transparent)`, opacity: 0.4 }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, #EFBF04, rgba(239,191,4,0.3), transparent)', zIndex: 2 }} />
@@ -588,7 +565,7 @@ const Netzwerk: React.FC = () => {
            </div>
            <div>
              <blockquote style={{ fontFamily: FF, fontSize: 18, fontStyle: 'italic', color: 'rgba(255,255,255,0.8)', lineHeight: 1.75, margin: 0, paddingLeft: 24, borderLeft: `3px solid ${GOLD}` }}>
-                "Der Bayerische Mittelstandspreis steht für das, was Bayern stark macht: Unternehmergeist, Verantwortung und Qualität. Mit großer Freude übernehme ich erneut die Schirmherrschaft für diesen bedeutenden Preis."
+                „Der Bayerische Mittelstandspreis steht für das, was Bayern stark macht: Unternehmergeist, Verantwortung und Qualität. Mit großer Freude übernehme ich erneut die Schirmherrschaft für diesen bedeutenden Preis.“
              </blockquote>
              <div style={{ fontFamily: FF, fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 20, paddingLeft: 24 }}>
                – Ilse Aigner MdL, Präsidentin des Bayerischen Landtags
@@ -813,7 +790,7 @@ const Netzwerk: React.FC = () => {

            {!isMobile && (
              <div style={{ height: 220, position: 'relative', overflow: 'hidden', flexShrink: 0, zIndex: 1 }}>
-                <img src="/images/networking-innenhof.jpg" alt="BMP Partnernetzwerk" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', filter: 'sepia(0.18) brightness(0.92)' }} />
+                <Image unoptimized src="/images/networking-innenhof.jpg" alt="BMP Partnernetzwerk" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', filter: 'sepia(0.18) brightness(0.92)' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(168,120,0,0.1) 0%, rgba(168,120,0,0.25) 50%, rgba(168,120,0,0.92) 88%, #A87800 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'rgba(17,29,85,0.35)' }} />
                <div style={{ position: 'absolute', bottom: 14, left: 40, display: 'flex', alignItems: 'center', gap: 8 }}>
--- a/src/spa/pages/Participation.tsx
+++ b/src/spa/pages/Participation.tsx
@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
-import { MapPin, Users, TrendingUp, Building2, ArrowRight, CheckCircle2, UserCheck, Send, Star } from 'lucide-react';
+import { MapPin, Users, TrendingUp, Building2, ArrowRight, CheckCircle2, UserCheck, Send, Star, type LucideIcon } from 'lucide-react';
 import { Link } from '@/spa/router';
 import BewerbungsForm from '@/spa/components/forms/BewerbungsForm';
 import WegZurAuszeichnungSection from '@/spa/components/WegZurAuszeichnungSection';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
@@ -21,7 +22,7 @@ const Participation: React.FC = () => {

      {/* ── HERO ─────────────────────────────────────────────────────────────── */}
      <section style={{ position: 'relative', minHeight: '65vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: NAVY }}>
-        <img
+        <Image unoptimized
          src="/images/preisuebergabe.jpg"
          alt="Teilnahme BMP"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
@@ -146,7 +147,7 @@ const Participation: React.FC = () => {

          {/* Left – full-bleed image with gradient blend into navy on the right (+ heading on mobile) */}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined }}>
-            <img
+            <Image unoptimized
              src="/images/buehne-gewinner.jpg"
              alt="Jury-Bewertung BMP"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
@@ -313,7 +314,7 @@ const Participation: React.FC = () => {

            {!isMobile && (
              <div style={{ height: 220, position: 'relative', overflow: 'hidden', flexShrink: 0, zIndex: 1 }}>
-                <img src="/images/preistraeger-jubel.jpg" alt="Preisverleihung 2025" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', filter: 'sepia(0.18) brightness(0.92)' }} />
+                <Image unoptimized src="/images/preistraeger-jubel.jpg" alt="Preisverleihung 2025" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', filter: 'sepia(0.18) brightness(0.92)' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(168,120,0,0.1) 0%, rgba(168,120,0,0.25) 50%, rgba(168,120,0,0.92) 88%, #A87800 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'rgba(17,29,85,0.35)' }} />
                <div style={{ position: 'absolute', bottom: 16, left: 40, display: 'flex', alignItems: 'center', gap: 8 }}>
@@ -444,7 +445,7 @@ function BewerbungswegeSection() {
          { weg: 'Weg 01', title: 'Vorschlag unterbreiten', desc: 'Durch ehemalige Preisträger, die HAM, Senatoren und den Preis unterstützende Institutionen.', Icon: Send, checkItems: INSTITUTIONEN, cta: 'Vorschlag unterbreiten', featured: false },
          { weg: 'Weg 02', title: 'Initiativbewerbung', desc: 'Für Unternehmer, die selbst die Initiative ergreifen.', Icon: UserCheck, kvItems: [ { k: '0 EUR', v: 'Teilnahmegebühr' }, { k: 'Eigeninitiative', v: 'Direkt ohne Intermediär' }, { k: 'Für Unternehmer', v: 'Inhabergeführte KMU in Bayern' }, { k: 'Deadline', v: '30. Juni 2026' } ], cta: 'Jetzt bewerben', featured: true },
          { weg: 'Weg 03 · Sonderpreis', title: 'Bavarian Future Award', desc: 'Sonderpreis, initiiert durch die Studierenden der HAM, Hochschule für angewandtes Management.', Icon: Star, kvItems: [ { k: 'Vorschlag möglich', v: 'Durch HAM & Partner' }, { k: 'Selbstbewerbung', v: 'Direkte Einreichung' }, { k: 'Initiiert von', v: 'Studierenden der HAM' }, { k: 'Kategorie', v: 'Zukunft & Innovation' } ], cta: 'Zum Formular', featured: false },
-        ] as { weg: string; title: string; desc: string; Icon: any; checkItems?: string[]; kvItems?: { k: string; v: string }[]; cta: string; featured: boolean }[]).map((w) => {
+        ] as { weg: string; title: string; desc: string; Icon: LucideIcon; checkItems?: string[]; kvItems?: { k: string; v: string }[]; cta: string; featured: boolean }[]).map((w) => {
          const Icon = w.Icon;
          return (
            <div key={w.weg} style={{ flexShrink: 0, minWidth: '85vw', maxWidth: '85vw', scrollSnapAlign: 'center', display: 'flex', flexDirection: 'column', background: '#fff', borderRadius: 18, overflow: 'hidden', border: w.featured ? `1.5px solid ${GOLD}` : '1px solid rgba(17,29,85,0.10)', boxShadow: w.featured ? '0 14px 34px rgba(239,191,4,0.20), 0 6px 16px rgba(3,9,58,0.10)' : '0 10px 28px rgba(3,9,58,0.08)' }}>
--- a/src/spa/pages/Preistraeger.tsx
+++ b/src/spa/pages/Preistraeger.tsx
@@ -5,6 +5,7 @@ import { WINNERS, CATEGORIES, YEARS } from '@/spa/data/winners';
 import { useCmsCollection } from '@/spa/cmsRoute';
 import { docImageUrl } from '@/spa/cmsMediaField';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const FF = '"IBM Plex Sans", sans-serif';
 const NAVY = '#111D55';
@@ -62,7 +63,7 @@ export default function Preistraeger() {
    <div style={{ background: '#fff', minHeight: '100vh' }}>
      {/* Hero */}
      <div style={{ width: '100%', height: '50vh', overflow: 'hidden', position: 'relative' }}>
-        <img
+        <Image unoptimized
          src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&q=80&w=2000"
          alt="Preisverleihung"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
@@ -250,7 +251,7 @@ function WinnerCard({ winner }: { winner: import('@/spa/data/winners').Winner })
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
-      <img
+      <Image unoptimized
        src={winner.img}
        alt={winner.name}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.5s ease', transform: hovered ? 'scale(1.06)' : 'scale(1)' }}
--- a/src/spa/pages/PreistraegerDetail.tsx
+++ b/src/spa/pages/PreistraegerDetail.tsx
@@ -5,6 +5,7 @@ import { WINNERS } from '@/spa/data/winners';
 import { useCmsRoute } from '@/spa/cmsRoute';
 import { docImageUrl } from '@/spa/cmsMediaField';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
@@ -40,14 +41,11 @@ export default function PreistraegerDetail() {

  if (!winner) return <Navigate to="/preistraeger" replace />;

-  // Pick a second photo (offset from primary)
-  const secondImg = winner.img.replace('w=800', 'w=900').replace('q=80', 'q=75');
-
  return (
    <div style={{ background: '#fff', minHeight: '100vh' }}>
      {/* Hero */}
      <div style={{ width: '100%', height: '60vh', overflow: 'hidden', position: 'relative' }}>
-        <img
+        <Image unoptimized
          src={winner.img}
          alt={winner.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
@@ -110,9 +108,9 @@ export default function PreistraegerDetail() {
          {/* Quote */}
          <div style={{ borderLeft: `4px solid ${GOLD}`, paddingLeft: 24, marginBottom: 40 }}>
            <p style={{ fontFamily: FB, fontStyle: 'italic', fontSize: 18, color: '#101828', lineHeight: 1.7, marginBottom: 12 }}>
-              <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginRight: 4, fontFamily: '"IBM Plex Sans"' }}>"</span>
+              <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginRight: 4, fontFamily: '"IBM Plex Sans"' }}>&ldquo;</span>
              {winner.quote}
-              <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginLeft: 2, fontFamily: '"IBM Plex Sans"' }}>"</span>
+              <span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginLeft: 2, fontFamily: '"IBM Plex Sans"' }}>&rdquo;</span>
            </p>
            <p style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: GRAY, margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              – {winner.quotePerson}, {winner.quoteRole}
@@ -124,7 +122,7 @@ export default function PreistraegerDetail() {
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {/* Photo */}
          <div style={{ borderRadius: 0, overflow: 'hidden', aspectRatio: '4/3' }}>
-            <img src="/gala-preistraeger.jpg" alt="Gala Preisverleihung" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'brightness(0.95)' }} />
+            <Image unoptimized src="/gala-preistraeger.jpg" alt="Gala Preisverleihung" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'brightness(0.95)' }} />
          </div>

          {/* Kenndaten */}
--- a/src/spa/pages/Press.tsx
+++ b/src/spa/pages/Press.tsx
@@ -5,6 +5,7 @@ import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
 import { useCmsCollection } from '@/spa/cmsRoute';
 import { docImageUrl } from '@/spa/cmsMediaField';
+import Image from '@/spa/components/ui/UnoptimizedImage'

 const NAVY = '#111D55';
 const GOLD = '#EFBF04';
@@ -90,7 +91,7 @@ function NewsCard({ item, idx, isMobile }: { item: typeof news[0]; idx: number;
    >
      {/* image */}
      <div style={{ position: 'relative', overflow: 'hidden', height: 220 }}>
-        <img
+        <Image unoptimized
          src={item.img}
          alt={item.title}
          style={{
@@ -183,6 +184,37 @@ function NewsCard({ item, idx, isMobile }: { item: typeof news[0]; idx: number;
  );
 }

+function DarkInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  const [f, setF] = React.useState(false);
+  return (
+    <input
+      {...props}
+      onFocus={(e) => {
+        setF(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setF(false);
+        props.onBlur?.(e);
+      }}
+      style={{
+        width: '100%',
+        height: 44,
+        padding: '0 14px',
+        fontFamily: FF,
+        fontSize: 18,
+        color: '#fff',
+        border: `1px solid ${f ? 'rgba(239,191,4,0.8)' : 'rgba(255,255,255,0.12)'}`,
+        background: f ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.05)',
+        outline: 'none',
+        boxSizing: 'border-box',
+        transition: 'border-color 0.15s, background 0.15s',
+        ...props.style,
+      }}
+    />
+  );
+}
+
 const Press: React.FC = () => {
  const isMobile = useIsMobile();
  const cmsEvents = useCmsCollection('events');
@@ -236,38 +268,6 @@ const Press: React.FC = () => {
    }
  };

-  // DarkInput defined inline as required
-  function DarkInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
-    const [f, setF] = React.useState(false);
-    return (
-      <input
-        {...props}
-        onFocus={(e) => {
-          setF(true);
-          props.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setF(false);
-          props.onBlur?.(e);
-        }}
-        style={{
-          width: '100%',
-          height: 44,
-          padding: '0 14px',
-          fontFamily: FF,
-          fontSize: 18,
-          color: '#fff',
-          border: `1px solid ${f ? 'rgba(239,191,4,0.8)' : 'rgba(255,255,255,0.12)'}`,
-          background: f ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.05)',
-          outline: 'none',
-          boxSizing: 'border-box',
-          transition: 'border-color 0.15s, background 0.15s',
-          ...props.style,
-        }}
-      />
-    );
-  }
-
  return (
    <div className="animate-fade-in">

@@ -282,7 +282,7 @@ const Press: React.FC = () => {
          background: NAVY,
        }}
      >
-        <img
+        <Image unoptimized
          src="/images/gala-dinner.jpg"
          alt="Presse BMP"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
@@ -428,7 +428,7 @@ const Press: React.FC = () => {
          >
            {/* Left – image cell */}
            <div style={{ position: 'relative', overflow: 'hidden', height: isMobile ? 200 : 240 }}>
-              <img src={event.img} alt={event.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+              <Image unoptimized src={event.img} alt={event.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: 20, left: 20, padding: '5px 12px', fontFamily: FF, fontSize: 9, fontWeight: 700, textTransform: 'uppercase' as const, letterSpacing: '0.18em', background: event.status === 'Anmeldung offen' ? GOLD : 'rgba(3,9,58,0.85)', color: event.status === 'Anmeldung offen' ? NAVY : 'rgba(255,255,255,0.6)' }}>
                {event.status}
              </div>