angular update

package.json

@@ -24,13 +24,13 @@
   "private": true,
   "packageManager": "npm@11.8.0",
   "dependencies": {
-    "@angular/common": "^21.2.3",
+    "@angular/common": "^21.2.5",
-    "@angular/compiler": "^21.2.3",
+    "@angular/compiler": "^21.2.5",
-    "@angular/core": "^21.2.3",
+    "@angular/core": "^21.2.5",
-    "@angular/forms": "^21.2.3",
+    "@angular/forms": "^21.2.5",
-    "@angular/platform-browser": "^21.2.3",
+    "@angular/platform-browser": "^21.2.5",
-    "@angular/platform-server": "^21.2.3",
+    "@angular/platform-server": "^21.2.5",
-    "@angular/router": "^21.2.3",
+    "@angular/router": "^21.2.5",
     "@angular/ssr": "^21.0.3",
     "@ng-icons/core": "^33.1.0",
     "@ng-icons/css.gg": "^33.1.0",
@@ -40,11 +40,11 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
+    "@angular/build": "^20.3.21",
     "@angular/cli": "^21.1.4",
-    "@angular/compiler-cli": "^21.2.3",
+    "@angular/compiler-cli": "^21.2.5",
     "@types/express": "^5.0.1",
-    "@types/node": "^20.17.19",
+    "@types/node": "^20.19.37",
     "jsdom": "^27.1.0",
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"

src/styles/abstracts/_mixins.scss

@@ -9,7 +9,7 @@ $breakpoints: (
 );
 
 @mixin breakpoint($size) {
-    @media (width >=map.get($breakpoints, $size)) {
+    @media (width >= map.get($breakpoints, $size)) {
         @content;
     }
 }

src/styles/base/_typography.scss

@@ -0,0 +1,82 @@
+@use 'sass:math';
+@use 'abstracts' as *;
+
+// ==============================
+// Base Typography
+// ==============================
+:root {
+    // Schriftarten (Beispiel: System-Stack)
+    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
+    --font-family-heading: var(--font-family-base); // oder eine spezifische Schrift wie 'Inter', 'Helvetica Neue'
+
+    // Schriftgrößen (fluid, basierend auf _tokens.scss)
+    --font-size-sm: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
+    --font-size-base: var(--font-size-base); // aus _tokens.scss
+    --font-size-lg: var(--font-size-lg);     // aus _tokens.scss
+    --font-size-xl: var(--font-size-xl);     // aus _tokens.scss
+
+    // Schriftgewichte
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    // Zeilenhöhen
+    --line-height-base: 1.5;
+    --line-height-heading: 1.2;
+
+    // Buchstabenabstand
+    --letter-spacing-base: 0;
+    --letter-spacing-heading: -0.02em;
+}
+
+// ==============================
+// Typografie für Elemente
+// ==============================
+body {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    color: var(--text-main);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-heading);
+    margin: 0 0 var(--space-2);
+    color: var(--text-main);
+}
+
+h1 { font-size: var(--font-size-xxl); }
+h2 { font-size: var(--font-size-xl); }
+h3 { font-size: var(--font-size-lg); }
+h4 { font-size: var(--font-size-base); }
+
+p {
+    margin: 0 0 var(--space-3);
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+        color: var(--accent-hover);
+    }
+}
+
+// ==============================
+// Utility-Klassen für Typografie
+// ==============================
+.text-muted {
+    color: var(--text-muted);
+}
+
+.text-center {
+    text-align: center;
+}
+
+.font-light { font-weight: var(--font-weight-light); }
+.font-medium { font-weight: var(--font-weight-medium); }