Changed Pricelist layout, changed schriftgröße etc

src/app/pricelist/pricelist.component.css

@@ -4,11 +4,12 @@ h1 {
   letter-spacing: 2px;
 }
 
+/* Nur 2 Spalten insgesamt */
 .menu-container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 30px;
-  max-width: 1000px;
+  max-width: 900px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -26,6 +27,9 @@ h1 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
   padding-bottom: 10px;
   margin-bottom: 15px;
+
+  font-size: 1.8rem;   /* größer */
+  font-weight: 700;    /* fett */
 }
 
 .item {
@@ -40,3 +44,39 @@ h1 {
 .item:last-child {
   border-bottom: none;
 }
+
+/* Sitzplätze-Karte ist DOPPELT so breit */
+.seats-card {
+  grid-column: span 2;
+}
+
+/* Sitzplätze→ 2 Items pro Zeile */
+.seats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.seat-item {
+  background: #ffffff;
+  padding: 12px;
+  border-radius: 10px;
+  box-shadow: 0 0 6px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1.1rem;
+}
+
+.seat-icon {
+  display: flex;
+  align-items: center;
+}
+
+.seat-name {
+  flex: 1;
+}
+
+.seat-price {
+  font-weight: bold;
+}

src/app/pricelist/pricelist.component.html

@@ -1,6 +1,29 @@
 <app-menu-header label="Preislisten" icon="euro_symbol"></app-menu-header>
 
 <div class="menu-container my-20">
+
+  <!-- Sitze → jetzt an erster Stelle -->
+  @if (seatCategories.length > 0) {
+    <div class="card seats-card">
+      <h2>🪑 Sitzplätze</h2>
+
+      <div class="seats-grid">
+        @for (seatCategory of seatCategories; track seatCategory.id) {
+          <div class="seat-item">
+            <span class="seat-icon">
+              <mat-icon style="font-size: 26px; width: 26px; height: 26px">
+                {{ seatCategory.icon }}
+              </mat-icon>
+            </span>
+            <span class="seat-name">{{ seatCategory.name }}</span>
+            <span class="seat-price">{{ getPriceDisplay(seatCategory.price) }}</span>
+          </div>
+        }
+      </div>
+
+    </div>
+  }
+
   <!-- Popcorn -->
   <div class="card">
     <h2>🍿 Popcorn</h2>
@@ -36,16 +59,4 @@
     <div class="item"><span>Kindertüte</span><span>3,00 €</span></div>
   </div>
 
-
-  @if (seatCategories.length > 0) {
-    <!-- Sitze -->
-    <div class="card">
-      <h2>🪑 Sitzplätze</h2>
-      @for (seatCategory of seatCategories; track seatCategory.id) {
-        <div class="item"><span>  <mat-icon style="font-size: 20px; width: 20px; height: 20px">
-      {{ seatCategory.icon }}
-      </mat-icon></span><span>{{seatCategory.name}}</span><span>{{getPriceDisplay(seatCategory.price)}}</span></div>
-      }
-    </div>
-  }
 </div>