From 0828493be54193c389877d14d42d3d58c83ab626 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Fri, 31 Oct 2025 14:55:43 +0100
Subject: [PATCH] Style fixes

---
 src/app/header-2/header-2.component.css                |  3 ++-
 src/app/header-2/header-2.component.html               | 10 +++++-----
 src/app/movie-duration/movie-duration.component.ts     |  7 ++++++-
 .../movie-performance/movie-performance.component.html |  2 +-
 src/app/movie-rating/movie-rating.component.ts         |  7 ++++++-
 src/app/navbar/navbar.component.css                    |  2 ++
 src/custom-theme.scss                                  | 10 ++++++++++
 7 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/app/header-2/header-2.component.css b/src/app/header-2/header-2.component.css
index 262bf70..d424c7a 100644
--- a/src/app/header-2/header-2.component.css
+++ b/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 {
diff --git a/src/app/header-2/header-2.component.html b/src/app/header-2/header-2.component.html
index 6e0cf87..8f1c08a 100644
--- a/src/app/header-2/header-2.component.html
+++ b/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">
diff --git a/src/app/movie-duration/movie-duration.component.ts b/src/app/movie-duration/movie-duration.component.ts
index 4349449..e029d3e 100644
--- a/src/app/movie-duration/movie-duration.component.ts
+++ b/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';
+  });
 }
diff --git a/src/app/movie-performance/movie-performance.component.html b/src/app/movie-performance/movie-performance.component.html
index 033cbae..83fe76c 100644
--- a/src/app/movie-performance/movie-performance.component.html
+++ b/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>
 
diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts
index 0643e68..60951ab 100644
--- a/src/app/movie-rating/movie-rating.component.ts
+++ b/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()}`
+  });
 }
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index 5388f6b..27299ec 100644
--- a/src/app/navbar/navbar.component.css
+++ b/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;
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index d03b093..6bdbd14 100644
--- a/src/custom-theme.scss
+++ b/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: (