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

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,