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/app/(frontend)/globals.css

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