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

- 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.

src/spa/pages/Contact.tsx

@@ -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>