perf: Lighthouse optimizations - lazy loading, contrast fixes, LCP preload, SEO links

bizmatch/src/app/pages/home/home.component.scss

@@ -1,7 +1,7 @@
-
 select:not([size]) {
   background-image: unset;
 }
+
 [type='text'],
 [type='email'],
 [type='url'],
@@ -19,39 +19,51 @@ textarea,
 select {
   border: unset;
 }
+
 .toggle-checkbox:checked {
   right: 0;
   border-color: rgb(125 211 252);
 }
-.toggle-checkbox:checked + .toggle-label {
+
+.toggle-checkbox:checked+.toggle-label {
   background-color: rgb(125 211 252);
 }
+
 :host ::ng-deep .ng-select.ng-select-single .ng-select-container {
   min-height: 52px;
   border: none;
   background-color: transparent;
+
   .ng-value-container .ng-input {
     top: 12px;
   }
+
   span.ng-arrow-wrapper {
     display: none;
   }
 }
+
 select {
-  color: #000; /* Standard-Textfarbe für das Dropdown */
+  color: #000;
+  /* Standard-Textfarbe für das Dropdown */
   // background-color: #fff; /* Hintergrundfarbe für das Dropdown */
 }
 
 select option {
-  color: #000; /* Textfarbe für Dropdown-Optionen */
+  color: #000;
+  /* Textfarbe für Dropdown-Optionen */
 }
 
 select.placeholder-selected {
-  color: #999; /* Farbe für den Platzhalter */
+  color: #6b7280;
+  /* gray-500 - besserer Kontrast für WCAG AA */
 }
+
 input::placeholder {
-  color: #555; /* Dunkleres Grau */
-  opacity: 1; /* Stellt sicher, dass die Deckkraft 100% ist */
+  color: #555;
+  /* Dunkleres Grau */
+  opacity: 1;
+  /* Stellt sicher, dass die Deckkraft 100% ist */
 }
 
 /* Stellt sicher, dass die Optionen im Dropdown immer schwarz sind */
@@ -59,10 +71,14 @@ select:focus option,
 select:hover option {
   color: #000 !important;
 }
+
 input[type='text'][name='aiSearchText'] {
-  padding: 14px; /* Innerer Abstand */
-  font-size: 16px; /* Schriftgröße anpassen */
-  box-sizing: border-box; /* Padding und Border in die Höhe und Breite einrechnen */
+  padding: 14px;
+  /* Innerer Abstand */
+  font-size: 16px;
+  /* Schriftgröße anpassen */
+  box-sizing: border-box;
+  /* Padding und Border in die Höhe und Breite einrechnen */
   height: 48px;
 }
 
@@ -145,6 +161,7 @@ select,
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -212,6 +229,7 @@ header {
     transition: all 0.2s ease-in-out;
 
     &.text-blue-600.border.border-blue-600 {
+
       // Log In button
       &:hover {
         background-color: rgba(37, 99, 235, 0.05);
@@ -224,6 +242,7 @@ header {
     }
 
     &.bg-blue-600 {
+
       // Register button
       &:hover {
         background-color: rgb(29, 78, 216);
@@ -249,4 +268,4 @@ header {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-}
+}