Add seat selection and no seats components

Introduces SeatSelectionComponent and NoSeatsInHallComponent for improved seat category display and handling cases with no available seats. Updates order flow to show seat categories, loading spinner, and total price. Refactors TheaterOverlayComponent to provide seat categories, and updates styles and dependencies.

src/app/seat-selection/seat-selection.component.css

@@ -0,0 +1,3 @@
+.seat-name {
+  color: var(--mat-sys-primary);
+}

src/app/seat-selection/seat-selection.component.html

@@ -0,0 +1,11 @@
+<h2 class="seat-name mb-1">{{ seatCategory().name }}</h2>
+<div class="flex items-center justify-between text-lg">
+  <div class="flex items-center space-x-2 w-3/7">
+    <mat-icon style="font-size: 30px; width: 30px; height: 30px">
+        {{ seatCategory().icon }}
+    </mat-icon>
+    <p>{{ getPriceDisplay(seatCategory().price) }}</p>
+  </div>
+  <p>×&thinsp;2</p>
+  <p class="w-2/7 text-right">25.00 €</p>
+</div>

src/app/seat-selection/seat-selection.component.ts

@@ -0,0 +1,18 @@
+import { Component, input } from '@angular/core';
+import { Sitzkategorie } from '@infinimotion/model-frontend';
+
+@Component({
+  selector: 'app-seat-selection',
+  standalone: false,
+  templateUrl: './seat-selection.component.html',
+  styleUrl: './seat-selection.component.css'
+})
+export class SeatSelectionComponent {
+  seatCategory = input.required<Sitzkategorie>();
+  amount: number = 1;
+
+  getPriceDisplay(price: number): string {
+    return `${(price / 100).toFixed(2)} €`;
+  }
+}
+