syntaxbullet/bmp-website-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor typography styles across multiple pages to use CSS classes for consistency and maintainability

Browse Source 
- Updated Participation.tsx to replace inline styles with class names for headings and paragraphs.
- Refactored Preistraeger.tsx to utilize CSS classes for typography instead of inline styles.
- Modified PreistraegerDetail.tsx to implement class-based styling for headings and text elements.
- Adjusted Press.tsx to standardize typography using CSS classes, enhancing readability and maintainability.
This commit is contained in:
syntaxbullet
2026-07-13 21:46:56 +02:00
parent ae76a32e99
commit b57e08940d
26 changed files with 426 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/app/(frontend)/globals.css
View File

@@ -24,6 +24,17 @@
--color-input: var(--input);
--color-ring: var(--ring);
--font-size-eyebrow: var(--type-eyebrow);
--font-size-caption: var(--type-caption);
--font-size-small: var(--type-small);
--font-size-body: var(--type-step-0);
--font-size-lead: var(--type-step-1);
--font-size-card-title: var(--type-step-2);
--font-size-subtitle: var(--type-step-3);
--font-size-section-title: var(--type-step-4);
--font-size-page-title: var(--type-step-6);
--font-size-display: var(--type-step-7);
--radius-lg: 0.5rem;
--radius-md: calc(0.5rem - 2px);
--radius-sm: calc(0.5rem - 4px);
@@ -43,11 +54,45 @@
--muted: #f1f5f9;
--muted-foreground: #64748b;
--accent: #EFBF04;
--accent-foreground: #ffffff;
--accent-foreground: #101828;
--destructive: #ef4444;
--border: #e2e8f0;
--input: #e2e8f0;
--ring: #03093A;
/* Fluid type scale: 320px -> 1440px, 16px -> 18px body. */
--type-eyebrow: clamp(0.6875rem, 0.6696rem + 0.0893vw, 0.75rem);
--type-caption: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
--type-small: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
--type-step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
--type-step-1: clamp(1.125rem, 1.0446rem + 0.4018vw, 1.4063rem);
--type-step-2: clamp(1.2656rem, 1.125rem + 0.7031vw, 1.7578rem);
--type-step-3: clamp(1.4238rem, 1.2028rem + 1.1049vw, 2.1973rem);
--type-step-4: clamp(1.6018rem, 1.2747rem + 1.6354vw, 2.7466rem);
--type-step-5: clamp(1.802rem, 1.336rem + 2.3303vw, 3.4332rem);
--type-step-6: clamp(2.0273rem, 1.3804rem + 3.2346vw, 4.2915rem);
--type-step-7: clamp(2.2807rem, 1.3996rem + 4.4053vw, 5.3644rem);
--leading-display: 0.98;
--leading-heading: 1.05;
--leading-body: 1.7;
--leading-small: 1.55;
/* Semantic text roles. Gold stays bright on dark surfaces and decorative uses. */
--text-heading: #101828;
--text-body: #344054;
--text-secondary: #475467;
--text-muted: #596579;
--text-link: #111D55;
--text-link-hover: #051A87;
--text-eyebrow-light: #285F8C;
--text-brand-on-light: #765600;
--text-brand-on-dark: #EFBF04;
--text-on-accent: #101828;
--text-inverse: #ffffff;
--text-inverse-secondary: rgba(255, 255, 255, 0.72);
--text-inverse-muted: rgba(255, 255, 255, 0.65);
--text-danger: #B91C1C;
}
.dark {
@@ -64,7 +109,7 @@
--muted: #1e293b;
--muted-foreground: #94a3b8;
--accent: #EFBF04;
--accent-foreground: #ffffff;
--accent-foreground: #101828;
--destructive: #7f1d1d;
--border: rgba(255, 255, 255, 0.1);
--input: rgba(255, 255, 255, 0.15);
@@ -77,6 +122,9 @@
}
body {
@apply bg-background text-foreground font-body;
color: var(--text-body);
font-size: var(--type-step-0);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
@@ -88,6 +136,7 @@
}
h1, h2, h3, h4, h5, h6 {
@apply font-display font-bold;
color: var(--text-heading);
}
blockquote, q,
@@ -106,6 +155,99 @@
}
}
@layer components {
.type-display,
.type-page-title,
.type-section-title,
.type-subtitle,
.type-card-title,
.type-eyebrow {
font-family: var(--font-display);
font-weight: 700;
hyphens: auto;
overflow-wrap: anywhere;
}
.type-display {
font-size: var(--type-step-7);
line-height: var(--leading-display);
letter-spacing: -0.03em;
}
.type-page-title {
font-size: var(--type-step-6);
line-height: var(--leading-display);
letter-spacing: -0.03em;
}
.type-section-title {
font-size: var(--type-step-4);
line-height: var(--leading-heading);
letter-spacing: -0.025em;
}
.type-subtitle {
font-size: var(--type-step-3);
line-height: var(--leading-heading);
letter-spacing: -0.02em;
}
.type-card-title {
font-size: var(--type-step-2);
line-height: 1.1;
letter-spacing: -0.02em;
}
.type-lead,
.type-body,
.type-small,
.type-caption {
font-family: var(--font-body);
font-weight: 400;
overflow-wrap: anywhere;
}
.type-lead {
font-size: var(--type-step-1);
line-height: var(--leading-body);
}
.type-body {
font-size: var(--type-step-0);
line-height: var(--leading-body);
}
.type-small {
font-size: var(--type-small);
line-height: var(--leading-small);
}
.type-caption {
font-size: var(--type-caption);
line-height: var(--leading-small);
}
.type-eyebrow {
font-size: var(--type-eyebrow);
line-height: 1.3;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.text-role-heading { color: var(--text-heading); }
.text-role-body { color: var(--text-body); }
.text-role-secondary { color: var(--text-secondary); }
.text-role-muted { color: var(--text-muted); }
.text-role-link { color: var(--text-link); }
.text-role-eyebrow { color: var(--text-eyebrow-light); }
.text-role-brand-light { color: var(--text-brand-on-light); }
.text-role-brand-dark { color: var(--text-brand-on-dark); }
.text-role-inverse { color: var(--text-inverse); }
.text-role-inverse-secondary { color: var(--text-inverse-secondary); }
.text-role-inverse-muted { color: var(--text-inverse-muted); }
.text-role-danger { color: var(--text-danger); }
}
@keyframes fade-in {
from {
opacity: 0;

22
src/spa/components/AwardsGridSection.tsx
View File

@@ -110,14 +110,14 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
</div>
<div style={{ background: '#fff', color: '#101828', padding: isMobile ? '24px 24px 30px' : '34px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#4A8FC9', marginBottom: 16 }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text-eyebrow-light)', marginBottom: 16 }}>
{fallbackText(card.label, 'Auszeichnung 01')}
</span>
<h3 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.7rem, 8vw, 2.8rem)' : 'clamp(2.1rem, 3.2vw, 3.3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.98, margin: '0 0 14px', overflowWrap: 'anywhere' }}>
<h3 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 14px', overflowWrap: 'anywhere' }}>
<Lines text={fallbackText(card.title, '')} />
</h3>
<div style={{ width: 44, height: 2, background: GOLD, marginBottom: 18 }} />
<p style={{ fontFamily: FB, fontSize: isMobile ? 16 : 17, color: 'rgba(16,24,40,0.62)', lineHeight: 1.6, margin: 0, maxWidth: 560 }}>
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 560 }}>
{fallbackText(card.description, '')}
</p>
@@ -228,14 +228,14 @@ function SupportingAwardCards({
</div>
<div style={{ padding: isMobile ? '28px 24px 32px' : followsFeaturedCard ? '38px 44px 42px' : '36px 36px 40px', display: 'flex', flexDirection: 'column', flex: 1 }}>
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.26em', textTransform: 'uppercase', color: isDarkCard ? 'rgba(239,191,4,0.8)' : '#4A8FC9', marginBottom: 12 }}>
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.26em', textTransform: 'uppercase', color: isDarkCard ? 'rgba(239,191,4,0.8)' : 'var(--text-eyebrow-light)', marginBottom: 12 }}>
{fallbackText(card.label, '')}
</span>
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.25rem, 2vw, 1.7rem)', fontWeight: 900, color: isDarkCard ? '#fff' : '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 16px', overflowWrap: 'anywhere' }}>
<h3 className={`type-card-title ${isDarkCard ? 'text-role-inverse' : 'text-role-heading'}`} style={{ textTransform: 'uppercase', margin: '0 0 16px', overflowWrap: 'anywhere' }}>
<Lines text={fallbackText(card.title, '')} />
</h3>
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 22 }} />
<p style={{ fontFamily: FB, fontSize: 18, color: isDarkCard ? 'rgba(255,255,255,0.62)' : 'rgba(16,24,40,0.55)', lineHeight: 1.7, margin: 0, flex: 1 }}>
<p className={`type-body ${isDarkCard ? 'text-role-inverse-secondary' : 'text-role-secondary'}`} style={{ margin: 0, flex: 1 }}>
{fallbackText(card.description, '')}
</p>
@@ -306,14 +306,14 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa
<section id="auszeichnungen" style={{ background: featuredCard ? '#fff' : '#F7F7F5', position: 'relative', overflow: 'hidden', isolation: 'isolate' }}>
{!featuredCard ? <MunichSkylineBg /> : null}
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', borderBottom: '1px solid rgba(3,9,58,0.1)' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>
{fallbackText(section.eyebrow, participationContent.awardsGrid.eyebrow)}
</span>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: isMobile ? 16 : 56, alignItems: 'end' }}>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0, overflowWrap: 'anywhere' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0, overflowWrap: 'anywhere' }}>
<Lines text={fallbackText(section.heading, participationContent.awardsGrid.heading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>
{fallbackText(section.description, participationContent.awardsGrid.description)}
</p>
</div>
@@ -332,10 +332,10 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa
<section id="weitere-auszeichnungen" aria-label="Weitere Auszeichnungen" style={{ background: '#fff', position: 'relative', overflow: 'hidden', padding: isMobile ? '40px 0 56px' : '64px 0 80px', borderTop: '1px solid rgba(17,29,85,0.08)', scrollMarginTop: 80 }}>
<div style={{ padding: isMobile ? '0 24px 32px' : '0 80px 48px' }}>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: isMobile ? 16 : 56, alignItems: 'end' }}>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3.2vw, 2.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0, overflowWrap: 'anywhere' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0, overflowWrap: 'anywhere' }}>
<Lines text={fallbackText(section.supportingHeading, participationContent.awardsGrid.supportingHeading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>
{fallbackText(section.supportingDescription, participationContent.awardsGrid.supportingDescription)}
</p>
</div>

6
src/spa/components/HomeWinnersSection.tsx
View File

@@ -86,8 +86,8 @@ function HomeWinnerCard({
<Star size={10} style={{ color: '#EFBF04', flexShrink: 0 }} fill="#EFBF04" />
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{winner?.year || staticWinner?.year} · {winner?.awardType || winner?.type || staticWinner?.type}</span>
</div>
<h3 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight: 700, color: '#fff', margin: '0 0 3px', lineHeight: 1.3 }}>{title}</h3>
<p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.75)', margin: 0 }}>{winner?.category || staticWinner?.category}</p>
<h3 className="type-small text-role-inverse" style={{ margin: '0 0 3px', fontWeight: 700 }}>{title}</h3>
<p className="type-caption text-role-inverse-secondary" style={{ margin: 0 }}>{winner?.category || staticWinner?.category}</p>
<div style={{ marginTop: 10, display: 'inline-block', background: '#EFBF04', color: '#101828', padding: '5px 14px', borderRadius: 999, fontSize: 10, fontFamily: '"IBM Plex Sans", sans-serif', fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: hovered ? 1 : 0, transform: hovered ? 'translateY(0)' : 'translateY(6px)', transition: 'all 0.25s' }}>
{hoverLabel}
</div>
@@ -121,7 +121,7 @@ export default function HomeWinnersSection({ content }: { content?: HomeWinnersC
<div style={{ padding: isMobile ? '48px 24px 32px' : '72px 80px 48px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between', gap: isMobile ? 16 : 0 }}>
<div>
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04', display: 'block', marginBottom: 12 }}>{fallbackText(winnersSection.eyebrow, homeContent.winners.eyebrow)}</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 }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
<Lines text={fallbackText(winnersSection.heading, homeContent.winners.heading)} />
</h2>
</div>

14
src/spa/components/TestimonialsSection.tsx
View File

@@ -77,8 +77,8 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
{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 }}>{eyebrow}</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' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 16px' }}>
<Lines text={heading} />
</h2>
<div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
@@ -94,7 +94,7 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
{/* 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 }}>&ldquo;</span>
<p style={{ fontFamily: FF, fontSize: '1.2rem', fontWeight: 300, color: '#101828', lineHeight: 1.5, margin: '0 0 22px' }}>{t.quote}</p>
<p className="type-lead text-role-body" style={{ 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>
@@ -134,13 +134,13 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
{/* 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: 14 }}>{eyebrow}</span>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{eyebrow}</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' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 36px' }}>
<Lines text={desktopHeading} />
</h2>
<p style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 300, color: '#101828', lineHeight: 1.55, margin: '0 0 40px' }}>
<p className="type-lead text-role-body" style={{ margin: '0 0 40px' }}>
{t.quote}
</p>
@@ -148,7 +148,7 @@ export default function TestimonialsSection({ data }: { data?: TestimonialsCms }
<div>
<div style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#101828', marginBottom: 4 }}>{t.name}</div>
<div style={{ fontFamily: FF, fontSize: 12, color: 'rgba(16,24,40,0.5)' }}>{t.role} · {t.company}</div>
<div style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: '#4A8FC9', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{yearPrefix} {t.year}</div>
<div style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: 'var(--text-eyebrow-light)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{yearPrefix} {t.year}</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 40 }}>

16
src/spa/components/WegZurAuszeichnungSection.tsx
View File

@@ -47,10 +47,10 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
{/* Section header */}
<div style={{ marginBottom: 36 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 16px' }}>
<Lines text={fallbackText(section.heading, participationContent.process.heading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0 }}>
<p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(section.description, participationContent.process.description)}
</p>
</div>
@@ -71,12 +71,12 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
<span style={{ width: 1, height: 11, background: 'rgba(255,255,255,0.2)' }} />
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
</div>
<h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
<h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
{fallbackText(item.title, '')}
</h3>
</div>
</div>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
<p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(item.desc, '')}
</p>
{/* Step progress indicator */}
@@ -101,11 +101,11 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
<div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)', flexShrink: 0 }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
<Lines text={fallbackText(section.heading, participationContent.process.heading)} />
</h2>
</div>
<p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 }}>
<p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(section.description, participationContent.process.description)}
</p>
</div>
@@ -167,11 +167,11 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
</div>
<div style={{ width: 32, height: 1, background: GOLD, marginBottom: 16, opacity: 0.5 }} />
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
<h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}>
{fallbackText(item.title, '')}
</h3>
</div>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
<p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(item.desc, '')}
</p>
{/* Step progress indicator */}

6
src/spa/components/forms/ApplicationFormSection.tsx
View File

@@ -50,11 +50,11 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}>
<div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.36em', fontWeight: 700, display: 'block', marginBottom: 16, opacity: 0.8 }}>{showApplicationForm ? fallbackText(section.eyebrow, homeContent.application.eyebrow) : newsletterCopy.eyebrow}</span>
<h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(1.8rem, 2.8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, marginBottom: 16 }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 16 }}>
<Lines text={showApplicationForm ? fallbackText(section.heading, homeContent.application.heading) : newsletterCopy.heading} />
</h2>
<div style={{ width: 32, height: 2, background: '#EFBF04', marginBottom: 20 }} />
<p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
<p className="type-small text-role-inverse-secondary" style={{ marginBottom: 32 }}>
{showApplicationForm ? fallbackText(section.body, homeContent.application.body) : newsletterCopy.body}
</p>
@@ -99,7 +99,7 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
<div style={{ padding: isMobile ? '32px 24px' : '24px 48px 32px 40px', flex: isMobile ? 'none' : 1, height: isMobile && showApplicationForm ? '82svh' : undefined, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative', zIndex: 1 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.5)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 8 }}>{showApplicationForm ? fallbackText(section.formEyebrow, homeContent.application.formEyebrow) : newsletterCopy.formEyebrow}</span>
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.2rem, 1.8vw, 1.6rem)', fontWeight: 900, color: '#111D55', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 24 }}>{showApplicationForm ? fallbackText(section.formTitle, homeContent.application.formTitle) : newsletterCopy.formTitle}</h3>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 24 }}>{showApplicationForm ? fallbackText(section.formTitle, homeContent.application.formTitle) : newsletterCopy.formTitle}</h3>
{showApplicationForm ? <BewerbungsForm theme="gold" content={form} /> : <NewsletterInterestForm copy={newsletterCopy} phase={newsletterPhase} source={source} />}
</div>
</div>

42
src/spa/components/forms/BewerbungsForm.tsx
View File

@@ -345,10 +345,10 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
<div style={{ width: 52, height: 52, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
<Check size={22} color={c.successIconInner} strokeWidth={3} />
</div>
<h3 style={{ fontSize: 18, fontWeight: 900, color: c.successHeading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 10 }}>
<h3 className="type-card-title" style={{ color: c.successHeading, textTransform: 'uppercase', marginBottom: 10 }}>
{data.type === 'selbst' ? fallbackText(formContent.success.selfHeading, participationContent.form.success.selfHeading) : fallbackText(formContent.success.nominationHeading, participationContent.form.success.nominationHeading)}
</h3>
<p style={{ fontSize: 13, color: c.successBody, maxWidth: 340, margin: '0 auto', lineHeight: 1.7 }}>
<p className="type-caption" style={{ color: c.successBody, maxWidth: 340, margin: '0 auto' }}>
{data.type === 'selbst'
? <><span>{fallbackText(formContent.success.selfPrefix, participationContent.form.success.selfPrefix)}</span><strong style={{ color: c.successName }}>{data.firmenname}</strong><span>{fallbackText(formContent.success.selfMiddle, participationContent.form.success.selfMiddle)}</span><strong style={{ color: c.successAccent }}>{data.email}</strong><span>{fallbackText(formContent.success.selfSuffix, participationContent.form.success.selfSuffix)}</span></>
: <><span>{fallbackText(formContent.success.nominationPrefix, participationContent.form.success.nominationPrefix)}</span><strong style={{ color: c.successName }}>{data.nomName}</strong><span>{fallbackText(formContent.success.nominationMiddle, participationContent.form.success.nominationMiddle)}</span><strong style={{ color: c.successAccent }}>{data.nomFirma}</strong><span>{fallbackText(formContent.success.nominationSuffix, participationContent.form.success.nominationSuffix)}</span></>
@@ -400,8 +400,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{/* ── Step 0: Typ-Wahl ── */}
{step === 0 && (
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{fallbackText(formContent.typeStep.eyebrow, participationContent.form.typeStep.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 14 }}>{fallbackText(formContent.typeStep.heading, participationContent.form.typeStep.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{fallbackText(formContent.typeStep.eyebrow, participationContent.form.typeStep.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase', marginBottom: 14 }}>{fallbackText(formContent.typeStep.heading, participationContent.form.typeStep.heading)}</h3>
<div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 8 }}>
<TypeCard c={c} selected={data.type === 'selbst'} title={fallbackText(formContent.typeStep.selfTitle, participationContent.form.typeStep.selfTitle)}
desc={fallbackText(formContent.typeStep.selfDesc, participationContent.form.typeStep.selfDesc)}
@@ -417,8 +417,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{step === 1 && data.type === 'selbst' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.eligibility.eyebrow, participationContent.form.eligibility.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.eligibility.heading, participationContent.form.eligibility.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.eligibility.eyebrow, participationContent.form.eligibility.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.eligibility.heading, participationContent.form.eligibility.heading)}</h3>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -450,12 +450,12 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<AlertCircle size={18} color={c.alertIcon} />
<h3 style={{ fontFamily: FF, fontSize: 15, fontWeight: 800, color: c.alertTitle, textTransform: 'uppercase' }}>{fallbackText(formContent.eligibility.ineligibleHeading, participationContent.form.eligibility.ineligibleHeading)}</h3>
<h3 className="type-small" style={{ color: c.alertTitle, textTransform: 'uppercase', fontWeight: 700 }}>{fallbackText(formContent.eligibility.ineligibleHeading, participationContent.form.eligibility.ineligibleHeading)}</h3>
</div>
<p style={{ fontFamily: FF, fontSize: 13, color: c.bodyText, lineHeight: 1.7 }}>
<p className="type-caption" style={{ color: c.bodyText }}>
{fallbackText(formContent.eligibility.ineligibleBody, participationContent.form.eligibility.ineligibleBody)}
</p>
<p style={{ fontFamily: FF, fontSize: 13, color: c.mutedText, lineHeight: 1.7 }}>
<p className="type-caption" style={{ color: c.mutedText }}>
{fallbackText(formContent.eligibility.ineligibleContactPrefix, participationContent.form.eligibility.ineligibleContactPrefix)} <span style={{ color: c.alertEmail }}>{fallbackText(formContent.eligibility.ineligibleContactEmail, participationContent.form.eligibility.ineligibleContactEmail)}</span>
</p>
</div>
@@ -463,8 +463,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.selfContact.eyebrow, participationContent.form.selfContact.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.selfContact.heading, participationContent.form.selfContact.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.selfContact.eyebrow, participationContent.form.selfContact.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.selfContact.heading, participationContent.form.selfContact.heading)}</h3>
</div>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
<Field c={c} label={fallbackText(formContent.selfContact.companyLabel, participationContent.form.selfContact.companyLabel)} error={errors.firmenname} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -480,7 +480,7 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
<StyledInput c={c} type="tel" value={data.telefon} onChange={e => set('telefon', e.target.value)} placeholder={fallbackText(formContent.selfContact.phonePlaceholder, participationContent.form.selfContact.phonePlaceholder)} />
</Field>
</div>
<p style={{ fontFamily: FF, fontSize: 12, color: c.mutedText, lineHeight: 1.6 }}>
<p className="type-caption" style={{ color: c.mutedText }}>
{fallbackText(formContent.selfContact.footnote, participationContent.form.selfContact.footnote)}
</p>
</div>
@@ -491,8 +491,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{step === 3 && data.type === 'selbst' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.selfSummary.eyebrow, participationContent.form.selfSummary.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.selfSummary.heading, participationContent.form.selfSummary.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.selfSummary.eyebrow, participationContent.form.selfSummary.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.selfSummary.heading, participationContent.form.selfSummary.heading)}</h3>
</div>
<div style={{ borderTop: `1px solid ${c.border}` }}>
{[
@@ -514,8 +514,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{step === 1 && data.type === 'vorschlag' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationCompany.eyebrow, participationContent.form.nominationCompany.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationCompany.heading, participationContent.form.nominationCompany.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationCompany.eyebrow, participationContent.form.nominationCompany.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationCompany.heading, participationContent.form.nominationCompany.heading)}</h3>
</div>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
<Field c={c} label={fallbackText(formContent.nominationCompany.companyLabel, participationContent.form.nominationCompany.companyLabel)} error={errors.nomFirma} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -535,8 +535,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{step === 2 && data.type === 'vorschlag' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationContact.eyebrow, participationContent.form.nominationContact.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationContact.heading, participationContent.form.nominationContact.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationContact.eyebrow, participationContent.form.nominationContact.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationContact.heading, participationContent.form.nominationContact.heading)}</h3>
</div>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
<Field c={c} label={fallbackText(formContent.nominationContact.nameLabel, participationContent.form.nominationContact.nameLabel)} error={errors.nomName} requiredSuffix={fallbackText(formContent.requiredSuffix, participationContent.form.requiredSuffix)}>
@@ -549,7 +549,7 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
<StyledInput c={c} value={data.nomBeziehung} onChange={e => set('nomBeziehung', e.target.value)} placeholder={fallbackText(formContent.nominationContact.relationshipPlaceholder, participationContent.form.nominationContact.relationshipPlaceholder)} />
</Field>
</div>
<p style={{ fontFamily: FF, fontSize: 12, color: c.mutedText, lineHeight: 1.6 }}>
<p className="type-caption" style={{ color: c.mutedText }}>
{fallbackText(formContent.nominationContact.footnote, participationContent.form.nominationContact.footnote)}
</p>
</div>
@@ -559,8 +559,8 @@ export default function BewerbungsForm({ theme = 'dark', content }: { theme?: 'd
{step === 3 && data.type === 'vorschlag' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 6 }}>{fallbackText(formContent.nominationSummary.eyebrow, participationContent.form.nominationSummary.eyebrow)}</p>
<h3 style={{ fontFamily: FF, fontSize: 16, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(formContent.nominationSummary.heading, participationContent.form.nominationSummary.heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 6 }}>{fallbackText(formContent.nominationSummary.eyebrow, participationContent.form.nominationSummary.eyebrow)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(formContent.nominationSummary.heading, participationContent.form.nominationSummary.heading)}</h3>
</div>
<div style={{ borderTop: `1px solid ${c.border}` }}>
{[

12
src/spa/components/forms/KontaktForm.tsx
View File

@@ -264,10 +264,10 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
<div style={{ width: 56, height: 56, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
<Check size={24} color={c.successIconIn} strokeWidth={2.5} />
</div>
<h3 style={{ fontSize: 20, fontWeight: 800, color: c.successHeading, marginBottom: 10, letterSpacing: '-0.02em', fontFamily: FF }}>
<h3 className="type-card-title" style={{ color: c.successHeading, marginBottom: 10 }}>
{fallbackText(copy.success.heading, contactFormContent.success.heading)}
</h3>
<p style={{ fontSize: 15, color: c.successBody, lineHeight: 1.7, maxWidth: 280, margin: '0 auto', fontFamily: FF, overflowWrap: 'anywhere' }}>
<p className="type-small" style={{ color: c.successBody, maxWidth: 280, margin: '0 auto', overflowWrap: 'anywhere' }}>
{fallbackText(copy.success.prefix, contactFormContent.success.prefix)} <strong style={{ color: c.successHeading }}>{data.name}</strong>. {fallbackText(copy.success.suffixBeforeEmail, contactFormContent.success.suffixBeforeEmail)}{' '}
<strong style={{ color: c.successIcon }}>{data.email}</strong>.
</p>
@@ -326,7 +326,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
{step === 0 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
<p style={{ fontSize: 14, color: c.subtext, marginBottom: 12, fontFamily: FF }}>{fallbackText(copy.prompts.subject, contactFormContent.prompts.subject)}</p>
<p className="type-small" style={{ color: c.subtext, marginBottom: 12 }}>{fallbackText(copy.prompts.subject, contactFormContent.prompts.subject)}</p>
{copy.subjects.map(item => (
<BetreffCard key={item.value} c={c} item={item} selected={data.betreff === item.value}
onClick={() => { set('betreff', item.value); setDir(1); setStep(1); }} />
@@ -336,7 +336,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
{step === 1 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<p style={{ fontSize: 14, color: c.subtext, marginBottom: 4, fontFamily: FF }}>{fallbackText(copy.prompts.contact, contactFormContent.prompts.contact)}</p>
<p className="type-small" style={{ color: c.subtext, marginBottom: 4 }}>{fallbackText(copy.prompts.contact, contactFormContent.prompts.contact)}</p>
{([
{ label: copy.fields.nameLabel, key: 'name' as const, type: 'text', placeholder: copy.fields.namePlaceholder, error: errors.name },
{ label: copy.fields.emailLabel, key: 'email' as const, type: 'email', placeholder: copy.fields.emailPlaceholder, error: errors.email },
@@ -352,7 +352,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
{step === 2 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<p style={{ fontSize: 14, color: c.subtext, marginBottom: 4, fontFamily: FF }}>{fallbackText(copy.prompts.message, contactFormContent.prompts.message)}</p>
<p className="type-small" style={{ color: c.subtext, marginBottom: 4 }}>{fallbackText(copy.prompts.message, contactFormContent.prompts.message)}</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: c.labelText, fontFamily: FF }}>{fallbackText(copy.fields.messageLabel, contactFormContent.fields.messageLabel)}</label>
<StyledTextarea c={c} value={data.nachricht} onChange={e => set('nachricht', e.target.value)} rows={5} placeholder={fallbackText(copy.fields.messagePlaceholder, contactFormContent.fields.messagePlaceholder)} />
@@ -405,7 +405,7 @@ export default function KontaktForm({ theme = 'dark', content }: { theme?: 'dark
)}
</div>
)}
{submissionError && <p role="alert" style={{ fontFamily: FF, fontSize: 11, color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
{submissionError && <p role="alert" className="type-caption" style={{ color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
</div>
);
}

8
src/spa/components/forms/NewsletterInterestForm.tsx
View File

@@ -72,10 +72,10 @@ export function NewsletterInterestForm({
<div style={{ width: 52, height: 52, background: '#111D55', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
<Check size={22} color="#EFBF04" strokeWidth={3} />
</div>
<h4 style={{ fontFamily: FF, fontSize: isMobile ? 20 : 24, fontWeight: 900, color: '#111D55', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 12px' }}>
<h4 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
{copy.successHeading}
</h4>
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(17,29,85,0.66)', lineHeight: 1.7, margin: 0, maxWidth: 430 }}>
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 430 }}>
{copy.successBody}
</p>
</div>
@@ -95,7 +95,7 @@ export function NewsletterInterestForm({
minHeight: 0,
}}
>
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(17,29,85,0.68)', lineHeight: 1.75, margin: '0 0 28px', maxWidth: 520 }}>
<p className="type-body text-role-secondary" style={{ margin: '0 0 28px', maxWidth: 520 }}>
{copy.formBody}
</p>
<div aria-hidden="true" style={{ position: 'absolute', left: '-10000px', width: 1, height: 1, overflow: 'hidden' }}>
@@ -168,7 +168,7 @@ export function NewsletterInterestForm({
{copy.submitLabel} <Mail size={14} />
</button>
</div>
<p style={{ fontFamily: FF, fontSize: 13, color: 'rgba(17,29,85,0.48)', lineHeight: 1.6, margin: '18px 0 0', maxWidth: 520 }}>
<p className="type-caption text-role-muted" style={{ margin: '18px 0 0', maxWidth: 520 }}>
{copy.privacy}
</p>
</form>

16
src/spa/components/forms/SponsoringForm.tsx
View File

@@ -212,10 +212,10 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
<div style={{ width: 52, height: 52, background: c.successIcon, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
<Check size={22} color={c.successIconIn} strokeWidth={3} />
</div>
<h3 style={{ fontSize: 18, fontWeight: 900, color: c.successHeading, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 10 }}>
<h3 className="type-card-title" style={{ color: c.successHeading, textTransform: 'uppercase', marginBottom: 10 }}>
{fallbackText(copy.successHeading, netzwerkContent.sponsoringForm.successHeading)}
</h3>
<p style={{ fontSize: 12, color: c.successBody, maxWidth: 320, margin: '0 auto', lineHeight: 1.6 }}>
<p className="type-caption" style={{ color: c.successBody, maxWidth: 320, margin: '0 auto' }}>
{fallbackText(copy.successMessagePrefix, netzwerkContent.sponsoringForm.successMessagePrefix)} <strong style={{ color: c.successHeading }}>{data.kontakt}</strong>. {fallbackText(copy.successMessageSuffix, netzwerkContent.sponsoringForm.successMessageSuffix)}
</p>
</div>
@@ -261,8 +261,8 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
{step === 0 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{numberedStepLabel(copy.step2Eyebrow, netzwerkContent.sponsoringForm.step2Eyebrow, 1)}</p>
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(copy.step2Heading, netzwerkContent.sponsoringForm.step2Heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{numberedStepLabel(copy.step2Eyebrow, netzwerkContent.sponsoringForm.step2Eyebrow, 1)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(copy.step2Heading, netzwerkContent.sponsoringForm.step2Heading)}</h3>
</div>
<Field c={c} label={fallbackText(copy.companyLabel, netzwerkContent.sponsoringForm.companyLabel)} error={errors.unternehmen}>
<StyledInput c={c} value={data.unternehmen} onChange={e => set('unternehmen', e.target.value)} placeholder={fallbackText(copy.companyPlaceholder, netzwerkContent.sponsoringForm.companyPlaceholder)} />
@@ -276,8 +276,8 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
{step === 1 && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 10, color: c.accentLabel, textTransform: 'uppercase', letterSpacing: '0.25em', fontWeight: 700, marginBottom: 8 }}>{numberedStepLabel(copy.step3Eyebrow, netzwerkContent.sponsoringForm.step3Eyebrow, 2)}</p>
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 900, color: c.heading, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>{fallbackText(copy.step3Heading, netzwerkContent.sponsoringForm.step3Heading)}</h3>
<p className="type-eyebrow" style={{ color: c.accentLabel, marginBottom: 8 }}>{numberedStepLabel(copy.step3Eyebrow, netzwerkContent.sponsoringForm.step3Eyebrow, 2)}</p>
<h3 className="type-card-title" style={{ color: c.heading, textTransform: 'uppercase' }}>{fallbackText(copy.step3Heading, netzwerkContent.sponsoringForm.step3Heading)}</h3>
</div>
<Field c={c} label={fallbackText(copy.contactLabel, netzwerkContent.sponsoringForm.contactLabel)} error={errors.kontakt}>
<StyledInput c={c} value={data.kontakt} onChange={e => set('kontakt', e.target.value)} placeholder={fallbackText(copy.contactPlaceholder, netzwerkContent.sponsoringForm.contactPlaceholder)} />
@@ -335,9 +335,9 @@ export default function SponsoringForm({ theme = 'dark', content }: { theme?: 'd
)}
</div>
{submissionError && <p role="alert" style={{ fontFamily: FF, fontSize: 11, color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
{submissionError && <p role="alert" className="type-caption" style={{ color: c.errorText, margin: '10px 0 0', textAlign: 'right' }}>{submissionError}</p>}
<p style={{ fontFamily: FF, textAlign: 'center', fontSize: 12, color: c.footerText, paddingTop: 12 }}>
<p className="type-caption" style={{ textAlign: 'center', color: c.footerText, paddingTop: 12 }}>
{fallbackText(copy.footerText, netzwerkContent.sponsoringForm.footerText)}
</p>
</div>

28
src/spa/components/layout/Layout.tsx
View File

@@ -587,15 +587,9 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
position: 'relative',
padding: isMobile ? '28px 24px 16px' : '36px 64px 0',
}}>
<h2 style={{
fontFamily: FF_DISPLAY,
fontWeight: 900,
fontSize: 'clamp(1.6rem, 3vw, 2.8rem)',
<h2 className="type-section-title text-role-inverse" style={{
textTransform: 'uppercase',
letterSpacing: '-0.03em',
color: '#fff',
margin: 0,
lineHeight: 1,
whiteSpace: isMobile ? 'normal' : 'nowrap',
}}>
{footer.headlinePrefix} <span style={{ color: GOLD }}>{footer.headlineAccent}</span> {footer.headlineSuffix}
@@ -663,11 +657,7 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
style={{ width: 140, height: 'auto', marginBottom: 10, opacity: 0.9 }}
/>
<p style={{
fontFamily: FF_BODY,
fontSize: 15,
lineHeight: 1.65,
color: 'rgba(255,255,255,0.45)',
<p className="type-small text-role-inverse-secondary" style={{
margin: '0 0 16px 0',
maxWidth: 300,
}}>
@@ -778,13 +768,7 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
{footer.linkColumns.map((column, index) => (
<React.Fragment key={column.label + index}>
<div style={{ minWidth: isMobile ? 'auto' : index === footer.linkColumns.length - 1 ? 120 : 160 }}>
<p style={{
fontFamily: FF_DISPLAY,
fontSize: 9,
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.28em',
color: 'rgba(255,255,255,0.3)',
<p className="type-eyebrow text-role-inverse-muted" style={{
margin: '0 0 10px 0',
}}>{column.label}</p>
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -864,13 +848,9 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
justifyContent: 'space-between',
gap: isMobile ? 16 : 0,
}}>
<p style={{
fontFamily: FF_DISPLAY,
fontSize: 10,
fontWeight: 400,
<p className="type-caption text-role-inverse-muted" style={{
textTransform: 'uppercase',
letterSpacing: '0.2em',
color: 'rgba(255,255,255,0.3)',
margin: 0,
}}>
{footer.copyright}

30
src/spa/components/legal/LegalPage.tsx
View File

@@ -66,19 +66,20 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
<div style={{ width: 32, height: 2, background: GOLD }} />
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.35em', textTransform: 'uppercase', color: GOLD }}>{fallbackText(hero.eyebrow, content.hero.eyebrow)}</span>
</div>
<h1 style={{ fontFamily: FF, fontWeight: 900, fontSize: isMobile ? 'clamp(1.8rem, 7vw, 2.6rem)' : 'clamp(2.4rem, 4vw, 3.2rem)', color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.02, margin: '0 0 12px' }}>
<h1 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
{fallbackText(hero.heading, content.hero.heading)}
</h1>
<p
style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.45)', margin: 0 }}
className="type-small text-role-inverse-secondary"
style={{ margin: 0 }}
dangerouslySetInnerHTML={{ __html: fallbackText(hero.descriptionHtml, content.hero.descriptionHtml) }}
/>
</section>
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '40px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '200px 1fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '40px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : '200px minmax(0, 1fr)', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
{!isMobile && (
<nav style={{ position: 'sticky', top: 80 }}>
<div style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: GOLD, marginBottom: 16 }}>{fallbackText(navigation.tocTitle, content.navigation.tocTitle)}</div>
<div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-brand-on-light)', marginBottom: 16 }}>{fallbackText(navigation.tocTitle, content.navigation.tocTitle)}</div>
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
{sections.map((item) => (
<li key={item.id}>
@@ -107,7 +108,7 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
</nav>
)}
<div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 56, minWidth: 0 }}>
{sections.map((section) => (
<Section key={section.id} id={section.id} title={section.title}>
{fallbackArray<LegalContentItem>(section.items, []).filter(isLegalItem).map((item, index) => (
@@ -122,10 +123,6 @@ export default function LegalPage({ content, cmsKey }: { content: LegalPageConte
}
const body: React.CSSProperties = {
fontFamily: '"Inter", sans-serif',
fontSize: 15,
color: 'rgba(58,58,58,0.82)',
lineHeight: 1.85,
margin: '0 0 16px',
overflowWrap: 'anywhere',
}
@@ -134,7 +131,7 @@ function Section({ id, title, children }: { id: string; title: string; children:
return (
<div id={id} style={{ scrollMarginTop: 80 }}>
<div style={{ borderLeft: `3px solid ${GOLD}`, paddingLeft: 16, marginBottom: 28 }}>
<h2 style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: NAVY, margin: 0 }}>
<h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
{title}
</h2>
</div>
@@ -151,7 +148,7 @@ function ContentItem({ item }: { item: LegalContentItem }) {
return <Legal html={item.html} />
case 'list':
return (
<ul style={{ ...body, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
<ul className="type-body text-role-body" style={{ ...body, paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
{item.items.map((entry, index) => (
<li key={`${entry}-${index}`}>{entry}</li>
))}
@@ -179,15 +176,15 @@ function Paragraph({ item }: { item: Extract<LegalContentItem, { type: 'paragrap
? { fontStyle: 'italic', borderLeft: `3px solid ${GOLD}`, paddingLeft: 16, marginBottom: 32 }
: {}
return <p style={{ ...body, ...variantStyle }} dangerouslySetInnerHTML={{ __html: item.html }} />
return <p className="type-body text-role-body" style={{ ...body, ...variantStyle }} dangerouslySetInnerHTML={{ __html: item.html }} />
}
function SubSection({ num, title, children }: { num: string; title: string; children: React.ReactNode }) {
return (
<div style={{ marginBottom: 28 }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.12em' }}>{num}.</span>
<h3 style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: NAVY, margin: 0 }}>{title}</h3>
<span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.12em' }}>{num}.</span>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>{title}</h3>
</div>
{children}
</div>
@@ -197,7 +194,7 @@ function SubSection({ num, title, children }: { num: string; title: string; chil
function AddressBlock({ lines }: { lines: string[] }) {
const isMobile = useIsMobile()
return (
<address style={{ fontFamily: '"Inter", sans-serif', fontSize: isMobile ? 15 : 14, color: 'rgba(58,58,58,0.75)', lineHeight: 1.9, fontStyle: 'normal', background: 'rgba(17,29,85,0.04)', padding: '16px 20px', borderLeft: '2px solid rgba(239,191,4,0.4)', marginBottom: 16, overflowWrap: 'anywhere' }}>
<address className="type-small text-role-secondary" style={{ fontStyle: 'normal', background: 'rgba(17,29,85,0.04)', padding: '16px 20px', borderLeft: '2px solid rgba(239,191,4,0.4)', marginBottom: 16, overflowWrap: 'anywhere' }}>
{lines.map((line, index) => (
<React.Fragment key={`${line}-${index}`}>
{line}
@@ -212,7 +209,8 @@ function Legal({ html }: { html: string }) {
const isMobile = useIsMobile()
return (
<p
style={{ fontFamily: '"Inter", sans-serif', fontSize: isMobile ? 15 : 14, color: NAVY, lineHeight: 1.75, background: 'rgba(17,29,85,0.04)', padding: '12px 16px', borderLeft: `3px solid ${NAVY}`, margin: '0 0 16px', fontWeight: 500, overflowWrap: 'anywhere' }}
className="type-small text-role-link"
style={{ background: 'rgba(17,29,85,0.04)', padding: '12px 16px', borderLeft: `3px solid ${NAVY}`, margin: '0 0 16px', fontWeight: 500, overflowWrap: 'anywhere' }}
dangerouslySetInnerHTML={{ __html: html }}
/>
)

25
src/spa/components/membership/MembershipWizard.tsx
View File

@@ -604,22 +604,14 @@ function StepHeading({ step, total, title, subtitle, template }: { step: number;
{template.replace('{step}', String(step)).replace('{total}', String(total))}
</span>
</div>
<h3 style={{
<h3 className="type-card-title text-role-inverse" style={{
margin: 0,
fontSize: 20,
fontWeight: 600,
color: WHITE,
fontFamily: '"IBM Plex Sans", sans-serif',
letterSpacing: "-0.01em",
}}>
{title}
</h3>
{subtitle && (
<p style={{
<p className="type-caption text-role-inverse-secondary" style={{
margin: "6px 0 0",
fontSize: 13,
color: "rgba(255,255,255,0.45)",
fontFamily: '"IBM Plex Sans", sans-serif',
}}>
{subtitle}
</p>
@@ -1069,22 +1061,13 @@ function SuccessScreen({ copy }: { copy: WizardCopy }) {
</svg>
</div>
<h3 style={{
<h3 className="type-card-title text-role-inverse" style={{
margin: "0 0 10px",
fontSize: 22,
fontWeight: 700,
color: WHITE,
fontFamily: '"IBM Plex Sans", sans-serif',
letterSpacing: "-0.02em",
}}>
{success.heading}
</h3>
<p style={{
<p className="type-small text-role-inverse-secondary" style={{
margin: "0 0 28px",
fontSize: 14,
color: "rgba(255,255,255,0.55)",
fontFamily: '"IBM Plex Sans", sans-serif',
lineHeight: 1.6,
}}>
{success.message}
</p>

40
src/spa/pages/About.tsx
View File

@@ -118,7 +118,7 @@ const About: React.FC = () => {
{fallbackText(hero.eyebrow, aboutContent.hero.eyebrow)}
</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 28px' }}>
<h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 28px' }}>
{fallbackText(hero.heading, aboutContent.hero.heading).split('\n').map((line, index) => (
<React.Fragment key={`${line}-${index}`}>
{index > 0 && <br />}
@@ -126,7 +126,7 @@ const About: React.FC = () => {
</React.Fragment>
))}
</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 }}>
<p className="type-body text-role-inverse-secondary" style={{ maxWidth: 560, margin: '0 0 40px' }}>
{fallbackText(hero.description, aboutContent.hero.description)}
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
@@ -165,15 +165,15 @@ const About: React.FC = () => {
<div style={{ background: WHITE, 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 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</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' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(prize.heading, aboutContent.prize.heading)} />
</h2>
</>
)}
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
{paragraphs(prize.body, aboutContent.prize.body).map((text, index, arr) => (
<p key={index} style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.8)', lineHeight: 1.8, maxWidth: 440, marginBottom: index === arr.length - 1 ? (isMobile ? 0 : 44) : 16 }}>
<p key={index} className="type-body text-role-body" style={{ maxWidth: 440, marginBottom: index === arr.length - 1 ? (isMobile ? 0 : 44) : 16 }}>
{text}
</p>
))}
@@ -181,7 +181,7 @@ const About: React.FC = () => {
{fallbackArray(prize.facts, aboutContent.prize.facts).map((f, i, arr) => (
<div key={`${f.value}-${i}`} style={{ flex: 1, padding: '20px 0', borderRight: i < arr.length - 1 ? '1px solid #D0D5DD' : 'none', paddingLeft: 0, paddingRight: i < arr.length - 1 ? 20 : 0 }}>
<div style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2vw, 1.8rem)', fontWeight: 900, color: '#101828', letterSpacing: '-0.03em', lineHeight: 1 }}>{fallbackText(f.value, '')}</div>
<div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{fallbackText(f.label, '')}</div>
<div style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: 'var(--text-brand-on-light)', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 6 }}>{fallbackText(f.label, '')}</div>
</div>
))}
</div>
@@ -200,7 +200,7 @@ const About: React.FC = () => {
{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 }}>{fallbackText(prize.eyebrow, aboutContent.prize.eyebrow)}</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)' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
<Lines text={fallbackText(prize.heading, aboutContent.prize.heading)} />
</h2>
</div>
@@ -235,7 +235,7 @@ const About: React.FC = () => {
{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 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</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)' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.6)' }}>
<Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
</h2>
</div>
@@ -246,14 +246,14 @@ const About: React.FC = () => {
{!isMobile && (
<>
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</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' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
</h2>
</>
)}
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
{paragraphs(mittelstand.body, aboutContent.mittelstand.body).map((text, index, arr) => (
<p key={index} style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.5)', lineHeight: 1.8, maxWidth: 440, marginBottom: index === arr.length - 1 ? 40 : 16 }}>
<p key={index} className="type-body text-role-inverse-secondary" style={{ maxWidth: 440, marginBottom: index === arr.length - 1 ? 40 : 16 }}>
{text}
</p>
))}
@@ -271,7 +271,7 @@ const About: React.FC = () => {
{!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' }}>{fallbackText(history.watermark, aboutContent.history.watermark)}</div>}
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(history.eyebrow, aboutContent.history.eyebrow)}</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' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 52px' }}>
{fallbackText(history.heading, aboutContent.history.heading).split('\n').map((line, index) => (
<React.Fragment key={`${line}-${index}`}>
{index > 0 && <br />}
@@ -295,15 +295,15 @@ const About: React.FC = () => {
</div>
<div style={{ background: '#fff', 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 }}>{fallbackText(goals.eyebrow, aboutContent.goals.eyebrow)}</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 40px' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(goals.eyebrow, aboutContent.goals.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 40px' }}>
<Lines text={fallbackText(goals.heading, aboutContent.goals.heading)} />
</h2>
<div>
{fallbackArray(goals.items, aboutContent.goals.items).map((item, i, arr) => (
<div key={`${item.num}-${i}`} style={{ display: 'flex', gap: 24, alignItems: 'flex-start', padding: '24px 0', borderTop: '1px solid rgba(17,29,85,0.1)', borderBottom: i === arr.length - 1 ? '1px solid rgba(17,29,85,0.1)' : 'none', cursor: 'default' }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.12em', paddingTop: 3, flexShrink: 0, minWidth: 24 }}>{fallbackText(item.num, '')}</span>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.12em', paddingTop: 3, flexShrink: 0, minWidth: 24 }}>{fallbackText(item.num, '')}</span>
<div>
<div style={{ fontFamily: FF, fontSize: 17, fontWeight: 800, color: NAVY, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 7 }}>{fallbackText(item.title, '')}</div>
<div style={{ fontFamily: FB, fontSize: 16, color: 'rgba(17,29,85,0.5)', lineHeight: 1.75 }}>{fallbackText(item.desc, '')}</div>
@@ -319,12 +319,12 @@ const About: React.FC = () => {
<MunichSkylineBg />
<div style={{ padding: isMobile ? '48px 24px 32px' : '88px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 40, alignItems: 'flex-end', borderBottom: '1px solid #D0D5DD' }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(values.eyebrow, aboutContent.values.eyebrow)}</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 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(values.eyebrow, aboutContent.values.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
<Lines text={fallbackText(values.heading, aboutContent.values.heading)} />
</h2>
</div>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, maxWidth: 440 }}>
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 440 }}>
{fallbackText(values.description, aboutContent.values.description)}
</p>
</div>
@@ -346,10 +346,10 @@ const About: React.FC = () => {
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04' }}>{fallbackText(cta.eyebrow, aboutContent.cta.eyebrow)}</span>
<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' }}>
<h2 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
<Lines text={fallbackText(cta.heading, aboutContent.cta.heading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.55)', lineHeight: 1.8, marginBottom: 48, fontWeight: 300 }}>
<p className="type-body text-role-inverse-secondary" style={{ marginBottom: 48 }}>
{fallbackText(cta.description, aboutContent.cta.description)}
</p>
<Link
@@ -392,7 +392,7 @@ function ValueRow({ item, last }: { item: { num?: string | null; title?: string
<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' }}>{fallbackText(item.num, '')}</div>
</div>
<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 }}>{fallbackText(item.title, '')}</h3>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>{fallbackText(item.title, '')}</h3>
</div>
</div>
)

38
src/spa/pages/BlogDetail.tsx
View File

@@ -96,7 +96,7 @@ export default function BlogDetail() {
if (!article) {
return (
<div style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, padding: '80px 24px', background: PAGE_BG }}>
<h2 style={{ fontFamily: FF, fontSize: '2rem', fontWeight: 900, color: NAVY }}>{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
<h2 className="type-section-title text-role-heading">{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
<Link to={fallbackText(notFound.backUrl, blogDetailContent.notFound.backUrl)} style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
<ArrowLeft size={14} /> {fallbackText(notFound.backLabel, blogDetailContent.notFound.backLabel)}
</Link>
@@ -155,16 +155,11 @@ export default function BlogDetail() {
</div>
<motion.h1
className="type-page-title text-role-inverse"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
style={{
fontFamily: FF,
fontSize: isMobile ? 'clamp(1.6rem, 6vw, 2.4rem)' : 'clamp(2rem, 5vw, 3.8rem)',
fontWeight: 900,
color: '#fff',
lineHeight: 1.05,
letterSpacing: '-0.03em',
textTransform: 'uppercase',
margin: '0 0 28px',
maxWidth: 760,
@@ -189,14 +184,12 @@ export default function BlogDetail() {
{/* ── ARTICLE BODY ─────────────────────────────────────────────────── */}
<section style={{ background: PAGE_BG, padding: isMobile ? '48px 0 0' : '80px 0 0' }}>
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 320px', gap: isMobile ? 40 : 80 }}>
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) 320px', gap: isMobile ? 40 : 80 }}>
{/* LEFT – article text */}
<article>
<article style={{ minWidth: 0 }}>
{/* Lead */}
<p style={{
fontFamily: FB, fontSize: 19, fontWeight: 300,
color: INK, lineHeight: 1.75,
<p className="type-lead text-role-body" style={{
borderLeft: `4px solid ${GOLD}`, paddingLeft: 28,
marginBottom: 56,
}}>
@@ -214,18 +207,15 @@ export default function BlogDetail() {
style={{ marginBottom: 48 }}
>
{section.heading && (
<h2 style={{
fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.35rem)',
fontWeight: 900, color: NAVY,
textTransform: 'uppercase', letterSpacing: '-0.01em',
<h2 className="type-subtitle text-role-heading" style={{
textTransform: 'uppercase',
marginBottom: 16,
}}>
{section.heading}
</h2>
)}
<p style={{
fontFamily: FB, fontSize: 18,
color: 'rgba(58,58,58,0.8)', lineHeight: 1.8, margin: 0,
<p className="type-body text-role-body" style={{
margin: 0,
}}>
{section.body}
</p>
@@ -249,7 +239,7 @@ export default function BlogDetail() {
</article>
{/* RIGHT – sticky sidebar */}
<aside>
<aside style={{ minWidth: 0 }}>
<div style={{ position: isMobile ? 'static' : 'sticky', top: isMobile ? undefined : 100 }}>
{/* Author card */}
@@ -268,10 +258,10 @@ export default function BlogDetail() {
{/* CTA */}
<div style={{ background: '#fff', border: '1px solid rgba(3,9,58,0.1)', padding: '28px' }}>
<div style={{ width: 32, height: 2, background: GOLD, marginBottom: 16 }} />
<h4 style={{ fontFamily: FF, fontSize: 15, fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 12 }}>
<h4 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
{fallbackText(sidebarCta.heading, blogDetailContent.sidebarCta.heading)}
</h4>
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(58,58,58,0.55)', lineHeight: 1.7, marginBottom: 20 }}>
<p className="type-small text-role-secondary" style={{ marginBottom: 20 }}>
{fallbackText(sidebarCta.text, blogDetailContent.sidebarCta.text)}
</p>
{sidebarCtaIsExternal ? (
@@ -358,11 +348,11 @@ function RelatedCard({ article, bordered, isMobile, readMoreLabel }: { article:
<span style={{ fontFamily: FF, fontSize: 9, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>
{article.cat}
</span>
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1rem, 1.4vw, 1.15rem)', fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 1.25, marginBottom: 12 }}>
<h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
{article.title}
</h3>
<div style={{ width: hovered ? 64 : 24, height: 1, background: 'rgba(239,191,4,0.5)', transition: 'width 0.35s', marginBottom: 14 }} />
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.38)', lineHeight: 1.7, flex: 1, marginBottom: 16 }}>
<p className="type-small text-role-inverse-muted" style={{ flex: 1, marginBottom: 16 }}>
{article.excerpt}
</p>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: GOLD, display: 'inline-flex', alignItems: 'center', gap: 5 }}>

8
src/spa/pages/CmsGenericPage.tsx
View File

@@ -21,18 +21,18 @@ export default function CmsGenericPage() {
return (
<main style={{ minHeight: '70vh', background: CREAM, padding: '140px 24px 80px' }}>
<div style={{ maxWidth: 960, margin: '0 auto' }}>
<div style={{ color: GOLD, fontFamily: FF, fontWeight: 800, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20 }}>
<div style={{ color: 'var(--text-brand-on-light)', fontFamily: FF, fontWeight: 700, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20 }}>
{route?.collection || siteSettings.genericPageKicker}
</div>
<h1 style={{ color: NAVY, fontFamily: FF, fontSize: 'clamp(2.25rem, 7vw, 5rem)', lineHeight: 1, fontWeight: 900, textTransform: 'uppercase', margin: 0 }}>
<h1 className="type-page-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
{title}
</h1>
{description ? (
<p style={{ color: 'rgba(58,58,58,0.78)', fontFamily: FB, fontSize: 22, lineHeight: 1.6, marginTop: 28, maxWidth: 760 }}>
<p className="type-lead text-role-body" style={{ marginTop: 28, maxWidth: 760 }}>
{description}
</p>
) : (
<p style={{ color: 'rgba(58,58,58,0.65)', fontFamily: FB, fontSize: 18, lineHeight: 1.7, marginTop: 28, maxWidth: 760 }}>
<p className="type-body text-role-secondary" style={{ marginTop: 28, maxWidth: 760 }}>
{siteSettings.genericPageDescription}
</p>
)}

18
src/spa/pages/Contact.tsx
View File

@@ -68,13 +68,13 @@ const Contact: React.FC = () => {
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 160, background: `linear-gradient(to top, ${NAVY}, transparent)` }} />
<div style={{ position: 'relative', zIndex: 2, width: '100%', paddingBottom: isMobile ? '3rem' : '5rem', paddingLeft: isMobile ? 24 : 80, paddingRight: isMobile ? 24 : 80 }}>
<p style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: GOLD, marginBottom: 16 }}>
<p className="type-eyebrow text-role-brand-dark" style={{ marginBottom: 16 }}>
{fallbackText(hero.eyebrow, contactContent.hero.eyebrow)}
</p>
<h1 style={{ fontSize: isMobile ? 'clamp(2rem, 10vw, 3rem)' : 'clamp(3rem, 7vw, 6rem)', fontWeight: 900, lineHeight: 1.0, color: '#fff', letterSpacing: '-0.03em', marginBottom: 24, maxWidth: 640 }}>
<h1 className="type-display text-role-inverse" style={{ marginBottom: 24, maxWidth: 640 }}>
<Lines text={fallbackText(hero.heading, contactContent.hero.heading)} />
</h1>
<p style={{ fontSize: 18, color: 'rgba(255,255,255,0.72)', maxWidth: 480, lineHeight: 1.65, fontWeight: 400 }}>
<p className="type-body text-role-inverse-secondary" style={{ maxWidth: 480 }}>
{fallbackText(hero.description, contactContent.hero.description)}
</p>
</div>
@@ -89,11 +89,11 @@ const Contact: React.FC = () => {
{/* Left – info panel */}
<div style={{ padding: isMobile ? '48px 24px' : '88px 56px 88px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' }}>
<p style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 20 }}>
<p className="type-eyebrow text-role-inverse-muted" style={{ marginBottom: 20 }}>
{fallbackText(info.eyebrow, contactContent.info.eyebrow)}
</p>
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 20 }} />
<h2 style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', fontWeight: 900, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.03em', marginBottom: 52 }}>
<h2 className="type-section-title text-role-inverse" style={{ marginBottom: 52 }}>
<Lines text={fallbackText(info.heading, contactContent.info.heading)} />
</h2>
@@ -120,7 +120,7 @@ const Contact: React.FC = () => {
</div>
<div style={{ marginTop: 52, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.40)', lineHeight: 1.65 }}>
<p className="type-small text-role-inverse-muted">
{fallbackText(info.nextAwardLabel, contactContent.info.nextAwardLabel)} <strong style={{ color: '#fff' }}>{fallbackText(info.nextAwardDate, contactContent.info.nextAwardDate)}</strong>
</p>
</div>
@@ -158,7 +158,7 @@ const Contact: React.FC = () => {
)}
<div style={{ padding: isMobile ? '36px 20px' : '32px 48px 32px 40px', flex: isMobile ? 'none' : 1, display: 'flex', flexDirection: 'column', minHeight: isMobile ? 480 : 0, position: 'relative', zIndex: 1 }}>
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'rgba(17,29,85,0.5)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 8 }}>{fallbackText(info.formEyebrow, contactContent.info.formEyebrow)}</span>
<h3 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.2rem, 1.8vw, 1.6rem)', fontWeight: 900, color: '#111D55', letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 1.1, marginBottom: 24 }}>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 24 }}>
{fallbackText(info.formTitle, contactContent.info.formTitle)}
</h3>
<KontaktForm theme="gold" content={info.formCopy || undefined} />
@@ -216,11 +216,11 @@ const Contact: React.FC = () => {
{/* Left – sticky label */}
<div style={isMobile ? undefined : { position: 'sticky', top: 96, alignSelf: 'start' }}>
<p style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#4A8FC9', marginBottom: 20 }}>
<p className="type-eyebrow text-role-eyebrow" style={{ marginBottom: 20 }}>
{fallbackText(faq.eyebrow, contactContent.faq.eyebrow)}
</p>
<div style={{ width: 28, height: 2, background: GOLD, marginBottom: 20 }} />
<h2 style={{ fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.4rem)' : 'clamp(2rem, 3.5vw, 2.8rem)', fontWeight: 900, color: NAVY, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
<h2 className="type-section-title text-role-heading">
<Lines text={fallbackText(faq.heading, contactContent.faq.heading)} />
</h2>
</div>

16
src/spa/pages/EventDetail.tsx
View File

@@ -175,10 +175,10 @@ export default function EventDetail() {
{event.category}
</span>
</div>
<h1 style={{ fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.8rem)' : 'clamp(2rem, 5vw, 4rem)', fontWeight: 900, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 12, fontFamily: '"IBM Plex Sans", sans-serif' }}>
<h1 className="type-page-title text-role-inverse" style={{ marginBottom: 12 }}>
{event.title}
</h1>
<p style={{ fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.65)', maxWidth: 520, lineHeight: 1.6 }}>
<p className="type-small text-role-inverse-secondary" style={{ maxWidth: 520 }}>
{event.subtitle}
</p>
</div>
@@ -210,17 +210,17 @@ export default function EventDetail() {
<div>
{/* Description */}
<div style={{ marginBottom: 56 }}>
<p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 16 }}>
<p className="type-eyebrow text-role-brand-light" style={{ marginBottom: 16 }}>
{fallbackText(sections.aboutEyebrow, eventDetailContent.sections.aboutEyebrow)}
</p>
{event.longDescription.split('\n\n').map((para, i) => (
<p key={i} style={{ fontSize: 17, color: 'rgba(58,58,58,0.75)', lineHeight: 1.8, marginBottom: 20 }}>{para}</p>
<p key={i} className="type-body text-role-body" style={{ marginBottom: 20 }}>{para}</p>
))}
</div>
{/* Eckdaten */}
<div>
<p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 24 }}>
<p className="type-eyebrow text-role-brand-light" style={{ marginBottom: 24 }}>
{fallbackText(sections.factsEyebrow, eventDetailContent.sections.factsEyebrow)}
</p>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 2 }}>
@@ -301,12 +301,12 @@ export default function EventDetail() {
<section style={{ background: NAVY, padding: isMobile ? '48px 24px' : '64px 80px', marginTop: 40 }}>
<div style={{ maxWidth: 1400, margin: '0 auto', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 24 : 0 }}>
<div>
<p style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.25em', color: GOLD, marginBottom: 10 }}>
<p className="type-eyebrow text-role-brand-dark" style={{ marginBottom: 10 }}>
{fallbackText(bottomCta.eyebrow, eventDetailContent.bottomCta.eyebrow)}
</p>
<h3 style={{ fontSize: 28, fontWeight: 900, color: '#fff', letterSpacing: '-0.03em', fontFamily: '"IBM Plex Sans", sans-serif' }}>
<h2 className="type-section-title text-role-inverse">
{fallbackText(bottomCta.heading, eventDetailContent.bottomCta.heading)}
</h3>
</h2>
</div>
<Link
to={fallbackText(bottomCta.url, eventDetailContent.bottomCta.url)}

30
src/spa/pages/FormularUpload.tsx
View File

@@ -84,11 +84,11 @@ export default function FormularUpload() {
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.35em', color: HELLBLAU, display: 'block', marginBottom: 16 }}>
{fallbackText(hero.eyebrow, formularUploadContent.hero.eyebrow)}
</span>
<h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 4vw, 3.6rem)' : 'clamp(2.2rem, 4vw, 3.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.0, margin: '0 0 20px' }}>
<h1 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(hero.heading, formularUploadContent.hero.heading)} />
</h1>
<div style={{ width: 48, height: 3, background: GOLD, marginBottom: 24 }} />
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.55)', lineHeight: 1.75, maxWidth: 520, margin: 0 }}>
<p className="type-body text-role-inverse-secondary" style={{ maxWidth: 520, margin: 0 }}>
{fallbackText(hero.description, formularUploadContent.hero.description)}
</p>
</div>
@@ -106,13 +106,13 @@ export default function FormularUpload() {
{/* Breadcrumb */}
<div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '16px 24px' : '16px 80px' }}>
<span style={{ fontFamily: FF, fontSize: 12, color: HELLBLAU, fontWeight: 700, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, formularUploadContent.breadcrumb.label)}</span>
<span style={{ fontFamily: FF, fontSize: 12, color: 'var(--text-eyebrow-light)', fontWeight: 700, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, formularUploadContent.breadcrumb.label)}</span>
</div>
{/* ── ERKLÄRUNG ───────────────────────────────────── */}
<div style={{ background: GRAU, padding: isMobile ? '48px 24px' : '64px 80px' }}>
<p style={{ fontFamily: FF, fontSize: 11, color: '#888', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>{fallbackText(requirements.eyebrow, formularUploadContent.requirements.eyebrow)}</p>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 900, color: DARK, textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 40 }}>
<p className="type-eyebrow text-role-eyebrow" style={{ marginBottom: 8 }}>{fallbackText(requirements.eyebrow, formularUploadContent.requirements.eyebrow)}</p>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 40 }}>
<Lines text={fallbackText(requirements.heading, formularUploadContent.requirements.heading)} />
</h2>
@@ -125,7 +125,7 @@ export default function FormularUpload() {
<div style={{ width: 40, height: 40, background: DARK, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
<Icon size={18} color={GOLD} />
</div>
<h3 style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, color: DARK, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>{fallbackText(card.title, fallbackCard.title)}</h3>
<h3 className="type-small text-role-heading" style={{ fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>{fallbackText(card.title, fallbackCard.title)}</h3>
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
{lines(card.items, fallbackCard.items).map((item, j) => (
<li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: FF, fontSize: 14, color: '#555', lineHeight: 1.5 }}>
@@ -142,8 +142,8 @@ export default function FormularUpload() {
{/* ── UPLOAD-BEREICH ──────────────────────────────── */}
<div style={{ background: NAVY, padding: isMobile ? '48px 24px' : '72px 80px' }}>
<p style={{ fontFamily: FF, fontSize: 11, color: HELLBLAU, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.25em', marginBottom: 8 }}>{fallbackText(upload.eyebrow, formularUploadContent.upload.eyebrow)}</p>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.4rem, 2.2vw, 2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', marginBottom: 40 }}>
<p className="type-eyebrow text-role-inverse-secondary" style={{ marginBottom: 8 }}>{fallbackText(upload.eyebrow, formularUploadContent.upload.eyebrow)}</p>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 40 }}>
<Lines text={fallbackText(upload.heading, formularUploadContent.upload.heading)} />
</h2>
@@ -152,8 +152,8 @@ export default function FormularUpload() {
<div style={{ width: 64, height: 64, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
<CheckCircle size={28} color={DARK} />
</div>
<h3 style={{ fontFamily: FF, fontSize: 22, fontWeight: 900, color: '#fff', textTransform: 'uppercase', marginBottom: 12 }}>{fallbackText(success.heading, formularUploadContent.success.heading)}</h3>
<p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.45)', maxWidth: 440, margin: '0 auto 32px', lineHeight: 1.7 }}>
<h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 12 }}>{fallbackText(success.heading, formularUploadContent.success.heading)}</h3>
<p className="type-small text-role-inverse-secondary" style={{ maxWidth: 440, margin: '0 auto 32px' }}>
{fallbackText(success.description, formularUploadContent.success.description)}
</p>
<Link to={fallbackText(success.linkUrl, formularUploadContent.success.linkUrl)} style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: DARK, background: GOLD, padding: '14px 32px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
@@ -181,10 +181,10 @@ export default function FormularUpload() {
}}
>
<Upload size={32} color={dragging ? GOLD : 'rgba(255,255,255,0.3)'} style={{ margin: '0 auto 16px' }} />
<p style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: '#fff', marginBottom: 8 }}>
<p className="type-small text-role-inverse" style={{ fontWeight: 700, marginBottom: 8 }}>
{fallbackText(upload.dropTitle, formularUploadContent.upload.dropTitle)}
</p>
<p style={{ fontFamily: FF, fontSize: 12, color: 'rgba(255,255,255,0.35)', marginBottom: 20 }}>
<p className="type-caption text-role-inverse-muted" style={{ marginBottom: 20 }}>
{fallbackText(upload.dropDescription, formularUploadContent.upload.dropDescription)}
</p>
<div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
@@ -222,7 +222,7 @@ export default function FormularUpload() {
<Info size={14} color={GOLD} style={{ marginTop: 2, flexShrink: 0 }} />
<span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{fallbackText(upload.noteTitle, formularUploadContent.upload.noteTitle)}</span>
</div>
<p style={{ fontFamily: FF, fontSize: 12, color: 'rgba(255,255,255,0.4)', lineHeight: 1.7, margin: 0 }}>
<p className="type-caption text-role-inverse-muted" style={{ margin: 0 }}>
{fallbackText(upload.note, formularUploadContent.upload.note)}
</p>
</div>
@@ -244,7 +244,7 @@ export default function FormularUpload() {
{files.length ? `${files.length} ${fallbackText(upload.selectedSubmitPrefix, formularUploadContent.upload.selectedSubmitPrefix)}${files.length > 1 ? fallbackText(upload.selectedSubmitPluralSuffix, formularUploadContent.upload.selectedSubmitPluralSuffix) : ''} ${fallbackText(upload.selectedSubmitAction, formularUploadContent.upload.selectedSubmitAction)}` : fallbackText(upload.emptySubmitLabel, formularUploadContent.upload.emptySubmitLabel)}
</button>
<p style={{ fontFamily: FF, fontSize: 11, color: 'rgba(255,255,255,0.2)', lineHeight: 1.6, margin: 0 }}>
<p className="type-caption text-role-inverse-muted" style={{ margin: 0 }}>
{fallbackText(upload.privacyNote, formularUploadContent.upload.privacyNote)}
</p>
</div>
@@ -257,7 +257,7 @@ export default function FormularUpload() {
{/* ── CTA ─────────────────────────────────────────── */}
<div style={{ padding: isMobile ? '48px 24px' : '64px 80px', borderTop: `1px solid ${BORDER}`, display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
<div>
<p style={{ fontFamily: FF, fontSize: 12, color: '#888', marginBottom: 6 }}>{fallbackText(cta.eyebrow, formularUploadContent.cta.eyebrow)}</p>
<p className="type-caption text-role-muted" style={{ marginBottom: 6 }}>{fallbackText(cta.eyebrow, formularUploadContent.cta.eyebrow)}</p>
<Link to={fallbackText(cta.contactUrl, formularUploadContent.cta.contactUrl)} style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
{fallbackText(cta.contactLabel, formularUploadContent.cta.contactLabel)} <ArrowRight size={14} />
</Link>

43
src/spa/pages/Home.tsx
View File

@@ -212,8 +212,7 @@ const Home: React.FC = () => {
</div>
<h1
className="font-display font-bold text-white mb-6 leading-[0.9] tracking-tight"
style={{ fontSize: isMobile ? 'clamp(1.75rem, 8vw, 3rem)' : 'clamp(3.25rem, 6.5vw, 6rem)' }}
className="type-display text-role-inverse mb-6"
>
<span style={{ display: 'block', whiteSpace: 'nowrap' }}>
{fallbackText(hero.headingLine1, homeContent.hero.headingLine1)}
@@ -223,7 +222,7 @@ const Home: React.FC = () => {
</span>
</h1>
<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 }}>
<p className="type-lead text-role-inverse-secondary mb-12" style={{ maxWidth: isMobile ? '100%' : '36rem', marginBottom: isMobile ? 28 : undefined }}>
{fallbackText(hero.description, homeContent.hero.description)}
</p>
@@ -291,14 +290,14 @@ const Home: React.FC = () => {
{/* 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 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</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' }}>
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
</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 }}>
<p className="type-body text-role-secondary" style={{ marginBottom: 32 }}>
{fallbackText(quickCheck.body, homeContent.quickCheck.body)}
</p>
{/* Criteria list */}
@@ -315,7 +314,7 @@ 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 }}>
<p className="type-small text-role-secondary" style={{ marginTop: 16, marginBottom: 28 }}>
{fallbackText(quickCheck.note, homeContent.quickCheck.note)}
</p>
<Link
@@ -343,7 +342,7 @@ const Home: React.FC = () => {
{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 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</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)' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
<Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
</h2>
</div>
@@ -373,7 +372,7 @@ const Home: React.FC = () => {
{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 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</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)' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
<Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
</h2>
</div>
@@ -395,8 +394,8 @@ const Home: React.FC = () => {
<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 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</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' }}>
<span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
</h2>
</>
@@ -407,16 +406,16 @@ const Home: React.FC = () => {
{introStats.map(({ value: v, label: 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 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-eyebrow-light)', 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' }}>
<blockquote className="type-body text-role-heading" style={{ fontStyle: 'italic', borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
{fallbackText(intro.quote, homeContent.intro.quote)}
</blockquote>
<p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: '0 0 36px' }}>
<p className="type-body text-role-secondary" style={{ margin: '0 0 36px' }}>
{fallbackText(intro.body, homeContent.intro.body)}
</p>
<Link
@@ -444,8 +443,8 @@ const Home: React.FC = () => {
<div style={{ background: '#fff', 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 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</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' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 48px' }}>
<Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
</h2>
</>
@@ -460,7 +459,7 @@ const Home: React.FC = () => {
onMouseEnter={e => (e.currentTarget.style.background = 'rgba(17,29,85,0.04)')}
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
>
<span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.1em', paddingTop: 2 }}>{item.num}</span>
<span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: 'var(--text-brand-on-light)', letterSpacing: '0.1em', paddingTop: 2 }}>{item.num}</span>
<div>
<div style={{ fontFamily: FF, fontSize: 17, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 5 }}>{item.title}</div>
<div style={{ fontFamily: FF, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6 }}>{item.desc}</div>
@@ -484,7 +483,7 @@ const Home: React.FC = () => {
{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 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</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)' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
<Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
</h2>
</div>
@@ -527,8 +526,8 @@ const Home: React.FC = () => {
) : (
<div className="text-center">
<Play size={80} className="text-accent mx-auto mb-6 opacity-40" />
<p className="text-white/40 uppercase tracking-widest text-sm">{videoTitle}</p>
<p className="text-white/60 mt-4 text-xs italic font-body">{fallbackText(videoModal.description, homeContent.videoModal.description)}</p>
<p className="type-small text-role-inverse-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>{videoTitle}</p>
<p className="type-caption text-role-inverse-secondary" style={{ marginTop: 16, fontStyle: 'italic' }}>{fallbackText(videoModal.description, homeContent.videoModal.description)}</p>
<Button type="button" onClick={() => setShowVideo(false)} className="mt-8" variant="outline">{fallbackText(videoModal.closeLabel, homeContent.videoModal.closeLabel)}</Button>
</div>
)}
@@ -628,10 +627,10 @@ function StatusSlideCard({
{/* Headline + body + CTA */}
<div>
<h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(2.4rem, 3.8vw, 3.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.94, margin: '0 0 24px' }}>
<h2 className="type-page-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
{phase.headline}
</h2>
<p style={{ fontFamily: '"Inter", sans-serif', fontSize: 17, color: '#C7CAD1', lineHeight: 1.8, marginBottom: 32, maxWidth: isMobile ? 520 : 760 }}>
<p className="type-body text-role-inverse-secondary" style={{ marginBottom: 32, maxWidth: isMobile ? 520 : 760 }}>
{phase.body}
</p>
{phase.cta ? (

69
src/spa/pages/MitgliedWerden.tsx
View File

@@ -15,7 +15,7 @@ const GOLD = '#EFBF04';
const CREAM = '#EFE5E3';
const FF = '"IBM Plex Sans", sans-serif';
const FB = '"Inter", sans-serif';
const BLUE = '#4A8FC9';
const BLUE = 'var(--text-eyebrow-light)';
// ── Benefit card with hover accent line ──────────────────────────────────────
@@ -133,7 +133,7 @@ function BeitragsrechnerSection({ isMobile, content }: { isMobile: boolean; cont
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.32em', color: BLUE, display: 'block', marginBottom: 16 }}>
{fallbackText(content.eyebrow, fallback.eyebrow)}
</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: '0 0 20px' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
{fallbackText(content.heading, fallback.heading)}
</h2>
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 48 }} />
@@ -524,7 +524,7 @@ function FAQSection({ isMobile, content }: { isMobile: boolean; content: Partial
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.32em', color: BLUE, display: 'block', marginBottom: 16 }}>
{fallbackText(content.eyebrow, mitgliedWerdenContent.faq.eyebrow)}
</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: '0 0 20px' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
{fallbackText(content.heading, mitgliedWerdenContent.faq.heading)}
</h2>
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 48 }} />
@@ -609,12 +609,9 @@ function QuoteCard({
}}
>
<p
className="type-body text-role-body"
style={{
fontFamily: FB,
fontSize: 18,
fontStyle: 'italic',
color: 'rgba(16,24,40,0.7)',
lineHeight: 1.75,
margin: '0 0 24px',
flex: 1,
}}
@@ -791,14 +788,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(hero.eyebrow, mitgliedWerdenContent.hero.eyebrow)}
</span>
<h1
className="type-display text-role-inverse"
style={{
fontFamily: FF,
fontSize: isMobile ? 'clamp(2rem, 9vw, 2.6rem)' : 'clamp(2.8rem, 6vw, 5rem)',
fontWeight: 900,
color: '#fff',
textTransform: 'uppercase',
lineHeight: 0.95,
letterSpacing: '-0.03em',
margin: '0 0 28px',
}}
>
@@ -806,13 +798,9 @@ const MitgliedWerden: React.FC = () => {
</h1>
<div style={{ width: 48, height: 3, background: GOLD, marginBottom: 28 }} />
<p
className="type-body text-role-inverse-secondary"
style={{
fontFamily: FB,
fontSize: 18,
fontWeight: 300,
color: 'rgba(255,255,255,0.55)',
maxWidth: 520,
lineHeight: 1.75,
margin: 0,
}}
>
@@ -914,14 +902,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(benefits.eyebrow, mitgliedWerdenContent.benefits.eyebrow)}
</span>
<h2
className="type-section-title text-role-heading"
style={{
fontFamily: FF,
fontSize: 'clamp(2rem, 4vw, 3rem)',
fontWeight: 900,
color: '#101828',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
lineHeight: 1.03,
margin: '0 0 20px',
}}
>
@@ -977,14 +960,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(about.eyebrow, mitgliedWerdenContent.about.eyebrow)}
</span>
<h2
className="type-section-title text-role-heading"
style={{
fontFamily: FF,
fontSize: 'clamp(2rem, 3.5vw, 3rem)',
fontWeight: 900,
color: '#101828',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
lineHeight: 1.03,
margin: '0 0 20px',
}}
>
@@ -994,11 +972,8 @@ const MitgliedWerden: React.FC = () => {
{aboutParagraphs.map((paragraph, index) => (
<p
key={`${paragraph}-${index}`}
className="type-body text-role-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(16,24,40,0.55)',
lineHeight: 1.85,
margin: index === aboutParagraphs.length - 1 ? '0 0 40px' : index === 0 ? '0 0 20px' : '0 0 40px',
}}
>
@@ -1128,14 +1103,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(formIntro.eyebrow, mitgliedWerdenContent.formIntro.eyebrow)}
</span>
<h2
className="type-section-title text-role-inverse"
style={{
fontFamily: FF,
fontSize: 'clamp(2rem, 3.2vw, 2.8rem)',
fontWeight: 900,
color: '#fff',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
lineHeight: 1.04,
margin: '0 0 20px',
}}
>
@@ -1143,11 +1113,8 @@ const MitgliedWerden: React.FC = () => {
</h2>
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
<p
className="type-body text-role-inverse-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(255,255,255,0.5)',
lineHeight: 1.8,
maxWidth: 400,
marginBottom: 48,
}}
@@ -1261,14 +1228,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(testimonials.eyebrow, mitgliedWerdenContent.testimonials.eyebrow)}
</span>
<h2
className="type-section-title text-role-heading"
style={{
fontFamily: FF,
fontSize: 'clamp(2rem, 4vw, 3rem)',
fontWeight: 900,
color: '#101828',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
lineHeight: 1.03,
margin: '0 0 20px',
}}
>
@@ -1317,14 +1279,9 @@ const MitgliedWerden: React.FC = () => {
{fallbackText(bottomCta.eyebrow, mitgliedWerdenContent.bottomCta.eyebrow)}
</span>
<h2
className="type-section-title text-role-inverse"
style={{
fontFamily: FF,
fontSize: 'clamp(2rem, 4vw, 3.2rem)',
fontWeight: 900,
color: '#fff',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
lineHeight: 1.03,
margin: '0 auto 20px',
maxWidth: 640,
}}

45
src/spa/pages/Netzwerk.tsx
View File

@@ -368,15 +368,12 @@ function PartnerModal({ partner, copy, onClose }: { partner: Partner; copy: Part
{/* ── Content ── */}
<div style={{ padding: '72px 32px 32px' }}>
<h2 style={{
fontFamily: FF, fontSize: 'clamp(1.5rem, 3vw, 2rem)',
fontWeight: 900, color: '#101828',
letterSpacing: '-0.025em', lineHeight: 1.05,
<h2 className="type-subtitle text-role-heading" style={{
margin: '0 0 10px',
}}>
{partner.name}
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.65, margin: '0 0 24px' }}>
<p className="type-body text-role-secondary" style={{ margin: '0 0 24px' }}>
{partner.desc}
</p>
@@ -407,7 +404,7 @@ function PartnerModal({ partner, copy, onClose }: { partner: Partner; copy: Part
{fallbackText(copy.aboutLabel, netzwerkContent.partners.modal.aboutLabel)}
</span>
</div>
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(16,24,40,0.6)', lineHeight: 1.82, marginBottom: 36 }}>
<p className="type-body text-role-secondary" style={{ marginBottom: 36 }}>
{partner.fullDesc}
</p>
@@ -534,10 +531,10 @@ const Netzwerk: React.FC = () => {
<div style={{ width: 40, height: 2, background: GOLD }} />
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD }}>{fallbackText(hero.eyebrow, netzwerkContent.hero.eyebrow)}</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 28px' }}>
<h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 28px' }}>
<Lines text={fallbackText(hero.heading, netzwerkContent.hero.heading)} highlight={fallbackText(hero.highlight, netzwerkContent.hero.highlight)} />
</h1>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, maxWidth: 560, margin: 0, fontWeight: 300 }}>
<p className="type-body text-role-inverse-secondary" style={{ maxWidth: 560, margin: 0 }}>
{fallbackText(hero.description, netzwerkContent.hero.description)}
</p>
</div>
@@ -548,9 +545,9 @@ const Netzwerk: React.FC = () => {
<section id="schirmherrschaft" style={{ background: NAVY }}>
<div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px' }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(patronage.eyebrow, netzwerkContent.patronage.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 20px' }}>{fallbackText(patronage.heading, netzwerkContent.patronage.heading)}</h2>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>{fallbackText(patronage.heading, netzwerkContent.patronage.heading)}</h2>
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 14 }} />
<p style={{ fontFamily: FF, fontSize: 18, color: 'rgba(255,255,255,0.5)', margin: 0 }}>{fallbackText(patronage.description, netzwerkContent.patronage.description)}</p>
<p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>{fallbackText(patronage.description, netzwerkContent.patronage.description)}</p>
</div>
<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' }}>
@@ -579,7 +576,7 @@ const Netzwerk: React.FC = () => {
<div style={{ fontFamily: FF, fontSize: 17, color: 'rgba(255,255,255,0.4)', lineHeight: 1.6 }}>{fallbackText(patronage.greetingTitleLine2, netzwerkContent.patronage.greetingTitleLine2)}</div>
</div>
<div>
<blockquote style={{ fontFamily: FF, fontSize: 18, fontStyle: 'italic', color: 'rgba(255,255,255,0.8)', lineHeight: 1.75, margin: 0, paddingLeft: 24, borderLeft: `3px solid ${GOLD}` }}>
<blockquote className="type-body text-role-inverse-secondary" style={{ fontStyle: 'italic', margin: 0, paddingLeft: 24, borderLeft: `3px solid ${GOLD}` }}>
{fallbackText(patronage.greetingQuote, netzwerkContent.patronage.greetingQuote)}
</blockquote>
<div style={{ fontFamily: FF, fontSize: 11, color: 'rgba(255,255,255,0.35)', marginTop: 20, paddingLeft: 24 }}>
@@ -642,11 +639,11 @@ const Netzwerk: React.FC = () => {
/* 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 }}>{fallbackText(juryIntro.eyebrow, netzwerkContent.juryIntro.eyebrow)}</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' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 22px' }}>
<Lines text={fallbackText(juryIntro.heading, netzwerkContent.juryIntro.heading)} />
</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 }}>
<p className="type-small text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(juryIntro.description, netzwerkContent.juryIntro.description)}
</p>
{/* Stat strip */}
@@ -681,11 +678,11 @@ const Netzwerk: React.FC = () => {
{/* 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 }}>{fallbackText(juryIntro.eyebrow, netzwerkContent.juryIntro.eyebrow)}</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' }}>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
<Lines text={fallbackText(juryIntro.heading, netzwerkContent.juryIntro.heading)} />
</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 }}>
<p className="type-body text-role-inverse-secondary" style={{ marginTop: 24 }}>
{fallbackText(juryIntro.description, netzwerkContent.juryIntro.description)}
</p>
</div>
@@ -699,9 +696,9 @@ const Netzwerk: React.FC = () => {
<div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 48, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(jury.eyebrow, netzwerkContent.jury.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.95, margin: 0 }}><Lines text={fallbackText(jury.heading, netzwerkContent.jury.heading)} /></h2>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: 0 }}><Lines text={fallbackText(jury.heading, netzwerkContent.jury.heading)} /></h2>
</div>
<p style={{ fontFamily: FB, fontSize: 19, color: 'rgba(255,255,255,0.4)', lineHeight: 1.8, margin: 0 }}>
<p className="type-body text-role-inverse-secondary" style={{ margin: 0 }}>
{fallbackText(jury.description, netzwerkContent.jury.description)}
</p>
</div>
@@ -726,7 +723,7 @@ const Netzwerk: React.FC = () => {
<section style={{ background: '#101828', overflow: 'hidden', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', borderTop: '1px solid rgba(255,255,255,0.07)' }}>
<div style={{ padding: isMobile ? '48px 24px' : 80, display: 'flex', flexDirection: 'column', justifyContent: 'center', background: '#101828' }}>
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: GOLD, display: 'block', marginBottom: 16 }}>{fallbackText(expertise.eyebrow, netzwerkContent.expertise.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.0, margin: '0 0 24px' }}><Lines text={fallbackText(expertise.heading, netzwerkContent.expertise.heading)} /></h2>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}><Lines text={fallbackText(expertise.heading, netzwerkContent.expertise.heading)} /></h2>
<div style={{ width: 40, height: 2, background: GOLD, marginBottom: 40 }} />
<div>
{expertiseRows.map((row) => (
@@ -742,7 +739,7 @@ const Netzwerk: React.FC = () => {
</div>
<div style={{ padding: isMobile ? '48px 24px' : '80px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderLeft: isMobile ? 'none' : '1px solid rgba(255,255,255,0.07)', borderTop: isMobile ? '1px solid rgba(255,255,255,0.07)' : 'none', overflow: 'hidden', background: '#101828' }}>
<span style={{ fontFamily: 'Georgia, serif', fontSize: 'clamp(60px, 8vw, 120px)', color: 'rgba(239,191,4,0.1)', lineHeight: 0.8, display: 'block', marginBottom: -20 }}>&ldquo;</span>
<p style={{ fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.4rem)', fontWeight: 300, color: 'rgba(255,255,255,0.75)', lineHeight: 1.65, margin: '0 0 40px' }}>
<p className="type-lead text-role-inverse-secondary" style={{ margin: '0 0 40px' }}>
{fallbackText(expertise.quote, netzwerkContent.expertise.quote)}
</p>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
@@ -758,10 +755,10 @@ const Netzwerk: React.FC = () => {
<MunichSkylineBg />
<div style={{ padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0, justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', borderBottom: '1px solid rgba(3,9,58,0.1)' }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: '#4A8FC9', display: 'block', marginBottom: 16 }}>{fallbackText(partnerSection.eyebrow, netzwerkContent.partners.eyebrow)}</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 }}><Lines text={fallbackText(partnerSection.heading, netzwerkContent.partners.heading)} /></h2>
<span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: 'var(--text-eyebrow-light)', display: 'block', marginBottom: 16 }}>{fallbackText(partnerSection.eyebrow, netzwerkContent.partners.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}><Lines text={fallbackText(partnerSection.heading, netzwerkContent.partners.heading)} /></h2>
</div>
<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 }}>
<p className="type-body text-role-secondary" style={{ maxWidth: isMobile ? '100%' : 220, textAlign: isMobile ? 'left' : 'right', margin: 0 }}>
{visiblePartnerDescription(partnerSection.description)}
</p>
</div>
@@ -795,9 +792,9 @@ const Netzwerk: React.FC = () => {
{/* Left – pitch */}
<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 }}>{fallbackText(sponsoring.eyebrow, netzwerkContent.sponsoring.eyebrow)}</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' }}><Lines text={fallbackText(sponsoring.heading, netzwerkContent.sponsoring.heading)} /></h2>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}><Lines text={fallbackText(sponsoring.heading, netzwerkContent.sponsoring.heading)} /></h2>
<div style={{ width: 36, height: 2, background: GOLD, margin: '0 0 14px', flexShrink: 0 }} />
<p style={{ fontFamily: FB, fontSize: 'clamp(15px, 1.2vw, 17px)', color: 'rgba(255,255,255,0.75)', lineHeight: 1.65, marginBottom: 16 }}>
<p className="type-small text-role-inverse-secondary" style={{ marginBottom: 16 }}>
{fallbackText(sponsoring.description, netzwerkContent.sponsoring.description)}
</p>
{sponsorBenefits.map((item) => (

30
src/spa/pages/Participation.tsx
View File

@@ -80,11 +80,11 @@ const Participation: React.FC = () => {
<div style={{ width: 36, height: 2, background: GOLD }} />
<span style={{ fontFamily: FF, fontSize: 12, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#EFBF04' }}>{fallbackText(hero.eyebrow, participationContent.hero.eyebrow)}</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' }}>
<h1 className="type-display text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 24px' }}>
<Lines text={fallbackText(hero.heading, participationContent.hero.heading)} />
</h1>
<div style={{ width: 48, height: 2, background: GOLD, marginBottom: 24 }} />
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, maxWidth: 520, fontWeight: 300 }}>
<p className="type-body text-role-inverse-secondary" style={{ maxWidth: 520 }}>
{fallbackText(hero.description, participationContent.hero.description)}
</p>
</div>
@@ -99,8 +99,8 @@ const Participation: React.FC = () => {
{/* Header */}
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, alignItems: 'flex-end', borderBottom: `1px solid #D0D5DD` }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(eligibility.eyebrow, participationContent.eligibility.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(eligibility.eyebrow, participationContent.eligibility.eyebrow)}</span>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
<Lines text={fallbackText(eligibility.heading, participationContent.eligibility.heading)} />
</h2>
</div>
@@ -115,7 +115,7 @@ const Participation: React.FC = () => {
{fallbackText(eligibility.primaryCta?.label, participationContent.eligibility.primaryCta.label)} <ArrowRight size={13} />
</Link>
</div>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.8, margin: 0, textAlign: isMobile ? 'left' : 'right' }}>
<p className="type-body text-role-secondary" style={{ margin: 0, textAlign: isMobile ? 'left' : 'right' }}>
{fallbackText(eligibility.description, participationContent.eligibility.description)}
</p>
</div>
@@ -140,7 +140,7 @@ const Participation: React.FC = () => {
<Icon 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 }}>{fallbackText(note.title, '')}</div>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: 0 }}>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>
{fallbackText(note.body, '')}
</p>
</div>
@@ -180,8 +180,8 @@ const Participation: React.FC = () => {
/* 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 }}>{fallbackText(datesBanner.heading, participationContent.datesBanner.heading)}</h3>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.6)', margin: 0 }}>{fallbackText(datesBanner.description, participationContent.datesBanner.description)}</p>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 6 }}>{fallbackText(datesBanner.heading, participationContent.datesBanner.heading)}</h3>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>{fallbackText(datesBanner.description, participationContent.datesBanner.description)}</p>
</div>
<div style={{ background: 'rgba(3,9,58,0.12)' }} />
{desktopDates.map((d, i) => (
@@ -251,12 +251,12 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
{/* Header */}
<div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '48px 24px 32px' : '80px 80px 56px', borderBottom: '1px solid #D0D5DD' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(section.eyebrow, participationContent.applicationWays.eyebrow)}</span>
<span style={{ fontFamily: FF, fontSize: 10, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(section.eyebrow, participationContent.applicationWays.eyebrow)}</span>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 48, alignItems: 'flex-end' }}>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3.5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: 0 }}>
<Lines text={fallbackText(section.heading, participationContent.applicationWays.heading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.55)', lineHeight: 1.8, margin: 0 }}>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>
{fallbackText(section.description, participationContent.applicationWays.description)}
</p>
</div>
@@ -277,8 +277,8 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
<Icon size={20} style={{ color: GOLD }} strokeWidth={1.6} />
</div>
<span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(16,24,40,0.4)', display: 'block', marginBottom: 8 }}>{fallbackText(w.label, '')}</span>
<h3 style={{ fontFamily: FF, fontSize: '1.45rem', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 10px' }}><Lines text={fallbackText(w.title, '')} /></h3>
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, margin: '0 0 20px' }}>{fallbackText(w.desc, '')}</p>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 10px' }}><Lines text={fallbackText(w.title, '')} /></h3>
<p className="type-small text-role-secondary" style={{ margin: '0 0 20px' }}>{fallbackText(w.desc, '')}</p>
<div style={{ width: 36, height: 2, background: GOLD }} />
</div>
{/* Detail list */}
@@ -315,10 +315,10 @@ function BewerbungswegeSection({ content }: { content?: ApplicationWaysContent }
<Icon 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 }}>{fallbackText(w.label, '')}</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' }}>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 8px' }}>
<Lines text={fallbackText(w.title, '')} />
</h3>
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.7, margin: '0 0 32px' }}>
<p className="type-body text-role-secondary" style={{ margin: '0 0 32px' }}>
{fallbackText(w.desc, '')}
</p>

52
src/spa/pages/Preistraeger.tsx
View File

@@ -200,9 +200,11 @@ export default function Preistraeger() {
<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)' }} />
</div>
{/* Breadcrumb */}
{/* Page title */}
<div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '18px 24px' : '18px 80px' }}>
<span style={{ fontFamily: FF, fontSize: 16, color: GOLD, fontWeight: 600, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}</span>
<h1 className="type-card-title text-role-brand-light" style={{ margin: 0 }}>
{fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}
</h1>
</div>
{/* Year Filter Section */}
@@ -284,7 +286,7 @@ export default function Preistraeger() {
{/* Bottom CTA */}
<div style={{ padding: isMobile ? '48px 24px' : '64px 80px', borderTop: `1px solid ${BORDER}`, textAlign: 'center' }}>
<p style={{ fontFamily: FF, fontSize: 17, color: GRAY, marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
<p className="type-body text-role-secondary" style={{ marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
<Link
to={fallbackText(cta.primaryCta?.url, preistraegerIndexContent.cta.primaryCta.url)}
style={{
@@ -306,13 +308,13 @@ export default function Preistraeger() {
function SectionIntro({ copy, isMobile }: { copy: typeof preistraegerIndexContent.winners; isMobile: boolean }) {
return (
<div style={{ padding: isMobile ? '40px 24px 22px' : '56px 80px 28px', maxWidth: 900 }}>
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
{fallbackText(copy.eyebrow, preistraegerIndexContent.winners.eyebrow)}
</span>
<h2 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 28 : 42, fontWeight: 900, lineHeight: 1.05, margin: '10px 0 12px', textTransform: 'uppercase', letterSpacing: 0 }}>
<h2 className="type-section-title text-role-heading" style={{ margin: '10px 0 12px', textTransform: 'uppercase' }}>
{fallbackText(copy.heading, preistraegerIndexContent.winners.heading)}
</h2>
<p style={{ color: GRAY, fontFamily: FF, fontSize: 17, lineHeight: 1.6, margin: 0, maxWidth: 680 }}>
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 680 }}>
{fallbackText(copy.description, preistraegerIndexContent.winners.description)}
</p>
</div>
@@ -333,13 +335,13 @@ function GoldeneBavariaSection({
return (
<section style={{ background: NAVY, color: '#fff', borderTop: `1px solid ${BORDER}` }}>
<div style={{ padding: isMobile ? '44px 24px 26px' : '64px 80px 34px', maxWidth: 980 }}>
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
<span className="type-eyebrow text-role-inverse" style={{ color: GOLD, textTransform: 'uppercase' }}>
{fallbackText(copy.eyebrow, preistraegerIndexContent.goldeneBavaria.eyebrow)}
</span>
<h2 style={{ color: '#fff', fontFamily: FF, fontSize: isMobile ? 30 : 48, fontWeight: 900, lineHeight: 1.02, margin: '10px 0 14px', textTransform: 'uppercase', letterSpacing: 0 }}>
<h2 className="type-section-title text-role-inverse" style={{ margin: '10px 0 14px', textTransform: 'uppercase' }}>
{fallbackText(copy.heading, preistraegerIndexContent.goldeneBavaria.heading)}
</h2>
<p style={{ color: 'rgba(255,255,255,0.74)', fontFamily: FF, fontSize: 18, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
<p className="type-body text-role-inverse-secondary" style={{ margin: 0, maxWidth: 760 }}>
{fallbackText(copy.description, preistraegerIndexContent.goldeneBavaria.description)}
</p>
</div>
@@ -381,13 +383,13 @@ function GoldeneBavariaCard({ winner, rank, hoverLabel }: { winner: Winner; rank
</div>
</div>
<div style={{ padding: isMobile ? '20px' : '24px' }}>
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
{winner.year} · {winner.category}
</span>
<h3 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 23 : 26, fontWeight: 900, lineHeight: 1.12, margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
<h3 className="type-card-title text-role-heading" style={{ margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
{winner.name}
</h3>
<p style={{ color: GRAY, fontFamily: FF, fontSize: 15, lineHeight: 1.55, margin: 0, overflowWrap: 'anywhere' }}>
<p className="type-small text-role-secondary" style={{ margin: 0, overflowWrap: 'anywhere' }}>
{winner.shortDesc}
</p>
<span style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 7, color: NAVY, fontFamily: FF, fontSize: 14, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
@@ -428,10 +430,10 @@ function WinnerCard({ winner, hoverLabel }: { winner: Winner; hoverLabel: string
{winner.year} · {winner.type}
</span>
</div>
<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)' }}>
<h3 className="type-card-title text-role-inverse" style={{ margin: 0, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
{winner.name}
</h3>
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.82)', margin: '4px 0 0', lineHeight: 1.3 }}>
<p className="type-small text-role-inverse-secondary" style={{ margin: '4px 0 0' }}>
{winner.category}
</p>
@@ -491,14 +493,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 18 }}>
{winnerMeta ? (
<span style={{
color: GOLD,
fontFamily: FF,
fontSize: 12,
fontWeight: 700,
letterSpacing: '0.12em',
textTransform: 'uppercase',
}}>
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
{winnerMeta}
</span>
) : null}
@@ -517,12 +512,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
) : null}
</div>
<h3 style={{
color: NAVY,
fontFamily: FF,
fontSize: isMobile ? 20 : 22,
fontWeight: 700,
lineHeight: 1.18,
<h3 className="type-card-title text-role-heading" style={{
margin: 0,
overflowWrap: 'anywhere',
}}>
@@ -530,11 +520,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
</h3>
{hasDescription ? (
<p style={{
color: GRAY,
fontFamily: FF,
fontSize: 15,
lineHeight: 1.55,
<p className="type-small text-role-secondary" style={{
margin: '16px 0 0',
overflowWrap: 'anywhere',
}}>

28
src/spa/pages/PreistraegerDetail.tsx
View File

@@ -122,7 +122,7 @@ export default function PreistraegerDetail() {
{/* Breadcrumb */}
<div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '16px 24px' : '16px 80px', display: 'flex', alignItems: 'center', gap: 8 }}>
<Link to={fallbackText(breadcrumb.url, preistraegerDetailContent.breadcrumb.url)} style={{ fontFamily: FF, fontSize: 16, color: GOLD, textDecoration: 'none', fontWeight: 600 }}>
<Link to={fallbackText(breadcrumb.url, preistraegerDetailContent.breadcrumb.url)} style={{ fontFamily: FF, fontSize: 16, color: 'var(--text-brand-on-light)', textDecoration: 'none', fontWeight: 600 }}>
{fallbackText(breadcrumb.label, preistraegerDetailContent.breadcrumb.label)}
</Link>
<ChevronRight size={14} style={{ color: GRAY }} />
@@ -140,7 +140,7 @@ export default function PreistraegerDetail() {
{winner.category}
</span>
{typeof winner.year === 'number' ? (
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: GOLD }}>
<span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: 'var(--text-brand-on-light)' }}>
{winner.year}
</span>
) : null}
@@ -148,10 +148,10 @@ export default function PreistraegerDetail() {
{winner.type}
</span>
</div>
<h1 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.6rem, 5vw, 3rem)' : 'clamp(2rem, 5vw, 3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: '0 0 12px' }}>
<h1 className="type-page-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
{winner.name}
</h1>
<p style={{ fontFamily: FB, fontSize: 18, color: GRAY, margin: 0, maxWidth: 640, lineHeight: 1.6 }}>
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 640 }}>
{winner.shortDesc}
</p>
</div>
@@ -160,28 +160,28 @@ export default function PreistraegerDetail() {
<div style={{ padding: isMobile ? '48px 24px' : '64px 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 1fr', gap: isMobile ? 40 : 64 }}>
{/* Left: Text */}
<div>
<h2 style={{ fontFamily: FF, fontSize: 18, fontWeight: 800, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 20 }}>
<h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 20 }}>
{fallbackText(sections.companyHeading, preistraegerDetailContent.sections.companyHeading)}
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: '#333', lineHeight: 1.8, marginBottom: 40 }}>
<p className="type-body text-role-body" style={{ marginBottom: 40 }}>
{winner.longDesc}
</p>
<h2 style={{ fontFamily: FF, fontSize: 18, fontWeight: 800, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 20 }}>
<h2 className="type-subtitle text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 20 }}>
{fallbackText(sections.juryHeading, preistraegerDetailContent.sections.juryHeading)}
</h2>
<p style={{ fontFamily: FB, fontSize: 18, color: '#333', lineHeight: 1.8, marginBottom: 40 }}>
<p className="type-body text-role-body" style={{ marginBottom: 40 }}>
{fallbackText(sections.juryTextBeforeName, preistraegerDetailContent.sections.juryTextBeforeName)} {winner.name} {fallbackText(sections.juryTextAfterNameBeforeCategory, preistraegerDetailContent.sections.juryTextAfterNameBeforeCategory)} <strong>{winner.category}</strong>. {fallbackText(sections.juryTextAfterCategory, preistraegerDetailContent.sections.juryTextAfterCategory)}
</p>
{/* Quote */}
<div style={{ borderLeft: `4px solid ${GOLD}`, paddingLeft: 24, marginBottom: 40 }}>
<p style={{ fontFamily: FB, fontStyle: 'italic', fontSize: 18, color: '#101828', lineHeight: 1.7, marginBottom: 12 }}>
<p className="type-body text-role-heading" style={{ fontStyle: 'italic', marginBottom: 12 }}>
<span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginRight: 4, fontFamily: '"IBM Plex Sans"' }}>&ldquo;</span>
{winner.quote}
<span style={{ color: GOLD, fontSize: 28, lineHeight: 1, marginLeft: 2, fontFamily: '"IBM Plex Sans"' }}>&rdquo;</span>
</p>
<p style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: GRAY, margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
<p className="type-small text-role-secondary" style={{ fontWeight: 700, margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
– {winner.quotePerson}, {winner.quoteRole}
</p>
</div>
@@ -196,7 +196,7 @@ export default function PreistraegerDetail() {
{/* Kenndaten */}
<div style={{ background: BG_ALT, borderLeft: `3px solid ${GOLD}`, padding: '20px 24px' }}>
<h3 style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: GRAY, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 20 }}>
<h3 className="type-small text-role-secondary" style={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 20 }}>
{fallbackText(facts.heading, preistraegerDetailContent.facts.heading)}
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -259,11 +259,11 @@ export default function PreistraegerDetail() {
<section style={{ borderTop: `1px solid ${BORDER}`, background: '#fff' }}>
<div style={{ padding: isMobile ? '48px 24px' : '64px 80px' }}>
<div style={{ marginBottom: 28, maxWidth: 760 }}>
<h2 style={{ fontFamily: FF, fontSize: isMobile ? 26 : 34, fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.02em', margin: '0 0 12px' }}>
<h2 className="type-section-title text-role-heading" style={{ textTransform: 'uppercase', margin: '0 0 12px' }}>
{fallbackText(gallery.heading, 'Bildergalerie')}
</h2>
{gallery.description ? (
<p style={{ fontFamily: FB, fontSize: 17, color: GRAY, lineHeight: 1.7, margin: 0 }}>
<p className="type-body text-role-secondary" style={{ margin: 0 }}>
{gallery.description}
</p>
) : null}
@@ -360,7 +360,7 @@ export default function PreistraegerDetail() {
style={{ maxWidth: '100%', maxHeight: activeGalleryImage.caption ? '76vh' : '84vh', objectFit: 'contain', display: 'block' }}
/>
{activeGalleryImage.caption ? (
<p style={{ fontFamily: FB, fontSize: 16, lineHeight: 1.6, color: '#fff', margin: 0, textAlign: 'center', overflowWrap: 'anywhere' }}>
<p className="type-small text-role-inverse" style={{ margin: 0, textAlign: 'center', overflowWrap: 'anywhere' }}>
{activeGalleryImage.caption}
</p>
) : null}

70
src/spa/pages/Press.tsx
View File

@@ -140,14 +140,9 @@ function NewsCard({ item, idx, isMobile, total }: { item: PressNewsItem; idx: nu
{item.cat}
</span>
<h3
className="type-card-title text-role-inverse"
style={{
fontFamily: FF,
fontSize: 'clamp(1rem, 1.5vw, 1.2rem)',
fontWeight: 700,
color: '#fff',
textTransform: 'uppercase',
letterSpacing: '-0.01em',
lineHeight: 1.25,
marginBottom: 16,
}}
>
@@ -163,11 +158,8 @@ function NewsCard({ item, idx, isMobile, total }: { item: PressNewsItem; idx: nu
}}
/>
<p
className="type-body text-role-inverse-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(255,255,255,0.4)',
lineHeight: 1.7,
flex: 1,
marginBottom: 20,
}}
@@ -265,13 +257,8 @@ const Press: React.FC = () => {
</span>
</div>
<h1
className="type-display text-role-inverse"
style={{
fontFamily: FF,
fontSize: isMobile ? 'clamp(2rem, 8vw, 2.8rem)' : 'clamp(2.8rem, 6vw, 5rem)',
fontWeight: 900,
color: '#fff',
lineHeight: 0.95,
letterSpacing: '-0.03em',
textTransform: 'uppercase',
margin: '0 0 24px',
overflowWrap: 'anywhere',
@@ -281,13 +268,9 @@ const Press: React.FC = () => {
</h1>
<div style={{ width: 48, height: 2, background: GOLD, marginBottom: 24 }} />
<p
className="type-body text-role-inverse-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(255,255,255,0.6)',
fontWeight: 300,
maxWidth: 520,
lineHeight: 1.7,
margin: 0,
}}
>
@@ -318,20 +301,16 @@ const Press: React.FC = () => {
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.28em',
color: '#4A8FC9',
color: 'var(--text-eyebrow-light)',
marginBottom: 16,
}}
>
{fallbackText(eventsSection.eyebrow, pressIndexContent.events.eyebrow)}
</div>
<h2
className="type-section-title text-role-heading"
style={{
fontFamily: FF,
fontWeight: 900,
color: '#101828',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
fontSize: 'clamp(2rem, 3.5vw, 3rem)',
margin: 0,
}}
>
@@ -340,11 +319,8 @@ const Press: React.FC = () => {
</div>
<div>
<p
className="type-body text-role-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(16,24,40,0.45)',
lineHeight: 1.8,
margin: 0,
}}
>
@@ -378,8 +354,8 @@ const Press: React.FC = () => {
{/* Right – copy cell */}
<div style={{ padding: isMobile ? '24px 24px 32px' : '40px 56px 40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
<div style={{ fontFamily: FF, fontSize: 9, color: '#4A8FC9', textTransform: 'uppercase' as const, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>{event.cat}</div>
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase' as const, letterSpacing: '-0.02em', margin: '0 0 14px' }}>{event.title}</h3>
<div style={{ fontFamily: FF, fontSize: 9, color: 'var(--text-eyebrow-light)', textTransform: 'uppercase' as const, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>{event.cat}</div>
<h3 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase' as const, margin: '0 0 14px' }}>{event.title}</h3>
<div style={{ display: 'flex', gap: isMobile ? 16 : 28, alignItems: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)' }}>
<Calendar size={14} color={GOLD} />{event.date}
@@ -389,7 +365,7 @@ const Press: React.FC = () => {
</div>
</div>
<div style={{ width: 24, height: 1, background: 'rgba(239,191,4,0.4)', marginBottom: 14 }} />
<p style={{ fontFamily: FB, fontSize: 18, color: 'rgba(16,24,40,0.5)', lineHeight: 1.7, flex: 1 }}>{event.desc}</p>
<p className="type-body text-role-secondary" style={{ flex: 1 }}>{event.desc}</p>
</div>
</Link>
))}
@@ -423,13 +399,9 @@ const Press: React.FC = () => {
{fallbackText(newsSection.eyebrow, pressIndexContent.news.eyebrow)}
</div>
<h2
className="type-section-title text-role-inverse"
style={{
fontFamily: FF,
fontWeight: 900,
color: '#fff',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
fontSize: 'clamp(2rem, 3.5vw, 3rem)',
margin: 0,
}}
>
@@ -438,11 +410,8 @@ const Press: React.FC = () => {
</div>
<div>
<p
className="type-body text-role-inverse-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(255,255,255,0.4)',
lineHeight: 1.8,
margin: 0,
}}
>
@@ -481,7 +450,7 @@ const Press: React.FC = () => {
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.28em',
color: '#4A8FC9',
color: 'var(--text-eyebrow-light)',
marginBottom: 16,
}}
>
@@ -489,13 +458,9 @@ const Press: React.FC = () => {
</div>
<h2
className="type-section-title text-role-heading"
style={{
fontFamily: FF,
fontWeight: 900,
color: '#101828',
textTransform: 'uppercase',
letterSpacing: '-0.025em',
fontSize: 'clamp(1.8rem, 3vw, 2.6rem)',
margin: '0 0 20px',
}}
>
@@ -506,11 +471,8 @@ const Press: React.FC = () => {
<div style={{ width: 40, height: 2, background: GOLD, margin: '0 0 28px' }} />
<p
className="type-body text-role-secondary"
style={{
fontFamily: FB,
fontSize: 18,
color: 'rgba(16,24,40,0.5)',
lineHeight: 1.8,
maxWidth: 380,
marginBottom: 0,
}}
@@ -524,7 +486,7 @@ const Press: React.FC = () => {
style={{
fontFamily: FF,
fontSize: 10,
color: '#4A8FC9',
color: 'var(--text-eyebrow-light)',
textTransform: 'uppercase',
letterSpacing: '0.2em',
fontWeight: 700,