Refactor topbar HTML, projects TS and styles

Minor markup and formatting cleanup plus layout adjustments.

- topbar.component.html: removed mat-toolbar color attribute, compacted/normalized element attributes and spacing, fixed small markup spacing issues.
- projects.component.ts: code formatting and whitespace normalization (imports, property spacing, object literals, small function signature/timeout formatting); no logic changes.
- styles.scss: reorganized topbar rules (added app-topbar wrapper, display and color), switched .hero from grid to flex with responsive flex-basis, adjusted photo and intro flex behavior, increased project grid column min width and centered grid with max-width, removed featured card full-width grid span.

These changes improve consistency, readability and adjust layout/responsiveness of the topbar/hero/project grid.

src/app/layout/topbar/topbar.component.html

@@ -1,11 +1,7 @@
-<mat-toolbar class="topbar" color="primary" (keydown)="onKeydown($event)">
+<mat-toolbar class="topbar" (keydown)="onKeydown($event)">
   <a class="brand" routerLink="/">
-    <img class="logo-dot"
+    <img class="logo-dot" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
-         src="{{AssetsConstants.LOGO}}"
+      oncontextmenu="return false;">
-         alt="" aria-hidden="true"
-         draggable="false"
-         oncontextmenu="return false;"
-    >
     <span class="brand-text">{{ 'APP.TITLE' | translate }}</span>
   </a>
 
@@ -17,11 +13,7 @@
   </nav>
 
   <!-- Mobile nav menu button -->
-  <button
+  <button mat-icon-button class="nav-menu-btn" [matMenuTriggerFor]="navMenu" aria-label="Open navigation">
-    mat-icon-button
-    class="nav-menu-btn"
-    [matMenuTriggerFor]="navMenu"
-    aria-label="Open navigation">
     <mat-icon>menu</mat-icon>
   </button>
 
@@ -46,7 +38,8 @@
   <span class="spacer"></span>
 
   <!-- Settings: Sprache + Theme -->
-  <button mat-icon-button [matMenuTriggerFor]="settingsMenu" aria-label="Open settings" matTooltip="{{ 'TOPBAR.SETTINGS' | translate }}">
+  <button mat-icon-button [matMenuTriggerFor]="settingsMenu" aria-label="Open settings"
+    matTooltip="{{ 'TOPBAR.SETTINGS' | translate }}">
     <mat-icon>tune</mat-icon>
   </button>
 

src/app/pages/projects/projects.component.ts

@@ -172,8 +172,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
     }
   }
 
-  private dialogOpenFunction() : void
+  private dialogOpenFunction(): void {
-  {
     this.queryParamSub = this.route.queryParamMap.subscribe(params => {
       const projectIdentifier = params.get('project');
       if (projectIdentifier) {

src/styles.scss

@@ -425,16 +425,21 @@ app-root {
 }
 
 /* ---- Topbar ---- */
-.topbar {
+app-topbar {
   position: sticky;
   top: 0;
   z-index: 100;
+  display: block;
+}
+
+.topbar {
   backdrop-filter: saturate(1.1) blur(8px);
   background: color-mix(in srgb, var(--card-bg) 80%, transparent);
   border-bottom: 1px solid rgba(0, 0, 0, .08);
   display: flex;
   align-items: center;
   padding: clamp(0.5rem, 1vw, 1rem);
+  color: var(--app-fg);
 }
 
 .topbar .brand {
@@ -539,8 +544,8 @@ app-root {
 }
 
 .hero {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 425px), 1fr));
+  flex-wrap: wrap;
   gap: clamp(1rem, 4vw, 1.5rem);
   border-radius: var(--card-radius);
   background: var(--card-bg);
@@ -550,7 +555,8 @@ app-root {
 .hero .photo {
   display: flex;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
+  flex: 0 0 clamp(300px, 100%, 425px);
 }
 
 .hero .photo img {
@@ -567,6 +573,7 @@ app-root {
   display: flex;
   flex-direction: column;
   gap: clamp(0.5rem, 2vw, 1rem);
+  flex: 1 1 300px;
 }
 
 .hero .intro h1 {
@@ -748,7 +755,9 @@ app-root {
 .project-grid {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .project-card {
@@ -763,9 +772,7 @@ app-root {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
-.project-card.featured {
+
-  grid-column: 1 / -1;
-}
 
 .project-card mat-card-header {
   padding-bottom: 1rem;