Update: Abschluss 29.07.2025

assets/scss/_typography.scss

@@ -1,77 +1,95 @@
-// Fonts
-
-@font-face {
-  font-family: 'Open Sans';
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Open Sans Semibold';
-  src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-}
-
-// Using Variables for Font Families
-$font-primary: 'Open Sans', sans-serif;
-$font-secondary: 'Open Sans Semibold', sans-serif;
-$color-heading-h2: #046e6e; // Türkis für h2
+// ===========================
+// TYPOGRAPHY – Schriftarten & Textstile
+// ===========================
 
 body {
-  line-height: 1.5;
-  font-family: $font-primary;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #222;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-h1,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $font-secondary;
-  font-weight: 400;
-  // keine Farbe, Standardfarbe übernehmen
+// ---------------------------
+// Überschriften-Stile
+// ---------------------------
+
+h1 {
+  font-size: 3rem; // Größere Hauptüberschrift
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  color: #046e6e;
 }
 
 h2 {
-  font-family: $font-secondary;
+  font-size: 2rem; // Deutlich kleiner als H1
+  font-style: italic;
   font-weight: 400;
-  color: $color-heading-h2; // Nur h2 in Türkis
-  font-size: $h2;
-
-  @include mobile {
-    font-size: $h2-sm;
-  }
-}
-
-h1 {
-  font-size: $h1;
-
-  @include tablet {
-    font-size: $h1-md;
-  }
-
-  @include mobile {
-    font-size: $h2;
-  }
-
-  @include mobile-xs {
-    font-size: $h2-md;
-  }
+  line-height: 1.4;
+  margin-bottom: 1rem;
+  color: #222; // Normale Textfarbe
 }
 
 h3 {
-  font-size: $h3;
+  font-size: 1.5rem;
+  font-weight: normal;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  color: inherit; // wie Fließtext
 }
 
-h4 {
-  font-size: $h4;
+// ---------------------------
+// Textausrichtung
+// ---------------------------
+
+.text-left    { text-align: left; }
+.text-right   { text-align: right; }
+.text-center  { text-align: center; }
+.text-justify { text-align: justify; }
+
+// ---------------------------
+// Text-Elemente
+// ---------------------------
+
+strong, b {
+  font-weight: 700;
+}
+
+em, i {
+  font-style: italic;
 }
 
 p {
-  color: black;
-  font-size: $font-size;
-  font-family: $font-secondary;
+  margin-bottom: 1.25rem;
+}
+
+// ---------------------------
+// Listen
+// ---------------------------
+
+ul, ol {
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+// ---------------------------
+// Links
+// ---------------------------
+
+a {
+  color: #046e6e;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #F5A623;
+  text-decoration: underline;
 }