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/components/layout/Layout.tsx

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