Style fixes

src/app/header-2/header-2.component.css

@@ -1,12 +1,13 @@
 header {
   width: 100%;
+  background-color: white;
+  z-index: 999;
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: white;
 }
 
 .redirect-img {

src/app/header-2/header-2.component.html

@@ -1,14 +1,14 @@
-<header>
-  <div class="header px-8 py-4 shadow-md">
+<header class="relative shadow-md">
+  <div class="header px-8 pt-4 pb-3 relative">
     <a routerLink="/" class="flex items-center space-x-4 hover:opacity-80 transition">
       <img src="assets/logo.png" class="h-10 w-10 transform scale-175 translate-y-0.25" />
       <h1 class="text-3xl font-semibold tracking-wide">InfiniMotion</h1>
     </a>
 
     <div class="absolute left-1/2 transform -translate-x-1/2 text-center">
-        <h2 class="text-3xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
-          Absolut war gestern, Bewegung ist heute!
-        </h2>
+      <h2 class="text-3xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+        Absolut war gestern, Bewegung ist heute!
+      </h2>
     </div>
 
     <div class="flex items-center space-x-4">

src/app/movie-duration/movie-duration.component.ts

@@ -9,5 +9,10 @@ import { Component, input, computed } from '@angular/core';
 export class MovieDurationComponent {
   duration = input<number>(0);
 
-  durationText = computed(() => `${this.duration()} Min.`);
+  durationText = computed(() => {
+    if (this.duration() > 0) {
+      return `${this.duration()} Min.`;
+    }
+    return 'N/A';
+  });
 }

src/app/movie-performance/movie-performance.component.html

@@ -1,6 +1,6 @@
 <a routerLink="/schedule" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
 
-  <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5">
+  <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
     <p>{{ hall() }}</p>
   </div>
 

src/app/movie-rating/movie-rating.component.ts

@@ -18,5 +18,10 @@ export class MovieRatingComponent {
     return 'bg-white';
   });
 
-  ratingText = computed(() => `FSK ${this.rating()}`);
+  ratingText = computed(() => {
+    if (this.rating() < 0) {
+      return 'FSK ?';
+    }
+    return `FSK ${this.rating()}`
+  });
 }

src/app/navbar/navbar.component.css

@@ -14,12 +14,14 @@ nav {
 
 .gradient-text:hover {
   background: linear-gradient(to right, #6366f1, #db2777);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .navbar a.active {
   background: linear-gradient(to right, #6366f1, #db2777);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold;

src/custom-theme.scss

@@ -6,6 +6,16 @@
 // custom components at https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
 
+  @include mat.progress-bar-overrides((
+    active-indicator-color: white,
+    track-color: transparent,  // Transparent machen
+  ));
+
+  // Gradient als Hintergrund
+  .mdc-linear-progress__buffer-bar {
+    background: linear-gradient(to right, #6366f1, #db2777) !important;
+  }
+
 html {
   @include mat.theme((
     color: (