Mobile redesign refinements + Ivan feedback round
Mobile: new top-bar + fullscreen nav, premium swipe cards (Wege, sponsors, winners, jury, Schirmherrschaft), heading-on-image hero modules, bottom hero gradients for readability, slim dates bar, merged jury-intro module. Feedback (Ivan briefing): 50–1.500 Mitarbeiter, criteria percentages removed, "Die besten Unternehmen in Bayern", 5th criterion + Verbund note, sponsor tiers (Hauptsponsoren/Medienpartner/Weitere), jury 11 + multi-stage, "0 EUR Teilnahmegebühr", EWIF as organizer, Jahresabschlüsse optional, duplicate content removed, contrast/font fixes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sebastian Pachon
@@ -24,7 +24,54 @@ export default function TestimonialsSection() {
|
||||
return (
|
||||
<section style={{ background: '#fff', overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
|
||||
<MunichSkylineBg />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '42% 58%', height: isMobile ? 'auto' : 560, position: 'relative', zIndex: 1 }}>
|
||||
{/* ── MOBILE: headed section + premium testimonial card ── */}
|
||||
{isMobile && (
|
||||
<div style={{ padding: '48px 24px 52px', position: 'relative', zIndex: 1 }}>
|
||||
{/* Section header */}
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>Stimmen der Preisträger</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 8vw, 2.3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 16px' }}>
|
||||
DAS SAGEN UNSERE<br />PREISTRÄGER.
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
|
||||
|
||||
{/* Card */}
|
||||
<div style={{ background: '#fff', borderRadius: 20, border: '1px solid rgba(17,29,85,0.10)', boxShadow: '0 16px 38px rgba(3,9,58,0.10)', overflow: 'hidden' }}>
|
||||
{/* Photo banner */}
|
||||
<div style={{ position: 'relative', height: 240, overflow: 'hidden' }}>
|
||||
<img key={t.img} src={t.img} alt={t.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(3,9,58,0.28) 0%, transparent 45%)' }} />
|
||||
<span style={{ position: 'absolute', top: 14, left: 14, fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#101828', background: '#EFBF04', padding: '5px 10px', borderRadius: 100 }}>Preisträger {t.year}</span>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div style={{ padding: '22px 22px 24px' }}>
|
||||
<span aria-hidden style={{ fontFamily: 'Georgia, serif', fontSize: 52, lineHeight: 0.4, color: '#EFBF04', display: 'block', height: 26, marginBottom: 6 }}>“</span>
|
||||
<p style={{ fontFamily: FF, fontSize: '1.2rem', fontWeight: 300, color: '#101828', lineHeight: 1.5, margin: '0 0 22px' }}>{t.quote}</p>
|
||||
<div style={{ width: 36, height: 2, background: '#EFBF04', marginBottom: 16 }} />
|
||||
<div style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#101828', marginBottom: 4 }}>{t.name}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 14, color: 'rgba(16,24,40,0.5)' }}>{t.role} · {t.company}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 24 }}>
|
||||
<button onClick={prev} aria-label="Vorheriges" style={{ width: 46, height: 46, borderRadius: 12, border: '1.5px solid #D0D5DD', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<ChevronRight size={16} style={{ transform: 'rotate(180deg)' }} />
|
||||
</button>
|
||||
<button onClick={next} aria-label="Nächstes" style={{ width: 46, height: 46, borderRadius: 12, border: '1.5px solid #111D55', background: '#111D55', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0 }}>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
<div style={{ display: 'flex', gap: 6, marginLeft: 6 }}>
|
||||
{TESTIMONIALS.map((_, i) => (
|
||||
<button key={i} onClick={() => setActive(i)} aria-label={`Stimme ${i + 1}`} style={{ width: i === active ? 22 : 7, height: 7, borderRadius: 100, background: i === active ? '#EFBF04' : '#D0D5DD', border: 'none', cursor: 'pointer', padding: 0, transition: 'all 0.2s' }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── DESKTOP ── */}
|
||||
{!isMobile && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '42% 58%', height: 560, position: 'relative', zIndex: 1 }}>
|
||||
{/* Left — portrait photo */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', height: isMobile ? 280 : 'auto' }}>
|
||||
<img
|
||||
@@ -38,7 +85,11 @@ export default function TestimonialsSection() {
|
||||
|
||||
{/* Right — quote */}
|
||||
<div style={{ padding: isMobile ? '40px 22px 56px' : '80px 72px 80px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 32 }}>Stimmen der Preisträger</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>Stimmen der Preisträger</span>
|
||||
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 2.6vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 36px' }}>
|
||||
DAS SAGEN UNSERE PREISTRÄGER.
|
||||
</h2>
|
||||
|
||||
<p style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 300, color: '#101828', lineHeight: 1.55, margin: '0 0 40px' }}>
|
||||
{t.quote}
|
||||
@@ -72,6 +123,7 @@ export default function TestimonialsSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -643,7 +643,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
|
||||
|
||||
{/* ── FLOATING CTA ─────────────────────────────── */}
|
||||
{location.pathname === '/' && !formVisible && (
|
||||
{location.pathname === '/' && !formVisible && !isMobile && (
|
||||
<Link
|
||||
to="/teilnahme"
|
||||
style={{
|
||||
|
||||
@@ -29,7 +29,7 @@ const About: React.FC = () => {
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
{/* Left-to-right dark overlay */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: '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', 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%)' }} />
|
||||
{/* Gold accent line */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 80, width: 2, height: '100%', background: `linear-gradient(to bottom, transparent, ${GOLD}, transparent)`, opacity: 0.4 }} />
|
||||
{/* Gold bottom line */}
|
||||
@@ -44,7 +44,7 @@ const About: React.FC = () => {
|
||||
</div>
|
||||
<h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 6vw, 5rem)' : 'clamp(2.8rem, 6vw, 5rem)', fontWeight: 900, color: '#fff', lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 0 28px' }}>
|
||||
WERTE, DIE<br />
|
||||
<span style={{ color: GOLD }}>BAYERN BEWEGEN.</span>
|
||||
<span style={{ color: GOLD }}>BAYERN BEWEGEN</span>
|
||||
</h1>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, maxWidth: 560, margin: '0 0 40px', fontWeight: 300 }}>
|
||||
Seit 2005 ehrt der BMP herausragende Leistungen im bayerischen Mittelstand. Entdecken Sie die Geschichte, die Vision und die Menschen dahinter.
|
||||
@@ -87,45 +87,63 @@ const About: React.FC = () => {
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', minHeight: isMobile ? 'auto' : 580 }}>
|
||||
|
||||
{/* Left — text on cream */}
|
||||
<div style={{ background: CREAM, padding: isMobile ? '48px 24px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Was ist der Preis?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
|
||||
DER BAYERISCHE<br />MITTELSTANDS<wbr />PREIS.
|
||||
</h2>
|
||||
<div style={{ background: CREAM, padding: isMobile ? '32px 24px 44px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Was ist der Preis?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
|
||||
DER BAYERISCHE<br />MITTELSTANDS<wbr />PREIS
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', lineHeight: 1.8, maxWidth: 440, marginBottom: 16 }}>
|
||||
Seit 2005 ist der BMP die höchste Auszeichnung für den bayerischen Mittelstand. Vergeben von einer vollständig unabhängigen Expertenjury, ehrt er Unternehmen, die durch Innovation, Nachhaltigkeit und regionale Verwurzelung herausragen.
|
||||
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.8)', lineHeight: 1.8, maxWidth: 440, marginBottom: 16 }}>
|
||||
Seit 2005 ist der BMP eine der bedeutendsten Auszeichnungen für den bayerischen Mittelstand. Vergeben von einer vollständig unabhängigen Expertenjury, ehrt er Unternehmen, die durch Innovation, Nachhaltigkeit und regionale Verwurzelung herausragen.
|
||||
</p>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', lineHeight: 1.8, maxWidth: 440, marginBottom: 44 }}>
|
||||
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.8)', lineHeight: 1.8, maxWidth: 440, marginBottom: isMobile ? 0 : 44 }}>
|
||||
Entstanden aus einer Initiative bayerischer Wirtschaftsvertreter, ehrt der Preis heute jährlich die Leuchttürme unserer Wirtschaft.
|
||||
</p>
|
||||
{/* Key facts */}
|
||||
<div style={{ display: 'flex', borderTop: '1px solid #D0D5DD' }}>
|
||||
{/* Key facts — moved above the copy on mobile */}
|
||||
<div style={{ display: 'flex', order: isMobile ? -1 : 0, borderTop: isMobile ? 'none' : '1px solid #D0D5DD', borderBottom: isMobile ? '1px solid #D0D5DD' : 'none', marginBottom: isMobile ? 26 : 0 }}>
|
||||
{[
|
||||
{ val: '2005', label: 'Gegründet' },
|
||||
{ val: '0 €', label: 'Kostenfrei' },
|
||||
{ val: '0 €', label: 'Teilnahmegebühr' },
|
||||
{ val: '5', label: 'Jury-Schritte' },
|
||||
].map((f, i) => (
|
||||
<div key={i} style={{ flex: 1, padding: '20px 0', borderRight: i < 2 ? '1px solid #D0D5DD' : 'none', paddingLeft: i > 0 ? 20 : 0 }}>
|
||||
<div key={i} style={{ flex: 1, padding: '20px 0', borderRight: i < 2 ? '1px solid #D0D5DD' : 'none', paddingLeft: 0, paddingRight: i < 2 ? 20 : 0 }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2vw, 1.8rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.03em', lineHeight: 1 }}>{f.val}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{f.label}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{f.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right — full-bleed image */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 220 : undefined }}>
|
||||
{/* Right — full-bleed image (+ heading on mobile) */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined, order: isMobile ? 1 : 0 }}>
|
||||
<img
|
||||
src="/images/preistraeger-gruppe.jpg"
|
||||
alt="BMP Gala Preisverleihung"
|
||||
style={{ position: isMobile ? 'relative' : 'absolute', inset: 0, width: '100%', height: isMobile ? 220 : '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', inset: 0, background: `linear-gradient(to right, ${CREAM} 0%, transparent 25%), linear-gradient(to top, rgba(3,9,58,0.75) 0%, transparent 60%)` }} />
|
||||
<div style={{ position: 'absolute', bottom: 36, left: 36 }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: GOLD, marginBottom: 6 }}>BMP Preisverleihung · München</div>
|
||||
<div style={{ width: 28, height: 2, background: GOLD }} />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile
|
||||
? 'linear-gradient(to top, rgba(3,9,58,0.94) 0%, rgba(3,9,58,0.55) 38%, rgba(3,9,58,0.12) 72%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
|
||||
: `linear-gradient(to right, ${CREAM} 0%, transparent 25%), linear-gradient(to top, rgba(3,9,58,0.75) 0%, transparent 60%)` }} />
|
||||
{/* Heading overlay — mobile only */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 24px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Was ist der Preis?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
|
||||
DER BAYERISCHE<br />MITTELSTANDS<wbr />PREIS
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{/* Decorative label — desktop only */}
|
||||
{!isMobile && (
|
||||
<div style={{ position: 'absolute', bottom: 36, left: 36 }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: GOLD, marginBottom: 6 }}>BMP Preisverleihung · München</div>
|
||||
<div style={{ width: 28, height: 2, background: GOLD }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -134,25 +152,42 @@ const About: React.FC = () => {
|
||||
<section id="mittelstand" style={{ overflow: 'hidden' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%', minHeight: isMobile ? 'auto' : 580 }}>
|
||||
|
||||
{/* Left — full-bleed image */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 220 : undefined }}>
|
||||
{/* Left — full-bleed image (+ heading on mobile) */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined }}>
|
||||
<img
|
||||
src="/images/networking-innenhof.jpg"
|
||||
alt="Bayerischer Mittelstand"
|
||||
style={{ position: isMobile ? 'relative' : 'absolute', inset: 0, width: '100%', height: isMobile ? 220 : '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', inset: 0, background: `linear-gradient(to left, ${NAVY} 0%, transparent 30%)` }} />
|
||||
<div style={{ position: 'absolute', top: 36, left: 36 }}>
|
||||
<div style={{ width: 2, height: 40, background: GOLD }} />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile
|
||||
? 'linear-gradient(to top, rgba(3,9,58,0.94) 0%, rgba(3,9,58,0.55) 38%, rgba(3,9,58,0.12) 72%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
|
||||
: `linear-gradient(to left, ${NAVY} 0%, transparent 30%)` }} />
|
||||
{!isMobile && (
|
||||
<div style={{ position: 'absolute', top: 36, left: 36 }}>
|
||||
<div style={{ width: 2, height: 40, background: GOLD }} />
|
||||
</div>
|
||||
)}
|
||||
{/* Heading overlay — mobile only */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 24px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Relevanz & Zielsetzung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
|
||||
BEDEUTUNG FÜR<br />DEN MITTELSTAND
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right — text on navy */}
|
||||
<div style={{ background: NAVY, padding: isMobile ? '48px 24px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Relevanz & Zielsetzung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
|
||||
BEDEUTUNG FÜR<br />DEN MITTELSTAND.
|
||||
</h2>
|
||||
<div style={{ background: NAVY, padding: isMobile ? '32px 24px 40px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Relevanz & Zielsetzung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 20px' }}>
|
||||
BEDEUTUNG FÜR<br />DEN MITTELSTAND
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.5)', lineHeight: 1.8, maxWidth: 440, marginBottom: 16 }}>
|
||||
Der Bayerische Mittelstandspreis ist weit mehr als eine Trophäe. Seit seiner Gründung im Jahr 2005 verfolgt er das Ziel, die Vielfalt und Leistungsstärke bayerischer Familienunternehmen und KMU sichtbar zu machen.
|
||||
@@ -160,16 +195,6 @@ const About: React.FC = () => {
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.5)', lineHeight: 1.8, maxWidth: 440, marginBottom: 40 }}>
|
||||
In einer globalisierten Welt sind es diese Unternehmen, die für Stabilität, Innovation und soziale Verantwortung stehen. Der BMP macht sie sichtbar.
|
||||
</p>
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
{[
|
||||
{ n: '01', title: 'Sichtbarkeit', desc: 'Sichtbarkeit für den Mittelstand erhöhen' },
|
||||
{ n: '02', title: 'Netzwerk', desc: 'Netzwerkbildung über Branchen hinweg' },
|
||||
{ n: '03', title: 'Werte', desc: 'Förderung von wertebasierter Führung' },
|
||||
{ n: '04', title: 'Arbeitgebermarke', desc: 'Stärkung der Arbeitgebermarke Mittelstand' },
|
||||
].map((item, i) => (
|
||||
<GoalItem key={i} n={item.n} text={item.title} sub={item.desc} last={i === 3} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -194,7 +219,19 @@ const About: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* 4-col photo grid */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 0 }}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? undefined : 'repeat(4, 1fr)',
|
||||
gridAutoFlow: isMobile ? 'column' : undefined,
|
||||
gridTemplateRows: isMobile ? 'repeat(2, 1fr)' : undefined,
|
||||
gridAutoColumns: isMobile ? '66vw' : undefined,
|
||||
overflowX: isMobile ? 'auto' : undefined,
|
||||
scrollSnapType: isMobile ? 'x mandatory' : undefined,
|
||||
gap: isMobile ? 8 : 0,
|
||||
padding: isMobile ? '0 16px 8px' : 0,
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
scrollbarWidth: 'none',
|
||||
}}>
|
||||
{HIGHLIGHTS.map(w => <HighlightCard key={w.id} winner={w} />)}
|
||||
</div>
|
||||
</section>
|
||||
@@ -210,12 +247,12 @@ const About: React.FC = () => {
|
||||
|
||||
{/* LEFT — navy, timeline */}
|
||||
<div style={{ background: NAVY, padding: isMobile ? '56px 24px' : '88px 80px', position: 'relative', overflow: 'hidden' }}>
|
||||
{/* Ghost "20" watermark */}
|
||||
<div style={{ position: 'absolute', right: -24, bottom: -40, fontFamily: FF, fontSize: 'clamp(160px, 20vw, 240px)', fontWeight: 900, color: 'rgba(239,191,4,0.04)', lineHeight: 1, userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.04em' }}>20</div>
|
||||
{/* Ghost "20" watermark — desktop only */}
|
||||
{!isMobile && <div style={{ position: 'absolute', right: -24, bottom: -40, fontFamily: FF, fontSize: 'clamp(160px, 20vw, 240px)', fontWeight: 900, color: 'rgba(239,191,4,0.04)', lineHeight: 1, userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.04em' }}>20</div>}
|
||||
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Geschichte & Meilensteine</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, margin: '0 0 52px' }}>
|
||||
20 JAHRE<br /><span style={{ color: GOLD }}>MITTELSTANDS</span><wbr />EXZELLENZ.
|
||||
20 JAHRE<br /><span style={{ color: GOLD }}>MITTELSTANDS</span><wbr />EXZELLENZ
|
||||
</h2>
|
||||
|
||||
{/* Timeline */}
|
||||
@@ -228,9 +265,10 @@ const About: React.FC = () => {
|
||||
{ year: '2010', title: 'Erste mediale Partnerschaft', desc: 'Kooperation mit bayernweiten TV- und Printmedien.' },
|
||||
{ year: '2015', title: '100 Preisträger', desc: 'Jubiläum: 100 ausgezeichnete Unternehmen seit der ersten Verleihung.' },
|
||||
{ year: '2020', title: 'Digital-Transformation', desc: 'Erweiterung um digitale Bewerbungsprozesse und Online-Formate.' },
|
||||
{ year: '2025', title: 'Jubiläumsjahr', desc: '20 Jahre BMP — stärker, sichtbarer und vernetzter denn je.' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ position: 'relative', marginBottom: i < 4 ? 32 : 0 }}>
|
||||
{ year: '2025', title: 'Jubiläumsjahr', desc: '20 Jahre BMP: stärker, sichtbarer und vernetzter denn je.' },
|
||||
{ year: '2026', title: 'Bavarian Future Award', desc: 'Ergänzung des Portfolios um den Bavarian Future Award mit Fokus auf zukunftsweisende Unternehmen.' },
|
||||
].map((item, i, arr) => (
|
||||
<div key={i} style={{ position: 'relative', marginBottom: i < arr.length - 1 ? 32 : 0 }}>
|
||||
{/* Gold dot */}
|
||||
<div style={{ position: 'absolute', left: -34, top: 7, width: 10, height: 10, background: GOLD, outline: `3px solid ${NAVY}`, outlineOffset: 1, transform: 'rotate(45deg)' }} />
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(1.05rem, 1.6vw, 1.35rem)', fontWeight: 900, color: GOLD, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 4 }}>{item.year}</div>
|
||||
@@ -244,10 +282,9 @@ const About: React.FC = () => {
|
||||
{/* RIGHT — cream, Zielsetzung */}
|
||||
<div style={{ background: '#EFE5E3', padding: isMobile ? '56px 24px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Zielsetzung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, margin: '0 0 12px' }}>
|
||||
WOFÜR WIR<br />STEHEN.
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, margin: '0 0 40px' }}>
|
||||
WOFÜR WIR<br />STEHEN
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 3, background: GOLD, marginBottom: 52 }} />
|
||||
|
||||
<div>
|
||||
{[
|
||||
@@ -255,6 +292,7 @@ const About: React.FC = () => {
|
||||
{ n: '02', title: 'Netzwerk', desc: 'Branchenübergreifende Verbindungen zwischen herausragenden Unternehmen und Entscheidern schaffen.' },
|
||||
{ n: '03', title: 'Werte', desc: 'Wertebasierte Führung, nachhaltige Unternehmenskultur und gesellschaftliche Verantwortung fördern.' },
|
||||
{ n: '04', title: 'Arbeitgebermarke', desc: 'Den Mittelstand als attraktiven Arbeitgeber stärken und Talente für Bayern gewinnen.' },
|
||||
{ n: '05', title: 'Resilienz', desc: 'Die Widerstandsfähigkeit bayerischer Unternehmen würdigen, die auch in unsicheren Zeiten Stabilität und Verantwortung beweisen.' },
|
||||
].map((item, i, arr) => (
|
||||
<div
|
||||
key={i}
|
||||
@@ -280,11 +318,11 @@ const About: React.FC = () => {
|
||||
<div>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Vorteile & Werte</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.2vw, 2.9rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0 }}>
|
||||
WARUM DER<br />BMP ZÄHLT.
|
||||
WARUM DER<br />BMP ZÄHLT
|
||||
</h2>
|
||||
</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, maxWidth: 440 }}>
|
||||
Drei Dimensionen, die den Unterschied machen — für Ihr Unternehmen, Ihre Mitarbeiter und Ihren Marktauftritt.
|
||||
Drei Dimensionen, die den Unterschied machen: für Ihr Unternehmen, Ihre Mitarbeitenden und Ihren Marktauftritt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -293,20 +331,14 @@ const About: React.FC = () => {
|
||||
{
|
||||
num: '01',
|
||||
title: 'Exzellenz-Siegel',
|
||||
tag: 'Reputation',
|
||||
desc: 'Ein unabhängiger Qualitätsnachweis, der Vertrauen schafft — bei Kunden, Partnern und Mitarbeitern. Die Auszeichnung wirkt langfristig als stärkstes Signal Ihres Marktauftritts.',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'Partner-Netzwerk',
|
||||
tag: 'Connections',
|
||||
desc: 'Exklusiver Zugang zu Entscheidern aus Staatsregierung, Wirtschaftskammern und Topunternehmen. Kontakte, die Türen öffnen und Geschäftsbeziehungen begründen.',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'Reichweite',
|
||||
tag: 'Visibility',
|
||||
desc: 'Breite mediale Begleitung durch TV-, Radio- und Printpartner bayernweit. Sichtbarkeit, die weit über die eigene Branche und über Bayern hinausgeht.',
|
||||
},
|
||||
].map((item, i, arr) => (
|
||||
<ValueRow key={i} item={item} last={i === arr.length - 1} />
|
||||
@@ -327,10 +359,10 @@ const About: React.FC = () => {
|
||||
<div style={{ width: 28, height: 1, background: GOLD, opacity: 0.6 }} />
|
||||
</div>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2.2rem, 5vw, 3.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 24px' }}>
|
||||
SCHREIBEN AUCH SIE GESCHICHTE.
|
||||
SCHREIBEN AUCH SIE GESCHICHTE
|
||||
</h2>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.55)', lineHeight: 1.8, marginBottom: 48, fontWeight: 300 }}>
|
||||
Werden Sie Teil der Wall of Fame des bayerischen Mittelstands. Die Teilnahme ist kostenfrei und lohnt sich in jeder Phase.
|
||||
Werden Sie Teil der Wall of Fame des bayerischen Mittelstands. Die Teilnahmegebühr beträgt 0 EUR und die Teilnahme lohnt sich in jeder Phase.
|
||||
</p>
|
||||
<Link
|
||||
to="/teilnahme"
|
||||
@@ -382,10 +414,11 @@ const About: React.FC = () => {
|
||||
|
||||
function HighlightCard({ winner }: { winner: import('@/data/winners').Winner }) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
return (
|
||||
<Link
|
||||
to={`/preistraeger/${winner.slug}`}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: 280, overflow: 'hidden' }}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: isMobile ? 220 : 280, overflow: 'hidden', scrollSnapAlign: isMobile ? 'start' : undefined }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
@@ -419,35 +452,15 @@ function HighlightCard({ winner }: { winner: import('@/data/winners').Winner })
|
||||
);
|
||||
}
|
||||
|
||||
// ── GoalItem ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function GoalItem({ n, text, sub, last }: { n: string; text: string; sub?: string; last: boolean }) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
return (
|
||||
<div
|
||||
style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: '0 16px', padding: '16px 0', borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.07)', cursor: 'default', transition: 'background 0.15s', alignItems: 'center' }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: hovered ? GOLD : 'rgba(239,191,4,0.45)', letterSpacing: '0.1em', transition: 'color 0.2s' }}>{n}</span>
|
||||
<div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'baseline', gap: isMobile ? 3 : 12 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: hovered ? '#fff' : 'rgba(255,255,255,0.75)', textTransform: 'uppercase', letterSpacing: '0.08em', transition: 'color 0.2s' }}>{text}</span>
|
||||
{sub && <span style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.3)', flexShrink: isMobile ? 1 : 0 }}>{sub}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── ValueRow ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function ValueRow({ item, last }: { item: { num: string; title: string; tag: string; desc: string }; last: boolean }) {
|
||||
function ValueRow({ item, last }: { item: { num: string; title: string }; last: boolean }) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobileRow = useIsMobile();
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid', gridTemplateColumns: isMobileRow ? '1fr' : '120px 1fr 1fr', gap: isMobileRow ? '16px 0' : '0 48px',
|
||||
display: 'grid', gridTemplateColumns: isMobileRow ? '1fr' : '120px 1fr', gap: isMobileRow ? '16px 0' : '0 48px',
|
||||
padding: isMobileRow ? '32px 24px' : '48px 80px',
|
||||
borderBottom: last ? 'none' : '1px solid #D0D5DD',
|
||||
background: hovered ? '#EAE7E6' : 'transparent',
|
||||
@@ -457,20 +470,14 @@ function ValueRow({ item, last }: { item: { num: string; title: string; tag: str
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
{/* Left: number + tag */}
|
||||
{/* Left: number */}
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.8rem)', fontWeight: 900, color: hovered ? GOLD : 'rgba(16,24,40,0.1)', lineHeight: 1, letterSpacing: '-0.04em', transition: 'color 0.2s' }}>{item.num}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#4A8FC9', marginTop: 8 }}>{item.tag}</div>
|
||||
</div>
|
||||
{/* Center: title */}
|
||||
{/* Right: title (short label only) */}
|
||||
<div>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>{item.title}</h3>
|
||||
</div>
|
||||
{/* Right: description */}
|
||||
<div>
|
||||
<div style={{ width: 28, height: 1, background: GOLD, marginBottom: 16 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -97,7 +97,7 @@ export default function FormularUpload() {
|
||||
{
|
||||
icon: FileText,
|
||||
title: 'Pflichtdokumente',
|
||||
items: ['Kurzprofil des Unternehmens (max. 2 Seiten)', 'Begründung der Bewerbung (mind. 500 Wörter)', 'Letzte 2 Jahresabschlüsse', 'Anschreiben der Geschäftsführung'],
|
||||
items: ['Kurzprofil des Unternehmens (max. 2 Seiten)', 'Begründung der Bewerbung (mind. 500 Wörter)', 'Anschreiben der Geschäftsführung', 'Letzte 2 Jahresabschlüsse (optional, falls vorhanden)'],
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
|
||||
@@ -71,7 +71,7 @@ const STATUS_PHASES: StatusPhase[] = [
|
||||
pulse: true,
|
||||
phase: 'Auswertungsphase 2026',
|
||||
headline: 'DIE JURY BEWERTET GERADE.',
|
||||
body: 'Die Anmeldephase 2026 ist geschlossen. Unsere unabhängige Expertenjury aus Wirtschaft, Wissenschaft und Gesellschaft sichtet und bewertet derzeit alle Einreichungen.',
|
||||
body: 'Die Anmeldephase 2026 ist geschlossen. Unsere unabhängige Expertenjury aus Wissenschaft und Praxis sichtet und bewertet derzeit alle Einreichungen.',
|
||||
cta: null,
|
||||
accent: '#4A8FC9',
|
||||
bg: '#060D1C',
|
||||
@@ -95,10 +95,11 @@ const STATUS_PHASES: StatusPhase[] = [
|
||||
|
||||
function HomeWinnerCard({ winner }: { winner: import('@/data/winners').Winner }) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
return (
|
||||
<Link
|
||||
to={`/preistraeger/${winner.slug}`}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: 280, overflow: 'hidden' }}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: isMobile ? 220 : 280, overflow: 'hidden', scrollSnapAlign: isMobile ? 'start' : undefined }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
@@ -128,7 +129,7 @@ const Home: React.FC = () => {
|
||||
return (
|
||||
<div className="animate-fade-in">
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex items-center overflow-hidden" style={{ background: '#111D55', height: isMobile ? '100svh' : '100vh' }}>
|
||||
<section className="relative flex items-center overflow-hidden" style={{ background: '#111D55', height: isMobile ? '88svh' : '100vh' }}>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src="/images/gala-saal-overview.jpg"
|
||||
@@ -136,12 +137,12 @@ const Home: React.FC = () => {
|
||||
className="w-full h-full object-cover scale-105"
|
||||
style={{ objectPosition: 'center top' }}
|
||||
/>
|
||||
<div style={{ position:'absolute', inset:0, background:'linear-gradient(to right, #111D55 0%, rgba(17,29,85,0.90) 38%, rgba(17,29,85,0.18) 65%, transparent 100%)' }}></div>
|
||||
<div style={{ position:'absolute', inset:0, background: isMobile ? 'linear-gradient(to top, rgba(17,29,85,0.96) 0%, rgba(17,29,85,0.82) 42%, rgba(17,29,85,0.48) 72%, rgba(17,29,85,0.22) 100%)' : 'linear-gradient(to right, #111D55 0%, rgba(17,29,85,0.90) 38%, rgba(17,29,85,0.18) 65%, transparent 100%)' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto relative z-10" style={{ padding: isMobile ? '0 24px' : '0 24px' }}>
|
||||
<div style={{ maxWidth: isMobile ? '100%' : '48rem' }}>
|
||||
<div className="inline-flex items-center gap-3 bg-accent/20 border border-accent/30 rounded-full px-4 py-1.5 mb-8 backdrop-blur-sm animate-fade-in">
|
||||
<div className="inline-flex items-center gap-3 bg-accent/20 border border-accent/30 rounded-full px-4 py-1.5 mb-8 backdrop-blur-sm animate-fade-in" style={{ marginBottom: isMobile ? 20 : undefined }}>
|
||||
<span className="flex h-2 w-2 rounded-full bg-accent animate-pulse"></span>
|
||||
<span className="text-accent text-[10px] uppercase tracking-[0.2em] font-bold">Bewerbungsphase 2026 Eröffnet</span>
|
||||
</div>
|
||||
@@ -151,7 +152,7 @@ const Home: React.FC = () => {
|
||||
<span className="text-accent">MITTELSTÄNDLER.</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-white/70 mb-12 font-light leading-relaxed" style={{ fontSize: isMobile ? '1.0625rem' : '1.375rem', maxWidth: isMobile ? '100%' : '36rem' }}>
|
||||
<p className="text-white/70 mb-12 font-light leading-relaxed" style={{ fontSize: isMobile ? '1.0625rem' : '1.375rem', maxWidth: isMobile ? '100%' : '36rem', marginBottom: isMobile ? 28 : undefined }}>
|
||||
Der Bayerische Mittelstandspreis würdigt herausragende Leistungen – von Innovation über Nachhaltigkeit bis hin zur Exzellenz.
|
||||
</p>
|
||||
|
||||
@@ -207,24 +208,30 @@ const Home: React.FC = () => {
|
||||
{/* Schnell-Check Section */}
|
||||
<section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
|
||||
<MunichSkylineBg />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%' }}>
|
||||
{/* Left (desktop) / Bottom (mobile) — text */}
|
||||
<div style={{ background: '#E4E2E3', padding: isMobile ? '36px 24px 48px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Schnell-Check</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.8rem, 2.8vw, 2.5rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
|
||||
SIND SIE<br />BERECHTIGT?
|
||||
</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', position: 'relative' }}>
|
||||
{/* Left (desktop) / Bottom (mobile) — text block (light bg, dark text) */}
|
||||
<div style={{ background: '#E4E2E3', padding: isMobile ? '32px 24px 44px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
|
||||
{/* Eyebrow + heading — desktop only (on mobile these are overlaid on the image) */}
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Schnell-Check</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.8rem, 2.8vw, 2.5rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
|
||||
SIND SIE<br />BERECHTIGT?
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
<div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
|
||||
<p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
|
||||
Der Bayerische Mittelstandspreis richtet sich an inhabergeführte KMU im Freistaat. Vier Kriterien entscheiden — erfüllen Sie alle vier, steht Ihrer Bewerbung nichts im Weg.
|
||||
Der Bayerische Mittelstandspreis richtet sich an inhabergeführte KMU im Freistaat. Fünf Kriterien entscheiden, erfüllen Sie alle fünf, steht Ihrer Bewerbung nichts im Weg.
|
||||
</p>
|
||||
{/* Criteria list */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 36, borderTop: '1px solid #D0D5DD' }}>
|
||||
{[
|
||||
{ label: 'Standort Bayern', desc: 'Sitz oder Betriebsstätte im Freistaat' },
|
||||
{ label: '10–500 Mitarbeiter', desc: 'Klassischer Mittelstand' },
|
||||
{ label: '50–1.500 Mitarbeiter', desc: 'Klassischer Mittelstand' },
|
||||
{ label: 'Min. 3 Geschäftsjahre', desc: 'Markterfahrung und Stabilität' },
|
||||
{ label: 'Privatwirtschaft', desc: 'Kein staatlicher Träger' },
|
||||
{ label: 'Familien- bzw. eigentümergeführt', desc: 'Ihr Unternehmen ist inhabergeführt' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 0', borderBottom: '1px solid #D0D5DD' }}>
|
||||
<div style={{ width: 24, height: 24, background: '#111D55', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
@@ -237,6 +244,9 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, marginTop: 16, marginBottom: 28 }}>
|
||||
Auch ein Verbund bzw. eine Gemeinschaft von mittelständischen Unternehmen oder von mittelständischen Unternehmen und Organisationen/Institutionen mit Schwerpunkt in Bayern kann teilnehmen.
|
||||
</p>
|
||||
<Link
|
||||
to="/teilnahme"
|
||||
style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 15, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#101828', background: '#EFBF04', padding: '15px 32px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, alignSelf: isMobile ? 'stretch' : 'flex-start', transition: 'background 0.15s, box-shadow 0.2s' }}
|
||||
@@ -247,17 +257,28 @@ const Home: React.FC = () => {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right (desktop) / Top (mobile) — full-bleed image */}
|
||||
<div style={{ position: 'relative', minHeight: isMobile ? 230 : 560, overflow: 'hidden', order: isMobile ? 1 : 0 }}>
|
||||
{/* 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
|
||||
src="/images/buehne-gewinner.jpg"
|
||||
alt="Preisverleihung Bühne"
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center' }}
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: isMobile ? 'center right' : 'center center' }}
|
||||
/>
|
||||
{/* Fade: into the text bg — downward on mobile, leftward on desktop */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile ? 'linear-gradient(to bottom, transparent 45%, #E4E2E3 100%)' : 'linear-gradient(to left, transparent 40%, #E4E2E3 100%)' }} />
|
||||
{/* Overlay: mobile = navy shadow bottom-left (for the heading); desktop = leftward fade into text bg */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile
|
||||
? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.55) 34%, rgba(3,9,58,0.12) 68%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.55) 0%, transparent 55%)'
|
||||
: 'linear-gradient(to left, transparent 40%, #E4E2E3 100%)' }} />
|
||||
{/* Heading overlay — mobile only */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Schnell-Check</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
|
||||
SIND SIE<br />BERECHTIGT?
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{/* Gold accent line — bottom edge */}
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, rgba(239,191,4,0.2), #EFBF04, rgba(239,191,4,0.2))' }} />
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, rgba(239,191,4,0.2), #EFBF04, rgba(239,191,4,0.2))', zIndex: 3 }} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -266,7 +287,7 @@ const Home: React.FC = () => {
|
||||
<section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
|
||||
<MunichSkylineBg />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%' }}>
|
||||
{/* Left — full-bleed image with stats overlay */}
|
||||
{/* Left — full-bleed image with stats overlay (+ heading on mobile) */}
|
||||
<div style={{ position: 'relative', minHeight: isMobile ? 300 : 600, overflow: 'hidden' }}>
|
||||
<img
|
||||
src="/images/preistraeger-jubel.jpg"
|
||||
@@ -274,30 +295,58 @@ const Home: React.FC = () => {
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
|
||||
/>
|
||||
{/* Dark overlay */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, transparent 50%, #fff 100%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, rgba(3,9,58,0.50) 60%, transparent 100%)' }} />
|
||||
{/* Stats bottom-left */}
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: isMobile ? '24px 24px' : '32px 40px', background: 'linear-gradient(to top, rgba(3,9,58,0.88) 0%, transparent 100%)', display: 'flex', gap: isMobile ? 20 : 36 }}>
|
||||
{[['20+', 'Jahre Exzellenz'], ['0 €', 'Teilnahmegebühr'], ['100%', 'Unabhängig']].map(([v, l]) => (
|
||||
<div key={l}>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 28, fontWeight: 900, color: '#EFBF04', lineHeight: 1 }}>{v}</div>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile
|
||||
? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.5) 36%, rgba(3,9,58,0.1) 70%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
|
||||
: 'linear-gradient(to right, transparent 50%, #fff 100%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, rgba(3,9,58,0.50) 60%, transparent 100%)' }} />
|
||||
{/* Heading overlay — mobile only (bottom-left) */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Ein Gewinn für alle</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
|
||||
AUSZEICHNUNG<br />FÜR DIE BESTEN.
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{/* Stats bottom-left — desktop only (mobile shows them below the image) */}
|
||||
{!isMobile && (
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '32px 40px', background: 'linear-gradient(to top, rgba(3,9,58,0.88) 0%, transparent 100%)', display: 'flex', gap: 36 }}>
|
||||
{[['20+', 'Jahre Exzellenz'], ['0 €', 'Teilnahmegebühr'], ['100%', 'Unabhängig']].map(([v, l]) => (
|
||||
<div key={l}>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 28, fontWeight: 900, color: '#EFBF04', lineHeight: 1 }}>{v}</div>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right — editorial text */}
|
||||
<div style={{ background: '#fff', padding: isMobile ? '48px 24px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Ein Gewinn für alle</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 3.2vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
|
||||
AUSZEICHNUNG<br />FÜR DIE BESTEN.
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
|
||||
<blockquote style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 18, fontStyle: 'italic', color: '#101828', lineHeight: 1.65, borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
|
||||
<div style={{ background: '#fff', padding: isMobile ? '32px 24px 40px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Ein Gewinn für alle</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 3.2vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
|
||||
AUSZEICHNUNG<br />FÜR DIE BESTEN.
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
{/* Stats row — mobile only, below the image */}
|
||||
{isMobile && (
|
||||
<div style={{ display: 'flex', gap: 16, marginBottom: 28, paddingBottom: 24, borderBottom: '1px solid #D0D5DD' }}>
|
||||
{[['20+', 'Jahre Exzellenz'], ['0 €', 'Teilnahmegebühr'], ['100%', 'Unabhängig']].map(([v, l]) => (
|
||||
<div key={l} style={{ flex: 1 }}>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 26, fontWeight: 900, color: '#101828', lineHeight: 1 }}>{v}</div>
|
||||
<div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#4A8FC9', marginTop: 6 }}>{l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<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!"
|
||||
</blockquote>
|
||||
<p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.75, margin: '0 0 36px' }}>
|
||||
Wir suchen Vorbilder, die sich trotz aller Risiken nicht scheuen, Visionen in Businesspläne und Ideen in Unternehmungen zu verwandeln. Seit vielen Jahren würdigen wir herausragende unternehmerische Leistungen im Freistaat.
|
||||
<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.
|
||||
</p>
|
||||
<Link
|
||||
to="/der-bmp"
|
||||
@@ -320,7 +369,7 @@ const Home: React.FC = () => {
|
||||
<div>
|
||||
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04', display: 'block', marginBottom: 12 }}>Success Stories</span>
|
||||
<h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
|
||||
PREISTRÄGER DER HERZEN.
|
||||
DIE BESTEN UNTERNEHMEN IN BAYERN
|
||||
</h2>
|
||||
</div>
|
||||
<Link
|
||||
@@ -331,7 +380,19 @@ const Home: React.FC = () => {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 0 }}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? undefined : 'repeat(4, 1fr)',
|
||||
gridAutoFlow: isMobile ? 'column' : undefined,
|
||||
gridTemplateRows: isMobile ? 'repeat(2, 1fr)' : undefined,
|
||||
gridAutoColumns: isMobile ? '66vw' : undefined,
|
||||
overflowX: isMobile ? 'auto' : undefined,
|
||||
scrollSnapType: isMobile ? 'x mandatory' : undefined,
|
||||
gap: isMobile ? 8 : 0,
|
||||
padding: isMobile ? '0 16px 8px' : 0,
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
scrollbarWidth: 'none',
|
||||
}}>
|
||||
{WINNERS.filter(w => w.year === 2025).slice(0, 8).map(w => (
|
||||
<HomeWinnerCard key={w.id} winner={w} />
|
||||
))}
|
||||
@@ -348,11 +409,15 @@ const Home: React.FC = () => {
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', minHeight: isMobile ? 'auto' : 560 }}>
|
||||
|
||||
{/* Left — text on cream */}
|
||||
<div style={{ background: '#E4E2E3', padding: isMobile ? '48px 24px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Mehr als nur ein Preis</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 7vw, 2.2rem)' : 'clamp(2rem, 3vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 48px' }}>
|
||||
WARUM SICH DIE<br />TEILNAHME LOHNT.
|
||||
</h2>
|
||||
<div style={{ background: '#E4E2E3', padding: isMobile ? '32px 24px 44px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Mehr als nur ein Preis</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 48px' }}>
|
||||
WARUM SICH DIE<br />TEILNAHME LOHNT.
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Numbered rows — no cards, no shadows */}
|
||||
<div style={{ borderTop: '1px solid #D0D5DD' }}>
|
||||
@@ -377,19 +442,32 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right — full-bleed photo */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 240 : 'auto', display: isMobile ? 'block' : 'block' }}>
|
||||
{/* Right — full-bleed photo (+ heading on mobile) */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : 'auto', order: isMobile ? 1 : 0 }}>
|
||||
<img
|
||||
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' }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, #E4E2E3 0%, transparent 30%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, transparent 50%)' }} />
|
||||
{/* Bottom-left label */}
|
||||
<div style={{ position: 'absolute', bottom: 40, left: 40 }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#EFBF04', marginBottom: 6 }}>BMP Gala-Netzwerk</div>
|
||||
<div style={{ width: 32, height: 2, background: '#EFBF04' }} />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', inset: 0, background: isMobile
|
||||
? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.5) 36%, rgba(3,9,58,0.1) 70%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
|
||||
: 'linear-gradient(to right, #E4E2E3 0%, transparent 30%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, transparent 50%)' }} />
|
||||
{/* Heading overlay — mobile only (bottom-left) */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Mehr als nur ein Preis</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.4rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
|
||||
WARUM SICH DIE<br />TEILNAHME LOHNT.
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{/* Bottom-left label — desktop only */}
|
||||
{!isMobile && (
|
||||
<div style={{ position: 'absolute', bottom: 40, left: 40 }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#EFBF04', marginBottom: 6 }}>BMP Gala-Netzwerk</div>
|
||||
<div style={{ width: 32, height: 2, background: '#EFBF04' }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -416,7 +494,7 @@ const Home: React.FC = () => {
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
{[
|
||||
{ num: '01', label: 'Kostenfrei', desc: 'Ohne Teilnahmegebühr' },
|
||||
{ num: '02', label: 'Jury', desc: 'Unabhängige Experten' },
|
||||
{ num: '02', label: 'Jury', desc: 'Aus Wissenschaft und Praxis' },
|
||||
{ num: '03', label: 'Sichtbarkeit', desc: 'Medial bayernweit' },
|
||||
{ num: '04', label: 'Gala', desc: 'Verleihung München' },
|
||||
].map(item => (
|
||||
@@ -443,13 +521,8 @@ const Home: React.FC = () => {
|
||||
<pattern id="bmpCross" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M0,0 L18,18 M18,0 L0,18" stroke="rgba(17,29,85,0.055)" strokeWidth="0.65" />
|
||||
</pattern>
|
||||
{/* Corner-mark diamond accent */}
|
||||
<pattern id="bmpDiamond" width="36" height="36" patternUnits="userSpaceOnUse">
|
||||
<polygon points="18,2 34,18 18,34 2,18" fill="none" stroke="rgba(17,29,85,0.045)" strokeWidth="0.6" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#bmpCross)" />
|
||||
<rect width="100%" height="100%" fill="url(#bmpDiamond)" />
|
||||
</svg>
|
||||
|
||||
{/* Inner vignette — edges slightly deeper gold */}
|
||||
|
||||
@@ -769,7 +769,8 @@ const MitgliedWerden: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
Der Bayerische Mittelstandspreis lebt vom Engagement seiner Mitglieder.
|
||||
Als Teil des Vereins gestaltest du aktiv mit, wer ausgezeichnet wird — und warum.
|
||||
Eine Mitgliedschaft ist Unterstützung, damit der Preis weiterhin unabhängig
|
||||
und kostenlos umgesetzt werden kann.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -957,8 +958,8 @@ const MitgliedWerden: React.FC = () => {
|
||||
/>
|
||||
<BenefitCard
|
||||
icon={<Star size={24} color={NAVY} strokeWidth={1.5} />}
|
||||
title="Gestaltung"
|
||||
body="Bringe deine Expertise in die Kriterien des Awards ein und forme aktiv mit, wer ausgezeichnet wird."
|
||||
title="Unterstützung"
|
||||
body="Mit deiner Mitgliedschaft sorgst du dafür, dass der Preis unabhängig und kostenlos vergeben werden kann."
|
||||
isLast={false}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
@@ -1046,6 +1047,18 @@ const MitgliedWerden: React.FC = () => {
|
||||
Einzelpersonen — verbunden durch das Ziel, den Mittelstand als Rückgrat der
|
||||
bayerischen Wirtschaft zu stärken.
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: FB,
|
||||
fontSize: 18,
|
||||
color: 'rgba(16,24,40,0.55)',
|
||||
lineHeight: 1.85,
|
||||
margin: '0 0 40px',
|
||||
}}
|
||||
>
|
||||
Veranstalter ist der EWIF – Europäisches Wirtschaftsforum. Die Mitgliedschaft
|
||||
läuft über den EWIF.
|
||||
</p>
|
||||
<div style={{ width: 40, height: 1, background: GOLD, marginBottom: 16 }} />
|
||||
<span
|
||||
style={{
|
||||
@@ -1364,7 +1377,7 @@ const MitgliedWerden: React.FC = () => {
|
||||
role="Unternehmer, München"
|
||||
/>
|
||||
<QuoteCard
|
||||
quote="Als Fördermitglied kann ich aktiv mitgestalten, was im bayerischen Mittelstand als exzellent gilt. Dieser Einfluss ist unbezahlbar."
|
||||
quote="Als Fördermitglied unterstütze ich, dass der Preis unabhängig und kostenlos vergeben werden kann. Dieser Beitrag für den Mittelstand ist mir viel wert."
|
||||
initials="SK"
|
||||
name="Sandra Keller"
|
||||
role="Verbandsvertreterin"
|
||||
@@ -1417,7 +1430,7 @@ const MitgliedWerden: React.FC = () => {
|
||||
maxWidth: 640,
|
||||
}}
|
||||
>
|
||||
GESTALTE MIT. NETZWERKE. WIRKE.
|
||||
UNTERSTÜTZE. NETZWERKE. WIRKE.
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -36,11 +36,11 @@ function PersonCard({ imgSrc, imgAlt, name, titleLine1, titleLine2, institution,
|
||||
const isMobileCard = useIsMobile();
|
||||
return (
|
||||
<div
|
||||
style={{ borderRight: borderRight && !isMobileCard ? '1px solid rgba(255,255,255,0.08)' : 'none', borderBottom: borderRight && isMobileCard ? '1px solid rgba(255,255,255,0.08)' : 'none', display: 'flex', flexDirection: 'column' }}
|
||||
style={{ borderRight: borderRight && !isMobileCard ? '1px solid rgba(255,255,255,0.08)' : 'none', display: 'flex', flexDirection: 'column', ...(isMobileCard ? { minWidth: '85vw', maxWidth: '85vw', flexShrink: 0, scrollSnapAlign: 'start', borderRadius: 16, overflow: 'hidden' } : {}) }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
<div style={{ position: 'relative', height: 320, overflow: 'hidden', width: '100%' }}>
|
||||
<div style={{ position: 'relative', height: isMobileCard ? 250 : 320, overflow: 'hidden', width: '100%' }}>
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt={imgAlt}
|
||||
@@ -75,7 +75,7 @@ const JuryCard: React.FC<{ member: JuryMember; idx: number }> = ({ member, idx }
|
||||
<div
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{ borderLeft: !isMobileCard && idx > 0 ? '1px solid rgba(255,255,255,0.07)' : 'none', borderTop: 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' }}
|
||||
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' }} />
|
||||
@@ -97,6 +97,7 @@ interface Partner {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
tier: 1 | 2 | 3;
|
||||
desc: string;
|
||||
fullDesc: string;
|
||||
logo: React.ReactNode;
|
||||
@@ -131,6 +132,45 @@ const PartnerCell: React.FC<{ partner: Partner; idx: number; total: number; onCl
|
||||
);
|
||||
};
|
||||
|
||||
// ── SponsorCell (tiered) ──────────────────────────────────────────────────────
|
||||
|
||||
const SponsorCell: React.FC<{ partner: Partner; variant: 'lg' | 'md' | 'sm'; idx: number; cols: number; onClick: () => void }> = ({ partner, variant, idx, cols, onClick }) => {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobileCell = useIsMobile();
|
||||
const lg = variant === 'lg';
|
||||
const sm = variant === 'sm';
|
||||
const lastCol = (idx % cols) === cols - 1;
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
padding: isMobileCell ? '24px 20px' : lg ? '40px 36px' : sm ? '28px 28px' : '32px 32px',
|
||||
borderRight: !lastCol && !isMobileCell ? '1px solid rgba(3,9,58,0.08)' : 'none',
|
||||
borderBottom: '1px solid rgba(3,9,58,0.08)',
|
||||
display: 'flex', flexDirection: 'column', gap: 14,
|
||||
cursor: 'pointer',
|
||||
background: hovered ? '#E8E5E4' : 'transparent',
|
||||
transition: 'background 0.15s',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{lg && (
|
||||
<span style={{ position: 'absolute', top: 18, right: 18, fontFamily: FF, fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.18em', color: '#101828', background: GOLD, padding: '4px 10px', borderRadius: 100, zIndex: 1 }}>Premium</span>
|
||||
)}
|
||||
<div style={{ height: lg ? 52 : 44, 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: lg ? 22 : 18, fontWeight: 700, color: '#101828', letterSpacing: '-0.01em', lineHeight: 1.15 }}>{partner.name}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: sm ? 10 : 11, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.2em', fontWeight: 700 }}>{partner.role}</div>
|
||||
{!sm && <div style={{ fontFamily: FB, fontSize: lg ? 17 : 16, 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>
|
||||
);
|
||||
};
|
||||
|
||||
// ── PartnerModal ─────────────────────────────────────────────────────────────
|
||||
|
||||
function PartnerModal({ partner, onClose }: { partner: Partner; onClose: () => void }) {
|
||||
@@ -348,97 +388,102 @@ const Netzwerk: React.FC = () => {
|
||||
];
|
||||
|
||||
const partners: Partner[] = [
|
||||
/* ── TIER 1 · Hauptsponsoren ─────────────────────────────── */
|
||||
{
|
||||
id: 'rsm', name: 'RSM Ebner Stolz', role: 'Hauptsponsor',
|
||||
id: 'rsm', name: 'RSM Ebner Stolz', role: 'Hauptsponsor', tier: 1,
|
||||
desc: 'Führende mittelständische Wirtschaftsprüfungs- und Steuerberatungsgesellschaft.',
|
||||
fullDesc: 'RSM Ebner Stolz ist eine der größten unabhängigen Wirtschaftsprüfungs- und Steuerberatungsgesellschaften Deutschlands mit besonderer Expertise im Mittelstand. Als Hauptsponsor des BMP unterstützen sie die Identifikation herausragender Unternehmen und bringen ihre Netzwerke aktiv in die Nominierungsphase ein.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ display: 'flex', gap: 2 }}><span style={{ width: 10, height: 10, background: '#6b7280', display: 'block' }} /><span style={{ width: 10, height: 10, background: '#22c55e', display: 'block' }} /><span style={{ width: 10, height: 10, background: '#3b82f6', display: 'block' }} /></span><span style={{ fontWeight: 900, fontSize: 15, letterSpacing: '-0.02em', color: '#374151', fontFamily: FF }}>RSM <span style={{ color: '#6b7280', fontWeight: 600 }}>EBNER STOLZ</span></span></span>),
|
||||
industry: 'Wirtschaftsprüfung & Beratung', location: 'München, Bayern', website: 'rsm-ebner-stolz.de', linkedin: 'https://linkedin.com/company/rsm-ebner-stolz',
|
||||
},
|
||||
{
|
||||
id: 'wwk', name: 'WWK', role: 'Sponsor',
|
||||
id: 'wwk', name: 'WWK', role: 'Hauptsponsor', tier: 1,
|
||||
desc: 'Eine starke Gemeinschaft — Lebensversicherungsgruppe mit bayerischen Wurzeln.',
|
||||
fullDesc: 'Die WWK Lebensversicherung a. G. ist eine der leistungsstärksten deutschen Lebensversicherungsgruppen. Als Münchner Traditionsunternehmen verbindet die WWK tiefe bayerische Verwurzelung mit finanzieller Stärke — Werte, die sie mit dem Bayerischen Mittelstandspreis teilt.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 24, letterSpacing: '-0.02em', color: '#16a34a', fontFamily: 'Arial Black, sans-serif' }}>WWK</span>),
|
||||
industry: 'Lebensversicherung', location: 'München, Bayern', website: 'wwk.de', linkedin: 'https://linkedin.com/company/wwk-versicherung',
|
||||
},
|
||||
|
||||
/* ── TIER 2 · Medienpartner ──────────────────────────────── */
|
||||
{
|
||||
id: 'wir', name: 'Wir Eigentümerunternehmer', role: 'Partner',
|
||||
desc: 'Netzwerk und Stimme der inhabergeführten Unternehmen in Bayern.',
|
||||
fullDesc: 'Der Verband Wir Eigentümerunternehmer e.V. vertritt die Interessen inhabergeführter Unternehmen und bringt die authentische Unternehmerperspektive in den BMP ein. Mitglieder erhalten exklusive Einblicke in die Jury-Prozesse und profitieren vom Netzwerk der Preisträger.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><svg width="20" height="20" viewBox="0 0 20 20"><polygon points="10,1 19,6 19,14 10,19 1,14 1,6" fill="none" stroke="#1e3a5f" strokeWidth="2" /><polygon points="10,4 16,7.5 16,12.5 10,16 4,12.5 4,7.5" fill="#1e3a5f" /></svg><span style={{ fontSize: 10, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#1e3a5f', lineHeight: 1.2, fontFamily: FF }}>WIR<br />EIGENTÜMER</span></span>),
|
||||
industry: 'Unternehmensverband', location: 'München, Bayern', website: 'wir-eigentuemerunternehmer.de',
|
||||
id: 'radiogong', name: 'Radio Gong 96.3', role: 'Medienpartner', tier: 2,
|
||||
desc: 'Der reichweitenstärkste Radiosender Münchens — Stimme des Mittelstands.',
|
||||
fullDesc: 'Radio Gong 96.3 ist der reichweitenstärkste Radiosender Münchens. Als Medienpartner des BMP sorgt er für Aufmerksamkeit für die Nominierten in Sendemitschnitten und redaktionellen Beiträgen.',
|
||||
logo: (<span style={{ background: '#e11d48', color: '#fff', fontWeight: 900, fontSize: 14, padding: '4px 10px', lineHeight: 1.25, display: 'inline-block', textAlign: 'center' as const, fontFamily: '"IBM Plex Sans", sans-serif' }}>Radio<br/>Gong <span style={{ color: '#fde047' }}>96.3</span></span>),
|
||||
industry: 'Medien', location: 'München', website: 'radiogong.com',
|
||||
},
|
||||
{
|
||||
id: 'deutschebank', name: 'Deutsche Bank', role: 'Finanzpartner',
|
||||
desc: 'Partnerbank für die Finanzierung und Skalierung von KMU-Wachstum.',
|
||||
fullDesc: 'Die Deutsche Bank begleitet mittelständische Unternehmen als verlässlicher Finanzpartner durch alle Wachstumsphasen. Im Rahmen des BMP stellt sie ihr deutschlandweites Netzwerk, spezifische Mittelstandsprodukte und direkte Ansprechpartner für die Nominierten bereit.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><svg width="20" height="20" viewBox="0 0 20 20"><rect x="1" y="1" width="18" height="18" fill="none" stroke="#1d1d1b" strokeWidth="1.5" /><line x1="5" y1="15" x2="15" y2="5" stroke="#1d1d1b" strokeWidth="2" /></svg><span style={{ fontWeight: 600, fontSize: 15, color: '#1d1d1b', fontFamily: FB }}>Deutsche Bank</span></span>),
|
||||
industry: 'Bankwesen & Finanzen', location: 'Frankfurt a. M.', website: 'db.com', linkedin: 'https://linkedin.com/company/deutsche-bank',
|
||||
id: 'muenchentv', name: 'münchen.tv', role: 'Medienpartner', tier: 2,
|
||||
desc: 'Der lokale Fernsehsender der Landeshauptstadt München.',
|
||||
fullDesc: 'münchen.tv ist der lokale Fernsehsender der Landeshauptstadt München. Als Medienpartner überträgt münchen.tv Highlights der BMP-Gala und produziert Porträts der Nominierten.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 15, color: '#0ea5e9', fontFamily: '"Inter", sans-serif' }}>münchen<span style={{ color: '#1e293b' }}>.tv</span></span>),
|
||||
industry: 'Medien', location: 'München', website: 'muenchen.tv',
|
||||
},
|
||||
|
||||
/* ── TIER 3 · Weitere Sponsoren ──────────────────────────── */
|
||||
{
|
||||
id: 'bionorica', name: 'Bionorica', role: 'Sponsor',
|
||||
desc: 'Weltmarktführer für pflanzliche Arzneimittel aus dem bayerischen Neumarkt.',
|
||||
fullDesc: 'Bionorica SE ist ein international agierendes Pharmaunternehmen mit Sitz in Neumarkt i. d. OPf. und Weltmarktführer bei pflanzlichen Arzneimitteln. Das Unternehmen selbst ist ein Paradebeispiel eines bayerischen Mittelständlers mit globalem Anspruch und verkörpert die Innovationskraft, die der BMP würdigt.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#16a34a" /><path d="M10 3 Q14 7 14 10 Q14 14 10 17 Q6 14 6 10 Q6 7 10 3Z" fill="white" opacity="0.8" /></svg><span style={{ fontWeight: 700, fontSize: 15, color: '#16a34a', fontFamily: FB }}>Bionorica<sup style={{ fontSize: 8 }}>®</sup></span></span>),
|
||||
industry: 'Pharmaindustrie', location: 'Neumarkt i.d.OPf., Bayern', website: 'bionorica.de', linkedin: 'https://linkedin.com/company/bionorica',
|
||||
},
|
||||
{
|
||||
id: 'berchtesgadenerland', name: 'Berchtesgadener Land', role: 'Sponsor',
|
||||
desc: 'Bayerische Bio-Molkerei — Qualität und Nachhaltigkeit aus den Alpen.',
|
||||
fullDesc: 'Die Molkerei Berchtesgadener Land eG ist eine der führenden Bio-Molkereien Deutschlands. Als genossenschaftlich organisiertes Unternehmen mit Sitz in Piding verkörpert sie die Werte des bayerischen Mittelstands: regionale Verantwortung, Qualität und nachhaltige Unternehmensführung.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><svg width="18" height="18" viewBox="0 0 18 18"><polygon points="9,1 17,9 13,17 5,17 1,9" fill="#2d5a27" /><polygon points="9,4 14,9 9,14 4,9" fill="#5a8a54" opacity="0.6" /></svg><span style={{ fontWeight: 700, fontSize: 11, color: '#2d5a27', lineHeight: 1.2, fontFamily: FF }}>BERCHTESGADENER<br />LAND</span></span>),
|
||||
industry: 'Bio-Lebensmittel', location: 'Piding, Bayern', website: 'berchtesgadener-land.com', linkedin: 'https://linkedin.com/company/berchtesgadener-land',
|
||||
},
|
||||
{
|
||||
id: 'metzler', name: 'METZLER', role: 'Finanzpartner',
|
||||
id: 'metzler', name: 'METZLER', role: 'Sponsor', tier: 3,
|
||||
desc: 'Älteste Privatbank Deutschlands — Unabhängigkeit seit 1674.',
|
||||
fullDesc: 'B. Metzler seel. Sohn & Co. KGaA ist die älteste deutsche Privatbank in Familienbesitz — seit über 350 Jahren unabhängig. Ihr Engagement für den BMP unterstreicht die tiefe Verbundenheit mit dem Mittelstand, dessen Werte wie Verlässlichkeit, Substanz und Langfristigkeit Metzler selbst verkörpert.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 21, letterSpacing: '0.15em', color: '#1a1a1a', fontFamily: 'Georgia, serif' }}>METZLER</span>),
|
||||
industry: 'Privatbankwesen', location: 'Frankfurt a. M.', website: 'metzler.com', linkedin: 'https://linkedin.com/company/metzler',
|
||||
},
|
||||
{
|
||||
id: 'radiogong', name: 'Radio Gong 96.3', role: 'Medienpartner',
|
||||
desc: 'Münchens meistgehörter Radiosender — Reichweite für den Mittelstand.',
|
||||
fullDesc: 'Radio Gong 96.3 ist der reichweitenstärkste Radiosender Münchens und der Region. Als Medienpartner des BMP sorgt er für maximale Aufmerksamkeit für die Nominierten — in Sendemitschnitten, redaktionellen Beiträgen und Live-Übertragungen von der Gala.',
|
||||
logo: (<span style={{ background: '#e11d48', color: '#fff', fontWeight: 900, fontSize: 14, padding: '4px 10px', lineHeight: 1.25, display: 'inline-block', textAlign: 'center', fontFamily: FF }}>Radio<br />Gong <span style={{ color: '#fde047' }}>96.3</span></span>),
|
||||
industry: 'Medien & Radio', location: 'München, Bayern', website: 'radiogong.com',
|
||||
id: 'wieselhuber', name: 'Dr. Wieselhuber & Partner', role: 'Sponsor', tier: 3,
|
||||
desc: 'Unabhängige Top-Management-Beratung für Familienunternehmen und Mittelstand.',
|
||||
fullDesc: 'Dr. Wieselhuber & Partner ist eine unabhängige, branchenübergreifende Top-Management-Beratung mit besonderem Fokus auf Familienunternehmen und Mittelstand. Als Sponsor bringt das Haus seine Strategie- und Transformationsexpertise in das Netzwerk des BMP ein.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 16, letterSpacing: '-0.01em', color: '#1a2b4a', fontFamily: FF }}>W&P <span style={{ fontWeight: 600, color: '#5a6b85' }}>WIESELHUBER</span></span>),
|
||||
industry: 'Unternehmensberatung', location: 'München, Bayern', website: 'wieselhuber.de',
|
||||
},
|
||||
{
|
||||
id: 'muenchentv', name: 'münchen.tv', role: 'Medienpartner',
|
||||
desc: 'Das lokale TV des Großraums München — Bild und Ton zur Gala.',
|
||||
fullDesc: 'münchen.tv ist der lokale Fernsehsender der Landeshauptstadt München mit einer täglichen Reichweite von mehreren hunderttausend Zuschauern. Als Medienpartner überträgt münchen.tv Highlights der BMP-Gala und produziert Porträts der Nominierten für ein breites Publikum.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><svg width="22" height="18" viewBox="0 0 22 18"><path d="M2 4 Q2 1 5 1 L17 1 Q20 1 20 4 L20 14 Q20 17 17 17 L5 17 Q2 17 2 14 Z" fill="#0ea5e9" /><path d="M20 5 L22 3 L22 15 L20 13" fill="#0ea5e9" /></svg><span style={{ fontWeight: 900, fontSize: 15, color: '#0ea5e9', fontFamily: FB }}>münchen<span style={{ color: '#1e293b' }}>.tv</span></span></span>),
|
||||
industry: 'Fernsehen & Medien', location: 'München, Bayern', website: 'muenchen.tv',
|
||||
id: 'fristads', name: 'Fristads', role: 'Sponsor', tier: 3,
|
||||
desc: 'Premium-Arbeitsbekleidung — Funktion, Qualität und Design.',
|
||||
fullDesc: 'Fristads steht für hochwertige, funktionale Arbeitsbekleidung, die Schutz, Komfort und Design vereint. Als Sponsor des Bayerischen Mittelstandspreises unterstützt das Unternehmen die Auszeichnung herausragender mittelständischer Betriebe.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 19, letterSpacing: '0.02em', color: '#1a1a1a', fontFamily: 'Arial Black, sans-serif' }}>FRISTADS</span>),
|
||||
industry: 'Workwear & Textil', location: 'Deutschland', website: 'fristads.com',
|
||||
},
|
||||
{
|
||||
id: 'ews', name: 'EWS', role: 'Partner',
|
||||
desc: 'Energiewirtschaftliche Kompetenz für nachhaltige Mittelstandslösungen.',
|
||||
fullDesc: 'EWS steht für zukunftsweisende Energieversorgung aus 100% erneuerbaren Quellen. Als Partner des BMP bringt EWS Expertise zu Energieeffizienz, nachhaltiger Unternehmensführung und der Energiewende ein — Themen, die für den modernen bayerischen Mittelstand zentral sind.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, border: '2px solid #1e3a8a' }}><span style={{ fontWeight: 900, color: '#1e3a8a', fontSize: 17, letterSpacing: '0.1em', fontFamily: FF }}>EWS</span></span>),
|
||||
industry: 'Erneuerbare Energien', location: 'Schönau, Baden-Württemberg', website: 'ews-schoenau.de',
|
||||
id: 'newedge', name: 'New Edge', role: 'Sponsor', tier: 3,
|
||||
desc: 'Digitale Markenführung, Web und Design für den Mittelstand.',
|
||||
fullDesc: 'New Edge gestaltet Marken, Web-Erlebnisse und digitale Auftritte für mittelständische Unternehmen. Als Sponsor des BMP unterstützt die Agentur die Sichtbarkeit und das digitale Profil ausgezeichneter Unternehmen.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 22, height: 22, background: '#3a3a3a', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 900, fontSize: 11, fontFamily: FF }}>NE</span><span style={{ fontWeight: 700, fontSize: 15, color: '#005E67', fontFamily: FF }}>New Edge</span></span>),
|
||||
industry: 'Branding & Digital', location: 'Bayern', website: 'newedgebrand.com',
|
||||
},
|
||||
{
|
||||
id: 'vbw', name: 'vbw', role: 'Partner',
|
||||
desc: 'Die bayerische Wirtschaft — Spitzenverband der bayerischen Industrie.',
|
||||
fullDesc: 'Die vbw – Vereinigung der Bayerischen Wirtschaft e.V. ist der Spitzenverband der bayerischen Wirtschaft und vertritt rund 150 Mitgliedsverbände. Als strategischer Partner verleiht die vbw dem BMP gesamtwirtschaftliche Bedeutung und öffnet Türen zu Politik und Verbänden.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 40, background: '#1e3a8a' }}><span style={{ fontWeight: 900, color: '#fff', fontSize: 17, letterSpacing: '0.2em', fontFamily: FF }}>vbw</span></span>),
|
||||
industry: 'Wirtschaftsverband', location: 'München, Bayern', website: 'vbw-bayern.de', linkedin: 'https://linkedin.com/company/vbw-vereinigung-der-bayerischen-wirtschaft',
|
||||
id: 'moodtalk', name: 'Moodtalk', role: 'Sponsor', tier: 3,
|
||||
desc: 'Plattform für Teamkultur und Mitarbeiter-Feedback.',
|
||||
fullDesc: 'Moodtalk ist eine Plattform für Teamkultur, Stimmung und kontinuierliches Mitarbeiter-Feedback. Als Sponsor des BMP steht das Unternehmen für moderne, wertebasierte Unternehmensführung.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 20, height: 20, borderRadius: '50%', background: '#7c3aed', display: 'block' }} /><span style={{ fontWeight: 700, fontSize: 16, color: '#7c3aed', fontFamily: FF }}>moodtalk</span></span>),
|
||||
industry: 'HR & Software', location: 'Bayern', website: 'moodtalk.io',
|
||||
},
|
||||
{
|
||||
id: 'wirtschaftsbeirat', name: 'Wirtschaftsbeirat Bayern', role: 'Partner',
|
||||
desc: 'Im Dialog gestalten — Sprachrohr des bayerischen Unternehmertums.',
|
||||
fullDesc: 'Der Wirtschaftsbeirat Bayern e.V. ist die Interessenvertretung des bayerischen Unternehmertums und steht in direktem politischem Dialog mit der Staatsregierung. Er bringt sein Netzwerk von über 2.000 Mitgliedsunternehmen in die Nominierungsphase des BMP ein.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><svg width="18" height="18" viewBox="0 0 18 18"><rect x="1" y="1" width="16" height="16" fill="none" stroke="#1e4d8c" strokeWidth="1.5" /><path d="M4 9 L9 4 L14 9 L9 14Z" fill="#1e4d8c" /></svg><span style={{ fontSize: 10, fontWeight: 700, color: '#1e4d8c', textTransform: 'uppercase', letterSpacing: '0.06em', lineHeight: 1.2, fontFamily: FF }}>WIRTSCHAFTS<br />BEIRAT BAYERN</span></span>),
|
||||
industry: 'Unternehmensverband', location: 'München, Bayern', website: 'wirtschaftsbeirat.de',
|
||||
id: 'deutschebank', name: 'Deutsche Bank', role: 'Sponsor', tier: 3,
|
||||
desc: 'Partnerbank für die Finanzierung und Skalierung von KMU-Wachstum.',
|
||||
fullDesc: 'Die Deutsche Bank begleitet mittelständische Unternehmen als verlässlicher Finanzpartner durch alle Wachstumsphasen. Im Rahmen des BMP stellt sie ihr deutschlandweites Netzwerk, spezifische Mittelstandsprodukte und direkte Ansprechpartner für die Nominierten bereit.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><svg width="20" height="20" viewBox="0 0 20 20"><rect x="1" y="1" width="18" height="18" fill="none" stroke="#1d1d1b" strokeWidth="1.5" /><line x1="5" y1="15" x2="15" y2="5" stroke="#1d1d1b" strokeWidth="2" /></svg><span style={{ fontWeight: 600, fontSize: 15, color: '#1d1d1b', fontFamily: FB }}>Deutsche Bank</span></span>),
|
||||
industry: 'Bankwesen & Finanzen', location: 'Frankfurt a. M.', website: 'db.com', linkedin: 'https://linkedin.com/company/deutsche-bank',
|
||||
},
|
||||
{
|
||||
id: 'bionorica', name: 'Bionorica', role: 'Sponsor', tier: 3,
|
||||
desc: 'Weltmarktführer für pflanzliche Arzneimittel aus dem bayerischen Neumarkt.',
|
||||
fullDesc: 'Bionorica SE ist ein international agierendes Pharmaunternehmen mit Sitz in Neumarkt i. d. OPf. und Weltmarktführer bei pflanzlichen Arzneimitteln. Das Unternehmen selbst ist ein Paradebeispiel eines bayerischen Mittelständlers mit globalem Anspruch und verkörpert die Innovationskraft, die der BMP würdigt.',
|
||||
logo: (<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#16a34a" /><path d="M10 3 Q14 7 14 10 Q14 14 10 17 Q6 14 6 10 Q6 7 10 3Z" fill="white" opacity="0.8" /></svg><span style={{ fontWeight: 700, fontSize: 15, color: '#16a34a', fontFamily: FB }}>Bionorica<sup style={{ fontSize: 8 }}>®</sup></span></span>),
|
||||
industry: 'Pharmaindustrie', location: 'Neumarkt i.d.OPf., Bayern', website: 'bionorica.de', linkedin: 'https://linkedin.com/company/bionorica',
|
||||
},
|
||||
{
|
||||
id: 'primus', name: 'Primus', role: 'Sponsor', tier: 3,
|
||||
desc: 'Partner des Bayerischen Mittelstandspreises.',
|
||||
fullDesc: 'Primus unterstützt als Sponsor den Bayerischen Mittelstandspreis und sein Engagement für herausragende Unternehmen des bayerischen Mittelstands.',
|
||||
logo: (<span style={{ fontWeight: 900, fontSize: 18, letterSpacing: '0.04em', color: '#b8860b', fontFamily: 'Georgia, serif' }}>PRIMUS</span>),
|
||||
industry: 'Partner', location: 'Bayern', website: '',
|
||||
},
|
||||
];
|
||||
|
||||
const expertiseRows = [
|
||||
{ num: '01', label: 'Aktenstudium', body: 'Alle Einreichungen werden zunächst vollständig gesichtet und nach formalen Kriterien geprüft.' },
|
||||
{ num: '02', label: 'Scoring-Matrix', body: 'Jedes Jurymitglied bewertet unabhängig nach den vier gleichgewichteten Kriterien.' },
|
||||
{ num: '03', label: 'Jury-Plenum', body: 'In der gemeinsamen Sitzung werden Abweichungen diskutiert und Konsens gebildet.' },
|
||||
{ num: '04', label: 'Nominierungsliste', body: 'Die Jury beschließt einstimmig die Nominierten und den Preisträger.' },
|
||||
{ num: '01', label: 'Aktenstudium', body: 'Alle Einreichungen werden zunächst vollständig gesichtet und nach den festgelegten Kriterien geprüft.' },
|
||||
{ num: '02', label: 'Scoring-Matrix', body: 'Jedes Jurymitglied bewertet die Einreichungen unabhängig nach den festgelegten Kriterien.' },
|
||||
{ num: '03', label: 'Jury-Plenum', body: 'In der gemeinsamen Sitzung werden Argumente und Ansichten ausgetauscht, Eigenschaften verglichen und gemeinsam bewertet. Daraus entsteht die Liste der Finalisten.' },
|
||||
{ num: '04', label: 'Ergebnis', body: 'Die Gewinner des Bayerischen Mittelstandspreises werden nach vorgegebenem Punktesystem bestimmt, erweitert um Jury-Mitglieder aus der Praxis.' },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -447,7 +492,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%' }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: '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', 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 }} />
|
||||
|
||||
@@ -475,7 +520,7 @@ const Netzwerk: React.FC = () => {
|
||||
<p style={{ fontFamily: FF, fontSize: 18, color: 'rgba(255,255,255,0.5)', margin: 0 }}>des Bayerischen Mittelstandspreises</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr' }}>
|
||||
<div style={{ display: isMobile ? 'flex' : 'grid', gridTemplateColumns: isMobile ? undefined : '1fr 1fr', overflowX: isMobile ? 'auto' : undefined, scrollSnapType: isMobile ? 'x mandatory' : undefined, gap: isMobile ? 14 : 0, padding: isMobile ? '0 24px 28px' : 0, WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
|
||||
<PersonCard
|
||||
imgSrc="https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&q=80&w=800"
|
||||
imgAlt="Ilse Aigner"
|
||||
@@ -521,36 +566,68 @@ const Netzwerk: React.FC = () => {
|
||||
|
||||
|
||||
{/* ── 3. JURY-INTRO (editorial 2-col split) ────────────────────────────── */}
|
||||
<section style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '40% 60%', minHeight: isMobile ? 'auto' : 400, position: 'relative', overflow: 'hidden', isolation: 'isolate' }}>
|
||||
<MunichSkylineBg />
|
||||
{/* Left — Cream, stats */}
|
||||
<div style={{ background: CREAM, padding: isMobile ? '48px 24px' : '72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(4rem, 7vw, 6rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.04em', lineHeight: 1 }}>04</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 4 }}>Unabhängige Jurymitglieder</div>
|
||||
<section style={{ display: isMobile ? 'block' : 'grid', gridTemplateColumns: isMobile ? undefined : '40% 60%', minHeight: isMobile ? 'auto' : 400, position: 'relative', overflow: 'hidden', isolation: 'isolate', background: isMobile ? NAVY : undefined }}>
|
||||
{!isMobile && <MunichSkylineBg />}
|
||||
{isMobile && (
|
||||
<div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, backgroundImage: 'url(/munich-skyline.jpg)', backgroundRepeat: 'no-repeat', backgroundPosition: 'bottom center', backgroundSize: 'cover', opacity: 0.07 }} />
|
||||
)}
|
||||
{isMobile ? (
|
||||
/* Mobile: one cohesive navy module — copy + compact stat strip */
|
||||
<div style={{ padding: '48px 24px', position: 'relative', zIndex: 1 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 18 }}>Wer entscheidet?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.7rem, 8vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 22px' }}>
|
||||
UNABHÄNGIGE EXPERTISE FÜR DEN MITTELSTAND.
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 22 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.55)', lineHeight: 1.75, margin: 0 }}>
|
||||
Die Jury des Bayerischen Mittelstandspreises besteht ausschließlich aus ehrenamtlich tätigen Expertinnen und Experten. Kein Mitglied steht in wirtschaftlicher Verbindung zu einem Bewerber — Transparenz und Unparteilichkeit sind die Grundpfeiler unseres Verfahrens.
|
||||
</p>
|
||||
{/* Stat strip */}
|
||||
<div style={{ display: 'flex', marginTop: 32, paddingTop: 26, borderTop: '1px solid rgba(255,255,255,0.14)' }}>
|
||||
{[
|
||||
{ v: '11', l: 'Jurymitglieder' },
|
||||
{ v: 'Mehrstufig', l: 'Bewertungsverfahren' },
|
||||
{ v: '100%', l: 'Unabhängig' },
|
||||
].map((s, i) => (
|
||||
<div key={i} style={{ flex: 1, minWidth: 0, paddingLeft: i > 0 ? 14 : 0, borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.14)' : 'none' }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(2.2rem, 9vw, 3rem)', fontWeight: 900, color: GOLD, letterSpacing: '-0.03em', lineHeight: 1 }}>{s.v}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.5)', marginTop: 8, lineHeight: 1.3 }}>{s.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: '100%', height: 1, background: 'rgba(3,9,58,0.1)', margin: '32px 0' }} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(4rem, 7vw, 6rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.04em', lineHeight: 1 }}>100%</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 4 }}>Unabhängig & ehrenamtlich</div>
|
||||
</div>
|
||||
<div style={{ width: '100%', height: 1, background: 'rgba(3,9,58,0.1)', margin: '32px 0' }} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(4rem, 7vw, 6rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.04em', lineHeight: 1 }}>3</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 4 }}>Bewertungsrunden bis zur Gala</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right — Navy, editorial copy */}
|
||||
<div style={{ background: NAVY, padding: isMobile ? '48px 24px' : '72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, marginBottom: 20 }}>Wer entscheidet?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.6rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 24px' }}>
|
||||
UNABHÄNGIGE EXPERTISE FÜR DEN MITTELSTAND.
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 2, background: GOLD }} />
|
||||
<p style={{ marginTop: 24, fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.45)', lineHeight: 1.85 }}>
|
||||
Die Jury des Bayerischen Mittelstandspreises besteht ausschließlich aus ehrenamtlich tätigen Expertinnen und Experten. Kein Mitglied steht in wirtschaftlicher Verbindung zu einem Bewerber — Transparenz und Unparteilichkeit sind die Grundpfeiler unseres Verfahrens.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Left — Cream, stats */}
|
||||
<div style={{ background: CREAM, padding: '72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(5rem, 8.5vw, 7.5rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.04em', lineHeight: 1 }}>11</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 4 }}>Unabhängige Jurymitglieder</div>
|
||||
</div>
|
||||
<div style={{ width: '100%', height: 1, background: 'rgba(3,9,58,0.1)', margin: '32px 0' }} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(2.4rem, 4vw, 3.4rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.03em', lineHeight: 1 }}>Mehrstufig</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 8 }}>Bewertungsverfahren</div>
|
||||
</div>
|
||||
<div style={{ width: '100%', height: 1, background: 'rgba(3,9,58,0.1)', margin: '32px 0' }} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(5rem, 8.5vw, 7.5rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.04em', lineHeight: 1 }}>100%</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(16,24,40,0.4)', marginTop: 4 }}>Unabhängig & ehrenamtlich</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right — Navy, editorial copy */}
|
||||
<div style={{ background: NAVY, padding: '72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, marginBottom: 20 }}>Wer entscheidet?</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.6rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 24px' }}>
|
||||
UNABHÄNGIGE EXPERTISE FÜR DEN MITTELSTAND.
|
||||
</h2>
|
||||
<div style={{ width: 40, height: 2, background: GOLD }} />
|
||||
<p style={{ marginTop: 24, fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.45)', lineHeight: 1.85 }}>
|
||||
Die Jury des Bayerischen Mittelstandspreises besteht ausschließlich aus ehrenamtlich tätigen Expertinnen und Experten. Kein Mitglied steht in wirtschaftlicher Verbindung zu einem Bewerber — Transparenz und Unparteilichkeit sind die Grundpfeiler unseres Verfahrens.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -562,10 +639,10 @@ const Netzwerk: React.FC = () => {
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.95, margin: 0 }}>UNSERE JURY 2026</h2>
|
||||
</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.4)', lineHeight: 1.8, margin: 0 }}>
|
||||
Vier Expertinnen und Experten aus Wirtschaft, Wissenschaft und Verbänden — für einen vollständig unabhängigen Bewertungsprozess.
|
||||
Unabhängige Expertinnen und Experten aus Wirtschaft, Wissenschaft und Verbänden, für einen vollständig unabhängigen Bewertungsprozess.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)' }}>
|
||||
<div style={{ display: isMobile ? 'flex' : 'grid', gridTemplateColumns: isMobile ? undefined : 'repeat(4, 1fr)', overflowX: isMobile ? 'auto' : undefined, scrollSnapType: isMobile ? 'x mandatory' : undefined, gap: isMobile ? 14 : 0, padding: isMobile ? '24px 24px 28px' : 0, WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
|
||||
{juryMembers.map((member, idx) => (
|
||||
<JuryCard key={idx} member={member} idx={idx} />
|
||||
))}
|
||||
@@ -612,14 +689,27 @@ const Netzwerk: React.FC = () => {
|
||||
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: '#4A8FC9', display: 'block', marginBottom: 16 }}>Netzwerkqualität</span>
|
||||
<h2 style={{ fontFamily: FF, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', fontSize: 'clamp(2rem, 3.5vw, 3rem)', lineHeight: 0.95, margin: 0 }}>PARTNER & SPONSOREN.</h2>
|
||||
</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.4)', maxWidth: isMobile ? '100%' : 200, textAlign: isMobile ? 'left' : 'right', lineHeight: 1.6, margin: 0 }}>
|
||||
Ein starkes Netzwerk für einen starken Mittelstand. Klicken für Details.
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.4)', maxWidth: isMobile ? '100%' : 220, textAlign: isMobile ? 'left' : 'right', lineHeight: 1.6, margin: 0 }}>
|
||||
Partner in drei Kategorien: Hauptsponsoren, Medienpartner und weitere Sponsoren. Klicken für Details.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)' }}>
|
||||
{partners.map((partner, idx) => (
|
||||
<PartnerCell key={partner.id} partner={partner} idx={idx} total={partners.length} onClick={() => setSelectedPartner(partner)} />
|
||||
))}
|
||||
|
||||
{/* Tiered grid — continuous, ranks marked by label bars */}
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
{([
|
||||
{ tier: 1 as const, label: 'Hauptsponsoren', note: 'Premium', variant: 'lg' as const, cols: isMobile ? 1 : 2 },
|
||||
{ tier: 2 as const, label: 'Medienpartner', note: '', variant: 'md' as const, cols: isMobile ? 2 : 2 },
|
||||
{ tier: 3 as const, label: 'Weitere Sponsoren', note: '', variant: 'sm' as const, cols: isMobile ? 2 : 4 },
|
||||
]).map(t => {
|
||||
const items = partners.filter(p => p.tier === t.tier);
|
||||
return (
|
||||
<div key={t.tier} style={{ display: 'grid', gridTemplateColumns: `repeat(${t.cols}, 1fr)` }}>
|
||||
{items.map((p, i) => (
|
||||
<SponsorCell key={p.id} partner={p} variant={t.variant} idx={i} cols={t.cols} onClick={() => setSelectedPartner(p)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -627,12 +717,12 @@ const Netzwerk: React.FC = () => {
|
||||
{/* ── 7. SPONSORING-FORM ───────────────────────────────────────────────── */}
|
||||
<section id="sponsoring" style={{
|
||||
background: NAVY, overflow: 'hidden', position: 'relative',
|
||||
height: isMobile ? 'auto' : 'calc(100vh - 60px)',
|
||||
minHeight: isMobile ? 'auto' : 'calc(100vh - 60px)',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{ flex: 1, position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', minHeight: 0, overflow: isMobile ? 'visible' : 'hidden' }}>
|
||||
<div style={{ flex: 1, position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', minHeight: 0, overflow: isMobile ? 'visible' : 'visible' }}>
|
||||
{/* Left — pitch */}
|
||||
<div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: isMobile ? 'visible' : 'hidden' }}>
|
||||
<div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'visible' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 8 }}>Wachstum durch Partnerschaft</span>
|
||||
<h2 style={{ fontFamily: FF, fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', fontSize: 'clamp(1.6rem, 2.4vw, 2.4rem)', lineHeight: 1.0, margin: '0 0 12px' }}>WIR FREUEN UNS ÜBER NEUE SPONSOREN.</h2>
|
||||
<div style={{ width: 36, height: 2, background: GOLD, margin: '0 0 14px', flexShrink: 0 }} />
|
||||
@@ -656,7 +746,7 @@ const Netzwerk: React.FC = () => {
|
||||
{/* Center divider */}
|
||||
{!isMobile && <div style={{ background: 'rgba(255,255,255,0.07)' }} />}
|
||||
{/* Right — gold form panel */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', overflow: isMobile ? 'visible' : 'hidden', minHeight: 0, position: 'relative', background: 'linear-gradient(160deg,#DDB84A 0%,#C9A227 52%,#A87800 100%)' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', overflow: 'visible', minHeight: 0, position: 'relative', background: 'linear-gradient(160deg,#DDB84A 0%,#C9A227 52%,#A87800 100%)' }}>
|
||||
<svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }} aria-hidden="true">
|
||||
<defs>
|
||||
<pattern id="sponsoringCross" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
|
||||
@@ -26,13 +26,13 @@ const Participation: React.FC = () => {
|
||||
alt="Teilnahme BMP"
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', inset: 0, background: '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', 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', bottom: 0, left: 0, right: 0, height: 2, background: `linear-gradient(to right, ${GOLD}, rgba(239,191,4,0.3), transparent)` }} />
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '0 24px 48px' : '0 80px 80px', maxWidth: 800 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
|
||||
<div style={{ width: 36, height: 2, background: GOLD }} />
|
||||
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#EFBF04' }}>Phase 2026</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#EFBF04' }}>Bewerbungsphase 2026</span>
|
||||
</div>
|
||||
<h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 6vw, 5rem)' : 'clamp(2.8rem, 6vw, 5rem)', fontWeight: 900, color: '#fff', lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 0 24px' }}>
|
||||
GESTALTEN SIE<br />BAYERNS ZUKUNFT.
|
||||
@@ -79,7 +79,7 @@ const Participation: React.FC = () => {
|
||||
</Link>
|
||||
</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, textAlign: isMobile ? 'left' : 'right' }}>
|
||||
Vier klar definierte Kriterien — erfüllen Sie alle, bewerben Sie sich kostenlos und ohne bürokratischen Aufwand.
|
||||
Vier klar definierte Kriterien: Erfüllen Sie alle, bewerben Sie sich kostenlos und ohne bürokratischen Aufwand.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +88,7 @@ const Participation: React.FC = () => {
|
||||
<div style={{ position: 'relative', zIndex: 1, borderBottom: `1px solid #D0D5DD` }}>
|
||||
{[
|
||||
{ num: '01', title: 'Standort Bayern', body: 'Sitz oder wesentliche Betriebsstätte im Freistaat Bayern.', Icon: MapPin },
|
||||
{ num: '02', title: 'KMU-Größe', body: '10 bis 500 Beschäftigte — klassischer Mittelstand im privatwirtschaftlichen Bereich.', Icon: Users },
|
||||
{ num: '02', title: 'KMU-Größe', body: '50 bis 1.500 Mitarbeiter: klassischer Mittelstand im privatwirtschaftlichen Bereich.', Icon: Users },
|
||||
{ num: '03', title: 'Marktreife', body: 'Mindestens drei vollständige Geschäftsjahre am Markt tätig.', Icon: TrendingUp },
|
||||
{ num: '04', title: 'Privatwirtschaft', body: 'Keine überwiegende Zugehörigkeit zu staatlichen oder kommunalen Trägern.', Icon: Building2 },
|
||||
].map((item, i, arr) => {
|
||||
@@ -99,6 +99,28 @@ const Participation: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Zusätzliche Hinweise: Verbund + Wiederbewerber */}
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '28px 24px' : '40px 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, borderBottom: '1px solid #D0D5DD' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
|
||||
<Building2 size={18} style={{ color: GOLD, flexShrink: 0, marginTop: 3 }} strokeWidth={1.7} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 13, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Verbund & Gemeinschaft</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: 0 }}>
|
||||
Oder Sie sind ein Verbund bzw. eine Gemeinschaft von mittelständischen Unternehmen oder von mittelständischen Unternehmen und Organisationen/Institutionen, die einen Schwerpunkt in Bayern hat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
|
||||
<UserCheck size={18} style={{ color: GOLD, flexShrink: 0, marginTop: 3 }} strokeWidth={1.7} />
|
||||
<div>
|
||||
<div style={{ fontFamily: FF, fontSize: 13, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Erneute Bewerbung</div>
|
||||
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: 0 }}>
|
||||
Nominierte ohne Gewinn können sich sofort erneut bewerben. Preisträger können sich nach 7 Jahren erneut bewerben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA nudge */}
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '24px 24px' : '32px 80px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
@@ -122,8 +144,8 @@ const Participation: React.FC = () => {
|
||||
{/* TOP: editorial split — image left (45%) / header right (55%) */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%', minHeight: isMobile ? 'auto' : 480 }}>
|
||||
|
||||
{/* Left — full-bleed image with gradient blend into navy on the right */}
|
||||
<div style={{ position: 'relative', overflow: 'hidden' }}>
|
||||
{/* 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
|
||||
src="/images/buehne-gewinner.jpg"
|
||||
alt="Jury-Bewertung BMP"
|
||||
@@ -131,32 +153,60 @@ const Participation: React.FC = () => {
|
||||
/>
|
||||
{/* Dark overlay for depth */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(3,9,58,0.35) 0%, rgba(3,9,58,0.15) 50%, rgba(3,9,58,0.35) 100%)' }} />
|
||||
{/* Right-side blend into navy */}
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, transparent 50%, rgba(3,9,58,0.7) 80%, #111D55 100%)' }} />
|
||||
{/* Right-side blend into navy (desktop) */}
|
||||
{!isMobile && <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, transparent 50%, rgba(3,9,58,0.7) 80%, #111D55 100%)' }} />}
|
||||
{/* Mobile heading shadow (bottom-left) */}
|
||||
{isMobile && <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(3,9,58,0.94) 0%, rgba(3,9,58,0.55) 38%, rgba(3,9,58,0.12) 72%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)' }} />}
|
||||
{/* Bottom blend for continuity with grid below */}
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 120, background: 'linear-gradient(to bottom, transparent, #111D55)' }} />
|
||||
{/* Heading overlay — mobile only */}
|
||||
{isMobile && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 24px', zIndex: 2 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>Bewertung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 9vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.97, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
|
||||
UNSERE<br />KRITERIEN.
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right — overline + headline + intro */}
|
||||
<div style={{ padding: isMobile ? '48px 24px' : '80px 80px 72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Bewertung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2.4rem, 4vw, 3.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.97, margin: '0 0 28px' }}>
|
||||
UNSERE<br />KRITERIEN.
|
||||
</h2>
|
||||
<div style={{ padding: isMobile ? '32px 24px 40px' : '80px 80px 72px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>Bewertung</span>
|
||||
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2.4rem, 4vw, 3.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.97, margin: '0 0 28px' }}>
|
||||
UNSERE<br />KRITERIEN.
|
||||
</h2>
|
||||
</>
|
||||
)}
|
||||
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 28 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.68)', lineHeight: 1.8, margin: 0, maxWidth: 420 }}>
|
||||
Vier gleichgewichtete Säulen — bewertet durch eine vollständig unabhängige Expertenjury aus Wirtschaft, Wissenschaft und Gesellschaft.
|
||||
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.68)', lineHeight: 1.8, margin: 0, maxWidth: 420 }}>
|
||||
Vier zentrale Säulen, bewertet durch eine vollständig unabhängige Expertenjury aus Wirtschaft, Wissenschaft und Gesellschaft.
|
||||
<br />
|
||||
<br />
|
||||
Die Kriterien werden nicht gleich gewichtet.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.der-bayerische-mittelstandspreis.de/der-preis/kriterien/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: GOLD, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 28, borderBottom: `1px solid rgba(239,191,4,0.4)`, paddingBottom: 2, alignSelf: 'flex-start' }}
|
||||
onMouseEnter={e => ((e.currentTarget as HTMLElement).style.opacity = '0.8')}
|
||||
onMouseLeave={e => ((e.currentTarget as HTMLElement).style.opacity = '1')}
|
||||
>
|
||||
Kriterien & Bewertung <ArrowRight size={13} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM: full-width 4-column criteria grid */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', borderTop: '1px solid rgba(255,255,255,0.07)', position: 'relative' }}>
|
||||
{[
|
||||
{ percentage: '25%', title: 'Innovations\u00ADkraft', desc: 'Zukunftsweisende Produkte, Dienstleistungen oder interne Prozessinnovationen.' },
|
||||
{ percentage: '25%', title: 'Nachhaltigkeit', desc: 'Ökologische Verantwortung und Ressourcen-Effizienz im operativen Kern.' },
|
||||
{ percentage: '25%', title: 'Unternehmens\u00ADkultur', desc: 'Mitarbeiterbindung, Aus- und Weiterbildung sowie wertebasierte Führung.' },
|
||||
{ percentage: '25%', title: 'Regionale Wurzeln', desc: 'Engagement am Standort Bayern und Beitrag zur regionalen Wertschöpfung.' },
|
||||
{ title: 'Innovations\u00ADkraft', desc: 'Zukunftsweisende Produkte, Dienstleistungen oder interne Prozessinnovationen.' },
|
||||
{ title: 'Nachhaltigkeit', desc: 'Ökologische Verantwortung und Ressourcen-Effizienz im operativen Kern.' },
|
||||
{ title: 'Unternehmens\u00ADkultur', desc: 'Mitarbeiterbindung, Aus- und Weiterbildung sowie wertebasierte Führung.' },
|
||||
{ title: 'Regionale Wurzeln', desc: 'Engagement am Standort Bayern und Beitrag zur regionalen Wertschöpfung.' },
|
||||
].map((crit, i) => (
|
||||
<CriteriaCell key={i} crit={crit} idx={i} />
|
||||
))}
|
||||
@@ -170,26 +220,46 @@ const Participation: React.FC = () => {
|
||||
|
||||
{/* ── DATES BANNER ─────────────────────────────────────────────────────── */}
|
||||
<section id="fristen" style={{ background: GOLD }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1px 1fr 1px 1fr 1px 1fr', maxWidth: 1200, margin: '0 auto' }}>
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '48px 56px' }}>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 6 }}>Wichtige Termine 2026</h3>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', margin: 0 }}>Planen Sie Ihre Teilnahme rechtzeitig.</p>
|
||||
{isMobile ? (
|
||||
/* Mobile: slim horizontal bar */
|
||||
<div style={{ padding: '24px 22px 26px' }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 18 }}>Wichtige Termine 2026</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{[
|
||||
{ date: '30. Juni 2026', label: 'Bewerbungsschluss' },
|
||||
{ date: 'August 2026', label: 'Nominierte' },
|
||||
{ date: 'Oktober 2026', label: 'Gala-Verleihung' },
|
||||
].map((d, i) => (
|
||||
<div key={i} style={{ flex: 1, minWidth: 0, paddingLeft: i > 0 ? 14 : 0, borderLeft: i > 0 ? '1px solid rgba(3,9,58,0.2)' : 'none' }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 17, fontWeight: 900, color: '#101828', letterSpacing: '-0.02em', lineHeight: 1.12, marginBottom: 6 }}>{d.date}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.55)', lineHeight: 1.25 }}>{d.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ background: 'rgba(3,9,58,0.12)' }} />
|
||||
{[
|
||||
{ date: '30. Juni 2026', label: 'Bewerbungsschluss' },
|
||||
{ date: 'August 2026', label: 'Bekanntgabe Nominierte' },
|
||||
{ date: 'Oktober 2026', label: 'Gala-Verleihung' },
|
||||
].map((d, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<div style={{ padding: isMobile ? '24px 24px' : '48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderTop: isMobile ? '1px solid rgba(3,9,58,0.12)' : 'none' }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.4rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.02em', marginBottom: 6 }}>{d.date}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.55)' }}>{d.label}</div>
|
||||
</div>
|
||||
{i < 2 && !isMobile && <div style={{ background: 'rgba(3,9,58,0.12)' }} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Desktop: full banner */
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr 1px 1fr 1px 1fr', maxWidth: 1200, margin: '0 auto' }}>
|
||||
<div style={{ padding: '48px 56px' }}>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 6 }}>Wichtige Termine 2026</h3>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', margin: 0 }}>Planen Sie Ihre Teilnahme rechtzeitig.</p>
|
||||
</div>
|
||||
<div style={{ background: 'rgba(3,9,58,0.12)' }} />
|
||||
{[
|
||||
{ date: '30. Juni 2026', label: 'Bewerbungsschluss' },
|
||||
{ date: 'August 2026', label: 'Bekanntgabe Nominierte' },
|
||||
{ date: 'Oktober 2026', label: 'Gala-Verleihung' },
|
||||
].map((d, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<div style={{ padding: '48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<div style={{ fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.4rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.02em', marginBottom: 6 }}>{d.date}</div>
|
||||
<div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.55)' }}>{d.label}</div>
|
||||
</div>
|
||||
{i < 2 && <div style={{ background: 'rgba(3,9,58,0.12)' }} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── FORM SECTION ─────────────────────────────────────────────────────── */}
|
||||
@@ -203,19 +273,19 @@ const Participation: React.FC = () => {
|
||||
</h2>
|
||||
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.68)', lineHeight: 1.8, maxWidth: 400, marginBottom: 48 }}>
|
||||
Sie können sich selbst bewerben oder ein herausragendes Unternehmen vorschlagen. Die Teilnahme ist vollständig kostenfrei.
|
||||
Sie können sich selbst bewerben oder ein herausragendes Unternehmen vorschlagen. Firmenverbunde können sich ebenfalls bewerben. Die Teilnahme ist vollständig kostenfrei.
|
||||
</p>
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
{[
|
||||
{ num: '01', label: 'Kostenfrei', desc: 'Keine Teilnahmegebühr' },
|
||||
{ num: '01', label: '0 EUR', desc: 'Teilnahmegebühr' },
|
||||
{ num: '02', label: 'Schnell', desc: 'Ca. 30–45 Minuten' },
|
||||
{ num: '03', label: 'Mehrstufig', desc: 'Transparenter Prozess' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: '0 16px', padding: '16px 0', borderBottom: '1px solid rgba(255,255,255,0.06)', alignItems: 'center' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(239,191,4,0.5)', letterSpacing: '0.1em' }}>{item.num}</span>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.62)' }}>{item.desc}</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.62)' }}>{item.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -270,7 +340,10 @@ const Participation: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '16px 20px 20px' : '14px 56px 18px', display: 'flex', justifyContent: 'center', textAlign: 'center', borderTop: '1px solid rgba(255,255,255,0.06)', flexShrink: 0 }}>
|
||||
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '16px 20px 20px' : '14px 56px 18px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, justifyContent: 'center', textAlign: 'center', borderTop: '1px solid rgba(255,255,255,0.06)', flexShrink: 0 }}>
|
||||
<span style={{ fontFamily: FB, fontSize: 14, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, maxWidth: 520 }}>
|
||||
Sie haben Ihre Unterlagen bereits als PDF vorbereitet? Laden Sie sie direkt hoch, statt das Formular auszufüllen.
|
||||
</span>
|
||||
<Link to="/formular-hochladen" style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(239,191,4,0.7)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1px solid rgba(239,191,4,0.3)', paddingBottom: 1 }}>
|
||||
Formular hochladen →
|
||||
</Link>
|
||||
@@ -313,7 +386,7 @@ function QualRow({ item, Icon, last }: { item: { num: string; title: string; bod
|
||||
|
||||
// ── CriteriaCell ──────────────────────────────────────────────────────────────
|
||||
|
||||
function CriteriaCell({ crit, idx }: { crit: { percentage: string; title: string; desc: string }; idx: number }) {
|
||||
function CriteriaCell({ crit, idx }: { crit: { title: string; desc: string }; idx: number }) {
|
||||
const [hovered, setHovered] = React.useState(false);
|
||||
const isMobileCell = useIsMobile();
|
||||
return (
|
||||
@@ -324,7 +397,6 @@ function CriteriaCell({ crit, idx }: { crit: { percentage: string; title: string
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24 }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.50)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>0{idx + 1}</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 28, fontWeight: 900, color: GOLD, lineHeight: 1, letterSpacing: '-0.02em' }}>{crit.percentage}</span>
|
||||
</div>
|
||||
<div style={{ width: hovered ? '100%' : 28, height: 1, background: hovered ? 'rgba(239,191,4,0.6)' : 'rgba(239,191,4,0.3)', marginBottom: 20, transition: 'width 0.5s ease' }} />
|
||||
<h4 style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.08em', lineHeight: 1.3, marginBottom: 14 }}>{crit.title}</h4>
|
||||
@@ -359,16 +431,66 @@ function BewerbungswegeSection() {
|
||||
HIER KÖNNEN SIE SICH<br />BEWERBEN ODER EIN<br />UNTERNEHMEN VORSCHLAGEN.
|
||||
</h2>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
|
||||
Als Unternehmen haben Sie zwei Möglichkeiten: Sie werden von einem unterstützenden Partner oder einer Institution vorgeschlagen — oder Sie ergreifen selbst die Initiative und füllen unsere Anmeldung aus. Die Teilnahme ist in allen Fällen kostenfrei.
|
||||
Als Unternehmen haben Sie zwei Möglichkeiten: Sie werden von einem unterstützenden Partner oder einer Institution vorgeschlagen, oder Sie ergreifen selbst die Initiative und füllen unsere Anmeldung aus. Die Teilnahme ist in allen Fällen kostenfrei.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3 Wege */}
|
||||
<div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)' }}>
|
||||
{/* 3 Wege — premium swipe cards on mobile, 3-col grid on desktop */}
|
||||
<div style={{ position: 'relative', zIndex: 1, display: isMobile ? 'flex' : 'grid', gridTemplateColumns: isMobile ? undefined : 'repeat(3, 1fr)', overflowX: isMobile ? 'auto' : undefined, scrollSnapType: isMobile ? 'x mandatory' : undefined, WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none', gap: isMobile ? 14 : 0, padding: isMobile ? '28px 24px 36px' : 0 }}>
|
||||
|
||||
{/* ── MOBILE: unified premium cards ── */}
|
||||
{isMobile && ([
|
||||
{ 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) => {
|
||||
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)' }}>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '22px 22px 0', position: 'relative' }}>
|
||||
{w.featured && (
|
||||
<span style={{ position: 'absolute', top: 22, right: 22, fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#101828', background: GOLD, padding: '5px 10px', borderRadius: 100 }}>Empfohlen</span>
|
||||
)}
|
||||
<div style={{ width: 46, height: 46, borderRadius: 12, background: w.featured ? GOLD : NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
|
||||
<Icon size={20} style={{ color: w.featured ? '#101828' : GOLD }} strokeWidth={1.6} />
|
||||
</div>
|
||||
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: w.featured ? '#A87800' : 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 8 }}>{w.weg}</span>
|
||||
<h3 style={{ fontFamily: FF, fontSize: '1.45rem', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 10px' }}>{w.title}</h3>
|
||||
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, margin: '0 0 20px' }}>{w.desc}</p>
|
||||
<div style={{ width: 36, height: 2, background: GOLD }} />
|
||||
</div>
|
||||
{/* Detail list */}
|
||||
<div style={{ padding: '4px 22px 0', flex: 1 }}>
|
||||
{w.checkItems && w.checkItems.map((inst, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 0', borderBottom: '1px solid rgba(17,29,85,0.08)' }}>
|
||||
<div style={{ width: 18, height: 18, borderRadius: 5, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
|
||||
<svg width="9" height="9" viewBox="0 0 8 8"><polyline points="1,4 3,6 7,2" stroke="#101828" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</div>
|
||||
<span style={{ fontFamily: FB, fontSize: 16, color: 'rgba(16,24,40,0.7)', lineHeight: 1.5 }}>{inst}</span>
|
||||
</div>
|
||||
))}
|
||||
{w.kvItems && w.kvItems.map((item, i) => (
|
||||
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, padding: '13px 0', borderBottom: '1px solid rgba(17,29,85,0.08)' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.06em', flexShrink: 0 }}>{item.k}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 15, color: 'rgba(16,24,40,0.5)', textAlign: 'right' }}>{item.v}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* CTA */}
|
||||
<div style={{ padding: '18px 22px 22px' }}>
|
||||
<a href="#bewerben" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, minHeight: 52, background: GOLD, color: '#101828', fontFamily: FF, fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', textDecoration: 'none', borderRadius: 10 }}>{w.cta} <ArrowRight size={14} /></a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ── DESKTOP: original 3 columns ── */}
|
||||
{!isMobile && (<>
|
||||
|
||||
{/* ── Weg A: Vorschlag ── */}
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', borderRight: isMobile ? 'none' : '1px solid #D0D5DD', borderBottom: isMobile ? '1px solid #D0D5DD' : 'none', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', borderRight: '1px solid #D0D5DD', display: 'flex', flexDirection: 'column', ...(isMobile ? { minWidth: '83vw', maxWidth: '83vw', flexShrink: 0, scrollSnapAlign: 'start' } : {}) }}>
|
||||
<div style={{ width: 44, height: 44, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
|
||||
<Send size={18} style={{ color: GOLD }} strokeWidth={1.5} />
|
||||
</div>
|
||||
@@ -403,7 +525,7 @@ function BewerbungswegeSection() {
|
||||
</div>
|
||||
|
||||
{/* ── Weg B: Initiativbewerbung ── */}
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', borderRight: isMobile ? 'none' : '1px solid #D0D5DD', borderBottom: isMobile ? '1px solid rgba(255,255,255,0.1)' : 'none', display: 'flex', flexDirection: 'column', background: NAVY }}>
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', borderRight: '1px solid #D0D5DD', display: 'flex', flexDirection: 'column', background: NAVY, ...(isMobile ? { minWidth: '83vw', maxWidth: '83vw', flexShrink: 0, scrollSnapAlign: 'start' } : {}) }}>
|
||||
<div style={{ width: 44, height: 44, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
|
||||
<UserCheck size={18} style={{ color: '#101828' }} strokeWidth={1.5} />
|
||||
</div>
|
||||
@@ -417,14 +539,14 @@ function BewerbungswegeSection() {
|
||||
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', flex: 1 }}>
|
||||
{[
|
||||
{ label: 'Kostenfrei', desc: 'Keine Teilnahmegebühr' },
|
||||
{ label: '0 EUR', desc: 'Teilnahmegebühr' },
|
||||
{ label: 'Eigeninitiative', desc: 'Direkt ohne Intermediär' },
|
||||
{ label: 'Für Unternehmer', desc: 'Inhabergeführte KMU in Bayern' },
|
||||
{ label: 'Deadline', desc: '30. Juni 2026' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.07em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.50)' }}>{item.desc}</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.07em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.50)' }}>{item.desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -440,16 +562,16 @@ function BewerbungswegeSection() {
|
||||
</div>
|
||||
|
||||
{/* ── Weg C: Sonderpreis ── */}
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ padding: isMobile ? '32px 24px' : '56px 48px 56px', display: 'flex', flexDirection: 'column', ...(isMobile ? { minWidth: '83vw', maxWidth: '83vw', flexShrink: 0, scrollSnapAlign: 'start' } : {}) }}>
|
||||
<div style={{ width: 44, height: 44, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
|
||||
<Star size={18} style={{ color: GOLD }} strokeWidth={1.5} />
|
||||
</div>
|
||||
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 10 }}>Weg 03 — Sonderpreis</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 10 }}>Weg 03 · Sonderpreis</span>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 8px' }}>
|
||||
Bavarian<br />Future Award
|
||||
</h3>
|
||||
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.7, margin: '0 0 32px' }}>
|
||||
Sonderpreis, initiiert durch die Studierenden der HAM — Hochschule für angewandtes Management.
|
||||
Sonderpreis, initiiert durch die Studierenden der HAM, Hochschule für angewandtes Management.
|
||||
</p>
|
||||
|
||||
<div style={{ borderTop: '1px solid #D0D5DD', flex: 1 }}>
|
||||
@@ -460,8 +582,8 @@ function BewerbungswegeSection() {
|
||||
{ label: 'Kategorie', desc: 'Zukunft & Innovation' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '14px 0', borderBottom: '1px solid #D0D5DD' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.07em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 15, color: 'rgba(16,24,40,0.45)' }}>{item.desc}</span>
|
||||
<span style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.07em' }}>{item.label}</span>
|
||||
<span style={{ fontFamily: FB, fontSize: 16, color: 'rgba(16,24,40,0.45)' }}>{item.desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -476,6 +598,8 @@ function BewerbungswegeSection() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -49,10 +49,7 @@ export default function Preistraeger() {
|
||||
|
||||
{/* Filter Section */}
|
||||
<div style={{ background: '#fff', padding: isMobile ? '32px 24px 24px' : '48px 80px 32px' }}>
|
||||
<p style={{ fontFamily: FF, fontSize: 15, color: GRAY, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Alle Preisträger</p>
|
||||
<h1 style={{ fontFamily: FF, fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 32 }}>
|
||||
AUSGEZEICHNETE UNTERNEHMEN IM ÜBERBLICK
|
||||
</h1>
|
||||
{/* #93: Headline entfernt — Seitenname steht bereits oben im Breadcrumb. */}
|
||||
|
||||
{/* Year Tabs */}
|
||||
<div style={{ display: 'flex', flexWrap: isMobile ? 'nowrap' : 'wrap', gap: 0, marginBottom: 32, borderBottom: `2px solid ${BORDER}`, overflowX: isMobile ? 'auto' : 'visible', WebkitOverflowScrolling: 'touch', maxWidth: '100%' }}>
|
||||
@@ -140,7 +137,19 @@ export default function Preistraeger() {
|
||||
Keine Preisträger für diese Auswahl.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 0 }}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? undefined : 'repeat(4, 1fr)',
|
||||
gridAutoFlow: isMobile ? 'column' : undefined,
|
||||
gridTemplateRows: isMobile ? 'repeat(2, 1fr)' : undefined,
|
||||
gridAutoColumns: isMobile ? '74vw' : undefined,
|
||||
overflowX: isMobile ? 'auto' : undefined,
|
||||
scrollSnapType: isMobile ? 'x mandatory' : undefined,
|
||||
gap: isMobile ? 8 : 0,
|
||||
padding: isMobile ? '0 16px 8px' : 0,
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
scrollbarWidth: 'none',
|
||||
}}>
|
||||
{filtered.map(w => (
|
||||
<WinnerCard key={w.id} winner={w} />
|
||||
))}
|
||||
@@ -204,10 +213,11 @@ export default function Preistraeger() {
|
||||
|
||||
function WinnerCard({ winner }: { winner: import('@/data/winners').Winner }) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
return (
|
||||
<Link
|
||||
to={`/preistraeger/${winner.slug}`}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: 300, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.07)' }}
|
||||
style={{ textDecoration: 'none', display: 'block', position: 'relative', height: isMobile ? 260 : 340, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.07)', scrollSnapAlign: isMobile ? 'start' : undefined }}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
@@ -224,15 +234,15 @@ function WinnerCard({ winner }: { winner: import('@/data/winners').Winner }) {
|
||||
{/* Text */}
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, padding: '18px 22px', width: '100%', boxSizing: 'border-box' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
|
||||
<Trophy size={11} style={{ color: GOLD, flexShrink: 0 }} fill={GOLD} />
|
||||
<span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: GOLD, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
|
||||
<Trophy size={12} style={{ color: GOLD, flexShrink: 0 }} fill={GOLD} />
|
||||
<span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: GOLD, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
|
||||
{winner.year} · {winner.type}
|
||||
</span>
|
||||
</div>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: '#fff', margin: 0, lineHeight: 1.3, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 700, color: '#fff', margin: 0, lineHeight: 1.3, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
|
||||
{winner.name}
|
||||
</h3>
|
||||
<p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.82)', margin: '4px 0 0', lineHeight: 1.3 }}>
|
||||
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.82)', margin: '4px 0 0', lineHeight: 1.3 }}>
|
||||
{winner.category}
|
||||
</p>
|
||||
|
||||
@@ -241,8 +251,8 @@ function WinnerCard({ winner }: { winner: import('@/data/winners').Winner }) {
|
||||
marginTop: 12,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 7,
|
||||
background: NAVY, color: '#fff',
|
||||
padding: '8px 16px', borderRadius: 999,
|
||||
fontSize: 15, fontWeight: 700, fontFamily: FF,
|
||||
padding: '9px 18px', borderRadius: 999,
|
||||
fontSize: 16, fontWeight: 700, fontFamily: FF,
|
||||
textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||
opacity: hovered ? 1 : 0,
|
||||
transform: hovered ? 'translateY(0)' : 'translateY(6px)',
|
||||
|
||||
@@ -254,8 +254,9 @@ const Press: React.FC = () => {
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background:
|
||||
'linear-gradient(to right, #020930 0%, rgba(2,9,48,0.90) 38%, rgba(2,9,48,0.18) 65%, transparent 100%)',
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user