Added assets, started actual work on making this a proper multi file webapp. gonna continue tonight

2026-04-30 12:30:54 +02:00
parent 23d5a75891
commit e72f8a4f1f
104 changed files with 8799 additions and 35 deletions
--- a/.claude/worktrees/agent-a6b77bdf3dc410c7c
+++ b/.claude/worktrees/agent-a6b77bdf3dc410c7c
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,2 @@
+TMDB_API_TOKEN=yourapitoken
+TMDB_API_KEY=yourapikey
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+import/img/* filter=lfs diff=lfs merge=lfs -text
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,22 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig, envField } from 'astro/config';
+
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+

 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    integrations: [react({
+        include: ['**/react/*']
+    })],
+    vite: {
+        plugins: [tailwindcss()],
+    },
+    env: {
+        schema: {
+            TMDB_API_TOKEN: envField.string({ context: 'client', access: 'public', default: 'https://api.example.com' }),
+            SETTINGS_TOKEN: envField.string({ context: 'server', access: 'secret' }),
+        }
+    }
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,6 +12,17 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^6.1.10"
+    "@astrojs/react": "^5.0.4",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "astro": "^6.1.10",
+    "dotenv": "^17.4.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tailwindcss": "^4.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0"
  }
-}
+}
--- a/public/img/Apfelschorle.png
+++ b/public/img/Apfelschorle.png
--- a/public/img/Dolby.png
+++ b/public/img/Dolby.png
--- a/public/img/Schorle.png
+++ b/public/img/Schorle.png
--- a/public/img/Zoomania-2.jpg
+++ b/public/img/Zoomania-2.jpg
--- a/public/img/applepay.png
+++ b/public/img/applepay.png
--- a/public/img/astronautpopcorn.jpg
+++ b/public/img/astronautpopcorn.jpg
--- a/public/img/bladerunner2049.jpg
+++ b/public/img/bladerunner2049.jpg
--- a/public/img/cola-light.png
+++ b/public/img/cola-light.png
--- a/public/img/cola-zero.png
+++ b/public/img/cola-zero.png
--- a/public/img/cola.png
+++ b/public/img/cola.png
--- a/public/img/dbox.jpg
+++ b/public/img/dbox.jpg
--- a/public/img/derAustronaut.jpg
+++ b/public/img/derAustronaut.jpg
--- a/public/img/fallguy.jpg
+++ b/public/img/fallguy.jpg
--- a/public/img/fanta.png
+++ b/public/img/fanta.png
--- a/public/img/fuze-tea.png
+++ b/public/img/fuze-tea.png
--- a/public/img/gangstergang.jpg
+++ b/public/img/gangstergang.jpg
--- a/public/img/gangstergang2.png
+++ b/public/img/gangstergang2.png
--- a/public/img/glennkill.jpg
+++ b/public/img/glennkill.jpg
--- a/public/img/goat.jpg
+++ b/public/img/goat.jpg
--- a/public/img/googlepay.png
+++ b/public/img/googlepay.png
--- a/public/img/haribo.png
+++ b/public/img/haribo.png
--- a/public/img/homefront.jpg
+++ b/public/img/homefront.jpg
--- a/public/img/hoppers.jpg
+++ b/public/img/hoppers.jpg
--- a/public/img/hopperskidsmenu.jpg
+++ b/public/img/hopperskidsmenu.jpg
--- a/public/img/hopperspopcornmetall.jpg
+++ b/public/img/hopperspopcornmetall.jpg
--- a/public/img/hopperspopcornwood.png
+++ b/public/img/hopperspopcornwood.png
--- a/public/img/klarna.png
+++ b/public/img/klarna.png
--- a/public/img/käsedip.png
+++ b/public/img/käsedip.png
--- a/public/img/mandalorian.jpeg
+++ b/public/img/mandalorian.jpeg
--- a/public/img/mariogalaxy.jpg
+++ b/public/img/mariogalaxy.jpg
--- a/public/img/mariokidsmenu.png
+++ b/public/img/mariokidsmenu.png
--- a/public/img/marioyoshipopcorn.png
+++ b/public/img/marioyoshipopcorn.png
--- a/public/img/mastercard.png
+++ b/public/img/mastercard.png
--- a/public/img/masteruniverse.jpg
+++ b/public/img/masteruniverse.jpg
--- a/public/img/meg.JPG
+++ b/public/img/meg.JPG
--- a/public/img/meg2.jpg
+++ b/public/img/meg2.jpg
--- a/public/img/menu-big.png
+++ b/public/img/menu-big.png
--- a/public/img/minionsmonsters.jpg
+++ b/public/img/minionsmonsters.jpg
--- a/public/img/mms.png
+++ b/public/img/mms.png
--- a/public/img/monsterag.png
+++ b/public/img/monsterag.png
--- a/public/img/monsteruni.jpg
+++ b/public/img/monsteruni.jpg
--- a/public/img/mutiny.jpg
+++ b/public/img/mutiny.jpg
--- a/public/img/nachokombiklein.png
+++ b/public/img/nachokombiklein.png
--- a/public/img/nachos.jpg
+++ b/public/img/nachos.jpg
--- a/public/img/nachosnormal.png
+++ b/public/img/nachosnormal.png
--- a/public/img/paypal.png
+++ b/public/img/paypal.png
--- a/public/img/popcorn-big.png
+++ b/public/img/popcorn-big.png
--- a/public/img/popcorn-klein.png
+++ b/public/img/popcorn-klein.png
--- a/public/img/popcorn-mittel.png
+++ b/public/img/popcorn-mittel.png
--- a/public/img/popcorn.jpg
+++ b/public/img/popcorn.jpg
--- a/public/img/riegel.png
+++ b/public/img/riegel.png
--- a/public/img/salsadip.png
+++ b/public/img/salsadip.png
--- a/public/img/screamdoorpopcorn.jpg
+++ b/public/img/screamdoorpopcorn.jpg
--- a/public/img/screamvii.jpg
+++ b/public/img/screamvii.jpg
--- a/public/img/shelter.jpg
+++ b/public/img/shelter.jpg
--- a/public/img/solomio.png
+++ b/public/img/solomio.png
--- a/public/img/sourdip.png
+++ b/public/img/sourdip.png
--- a/public/img/spezi.png
+++ b/public/img/spezi.png
--- a/public/img/spidermannewday.jpg
+++ b/public/img/spidermannewday.jpg
--- a/public/img/sprite.png
+++ b/public/img/sprite.png
--- a/public/img/super-mario-galaxy-banner.jpg
+++ b/public/img/super-mario-galaxy-banner.jpg
--- a/public/img/toystory1.jpg
+++ b/public/img/toystory1.jpg
--- a/public/img/toystory2.jpg
+++ b/public/img/toystory2.jpg
--- a/public/img/toystory3.jpg
+++ b/public/img/toystory3.jpg
--- a/public/img/toystory4.jpg
+++ b/public/img/toystory4.jpg
--- a/public/img/toystory5.png
+++ b/public/img/toystory5.png
--- a/public/img/visa.png
+++ b/public/img/visa.png
--- a/public/img/wasser.png
+++ b/public/img/wasser.png
--- a/public/img/zoomania-popcorn.jpg
+++ b/public/img/zoomania-popcorn.jpg
--- a/public/img/zoomaniakidsmenu.jpg
+++ b/public/img/zoomaniakidsmenu.jpg
--- a/src/components/AboutView.astro
+++ b/src/components/AboutView.astro
@@ -0,0 +1,58 @@
+<section id="about-view" class="hidden info-view">
+    <div class="container info-view-shell">
+        <div class="about-hero-block">
+            <div class="about-hero-content">
+                <h1>Über uns</h1>
+                <p class="about-intro">
+                    EAGLE's IMAX vereint modernes Design, starke Technik und echtes Kinofeeling.
+                    Unser Anspruch: Jeder Besuch soll wie ein kleines Event wirken. Von entspannten Abenden
+                    bis zu großen Blockbuster-Premieren liefern wir Bild, Sound und Atmosphäre auf Top-Niveau.
+                </p>
+                <div class="about-pill-row">
+                    <span>4 Säle</span>
+                    <span>IMAX Experience</span>
+                    <span>D-BOX Motion Seats</span>
+                    <span>Premium Snacks</span>
+                </div>
+            </div>
+            <div class="about-hero-media" aria-hidden="true"></div>
+        </div>
+
+        <div class="about-stats-grid">
+            <article>
+                <h3>600+</h3>
+                <p>Sitzplätze insgesamt</p>
+            </article>
+            <article>
+                <h3>4K / Laser</h3>
+                <p>Hochauflösende Projektion</p>
+            </article>
+            <article>
+                <h3>Dolby Atmos</h3>
+                <p>Raumklang in ausgewählten Sälen</p>
+            </article>
+            <article>
+                <h3>D-BOX</h3>
+                <p>Bewegung synchron zum Film</p>
+            </article>
+        </div>
+
+        <div class="about-cards">
+            <article class="about-card about-card-halls">
+                <h3>Säle</h3>
+                <p>Vom klassischen Kinoraum bis zum IMAX-Erlebnis: Jeder Saal ist individuell abgestimmt auf Genre, Publikum und Stimmung.</p>
+                <button type="button" class="story-more-btn" data-home-view-open="halls-view">Mehr erfahren</button>
+            </article>
+            <article class="about-card about-card-dbox">
+                <h3>D-BOX Plätze</h3>
+                <p>Synchronisierte Sitzbewegungen machen Action und Effekte physisch spürbar und verstärken die Immersion im Film.</p>
+                <button type="button" class="story-more-btn" data-home-view-open="dbox-view">Mehr erfahren</button>
+            </article>
+            <article class="about-card about-card-tech">
+                <h3>Technik</h3>
+                <p>Leinwandgrößen, Projektoren, Soundsysteme und Kapazitäten in einem separaten Technikfenster zusammengefasst.</p>
+                <button id="btn-open-tech-modal" type="button" class="story-more-btn" data-about-modal-open="about-tech-modal">Mehr erfahren</button>
+            </article>
+        </div>
+    </div>
+</section>
--- a/src/components/AccountView.astro
+++ b/src/components/AccountView.astro
@@ -0,0 +1,45 @@
+<div id="account-view" class="hidden">
+    <div class="account-login-box">
+        <h2>Mein Konto</h2>
+
+        <input type="email" id="login-email" placeholder="E-Mail">
+        <input type="password" id="login-password" placeholder="Passwort">
+        <button id="btn-forgot-password" type="button">Passwort vergessen?</button>
+
+        <div id="login-error" class="hidden">
+            Falsche E-Mail oder Passwort
+        </div>
+
+        <button id="btn-login-account" type="button">Anmelden</button>
+        <p id="account-register-hint">Noch kein Konto?</p>
+        <button id="btn-open-register" type="button">Registrieren</button>
+    </div>
+</div>
+
+<div id="register-modal" class="modal hidden">
+    <div class="modal-content account-auth-modal">
+        <button id="btn-close-register" class="modal-close-btn" type="button" aria-label="Registrierung schliessen">&times;</button>
+        <h2>Registrieren</h2>
+        <p class="auth-modal-subtitle">Erstelle dein Konto für schnellere Buchungen.</p>
+        <input type="text" id="reg-firstname" placeholder="Vorname">
+        <input type="text" id="reg-lastname" placeholder="Nachname">
+        <input type="email" id="reg-email" placeholder="E-Mail">
+        <input type="password" id="reg-password" placeholder="Passwort">
+        <button id="btn-register-save" class="auth-submit-btn" type="button">Konto erstellen</button>
+    </div>
+</div>
+
+<div id="forgot-modal" class="modal hidden">
+    <div class="modal-content account-auth-modal">
+        <button id="btn-close-forgot" class="modal-close-btn" type="button" aria-label="Passwort-Dialog schliessen">&times;</button>
+        <h2>Passwort vergessen</h2>
+        <p class="auth-modal-subtitle">Gib deine E-Mail ein und wir senden dir einen Reset-Code.</p>
+
+        <input type="email" id="forgot-email" placeholder="E-Mail">
+        <button id="btn-send-reset" class="auth-submit-btn" type="button">Code senden</button>
+
+        <div id="reset-message" class="hidden">
+            Ein Code wurde simuliert versendet.
+        </div>
+    </div>
+</div>
--- a/src/components/BookingModal.astro
+++ b/src/components/BookingModal.astro
@@ -0,0 +1,43 @@
+<div id="booking-modal" class="modal hidden">
+    <div class="modal-content modal-large">
+        <div class="modal-header">
+            <div class="header-text-container">
+                <h2 id="modal-movie-title">Film Titel</h2>
+                <div class="header-sub-info">
+                    <p id="modal-info-text">Saal • Zeit</p>
+                    <div id="tech-badges" class="tech-badges-container hidden">
+                        <img src="/img/Dolby.png" alt="Dolby" class="tech-badge">
+                        <img src="/img/dbox.jpg" alt="D-Box" class="tech-badge">
+                    </div>
+                </div>
+            </div>
+            <span class="close-btn">&times;</span>
+        </div>
+
+        <div class="screen-container">
+            <div class="screen"></div>
+            <p class="screen-text">LEINWAND</p>
+        </div>
+
+        <div class="booking-layout">
+            <div class="seat-map-container">
+                <div id="seat-grid" class="seat-grid-custom"></div>
+            </div>
+            <div id="booking-summary" class="summary-panel hidden">
+                <h3>Deine Auswahl</h3>
+                <div id="summary-items"></div>
+                <div class="summary-total">
+                    <div class="divider"></div>
+                    <div class="total-row">
+                        <span>Gesamtbetrag:</span>
+                        <span id="total-price">0,00€</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="legend" id="dynamic-legend"></div>
+
+        <button id="btn-confirm-seats" class="btn-primary" style="margin-top:20px">Plätze bestätigen</button>
+    </div>
+</div>
--- a/src/components/CartView.astro
+++ b/src/components/CartView.astro
@@ -0,0 +1,37 @@
+<section id="cart-view" class="cart-section hidden">
+    <div class="container" style="padding: 120px 8% 50px 8%;">
+        <h1 class="list-title">Dein Warenkorb</h1>
+
+        <div class="cart-container">
+            <div class="cart-left">
+                <div id="cart-items-list"></div>
+            </div>
+
+            <div class="cart-right">
+                <div class="summary-box-black">
+                    <h2>Zusammenfassung</h2>
+                    <div class="summary-row-large">
+                        <span>Gesamtsumme:</span>
+                        <span id="cart-total-right">0,00€</span>
+                    </div>
+                    <p id="cart-vat-right" style="text-align:right; color:#86868b; font-size:0.8rem; margin-top:5px;">
+                        inkl. 19% MwSt: 0,00€
+                    </p>
+
+                    <button id="btn-checkout-final" class="blue-button">Jetzt kostenpflichtig bestellen</button>
+
+                    <div class="payment-methods" style="margin-top: 25px; text-align: center;">
+                        <p style="font-size: 0.75rem; color: #86868b; margin-bottom: 12px;">Sicher bezahlen mit</p>
+                        <div style="display: flex; justify-content: center; gap: 15px; opacity: 0.6;">
+                            <img src="/img/paypal.png" alt="PayPal" style="height: 20px;">
+                            <img src="/img/visa.png" alt="Visa" style="height: 20px;">
+                            <img src="/img/mastercard.png" alt="Mastercard" style="height: 20px;">
+                            <img src="/img/applepay.png" alt="Apple Pay" style="height: 20px;">
+                            <img src="/img/googlepay.png" alt="Google Pay" style="height: 20px;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
--- a/src/components/CheckoutView.astro
+++ b/src/components/CheckoutView.astro
@@ -0,0 +1,52 @@
+<section id="checkout-view" class="hidden" style="padding: 40px 20px;">
+    <div class="checkout-container">
+        <div class="progress-bar">
+            <div class="step active" id="step-1-indicator">1</div>
+            <div class="line" id="line-1"></div>
+            <div class="step" id="step-2-indicator">2</div>
+            <div class="line" id="line-2"></div>
+            <div class="step" id="step-3-indicator">3</div>
+        </div>
+
+        <div id="checkout-step-1" class="checkout-step">
+            <h2 style="text-align: center; margin-bottom: 20px;">Zahlungsmethode wählen</h2>
+            <div class="payment-grid">
+                <div class="payment-method" data-method="Apple Pay">
+                    <img src="/img/applepay.png" alt="Apple Pay" style="height: 20px;">
+                    <span>Apple Pay</span>
+                </div>
+                <div class="payment-method" data-method="PayPal">
+                    <img src="/img/paypal.png" alt="PayPal" style="height: 20px;">
+                    <span>PayPal</span>
+                </div>
+                <div class="payment-method" data-method="Google Pay">
+                    <img src="/img/googlepay.png" alt="Google Pay" style="height: 20px;">
+                    <span>Google Pay</span>
+                </div>
+                <div class="payment-method" data-method="Visa">
+                    <img src="/img/visa.png" alt="Visa" style="height: 20px;">
+                    <span>Visa</span>
+                </div>
+            </div>
+            <button id="btn-next-step-2" class="hidden" style="margin-top: 25px; width: 100%; padding: 15px; background: #0071e3; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Weiter zur Übersicht</button>
+        </div>
+
+        <div id="checkout-step-2" class="checkout-step hidden">
+            <div style="position: relative;">
+                <button id="btn-back-to-step1" style="position: absolute; top: -15px; left: 0; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.6; transition: 0.3s;">&larr;</button>
+                <h2 style="text-align: center; margin-bottom: 25px;">Persönliche Daten</h2>
+            </div>
+            <h2 style="text-align: center; margin-bottom: 20px;">Bestellübersicht</h2>
+            <div id="checkout-summary-list" style="background: #222; padding: 15px; border-radius: 8px;"></div>
+            <h3 id="checkout-total-display" style="text-align: right; margin-top: 15px;"></h3>
+            <div id="checkout-vat-display" style="text-align: right; color: #86868b; font-size: 0.8rem;"></div>
+            <button id="btn-pay-now" style="margin-top: 25px; width: 100%; padding: 15px; background: #4caf50; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Jetzt Bezahlen</button>
+        </div>
+
+        <div id="checkout-step-3" class="checkout-step hidden">
+            <h2 style="color: #4caf50; text-align: center;">Kauf erfolgreich!</h2>
+            <div id="ticket-container" style="margin-top: 30px;"></div>
+            <button id="btn-back-home" style="margin-top: 30px; width: 100%; padding: 15px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer;">Zurück zur Startseite</button>
+        </div>
+    </div>
+</section>
--- a/src/components/CollectorsView.astro
+++ b/src/components/CollectorsView.astro
@@ -0,0 +1,33 @@
+<section id="collectors-view" class="hidden info-view">
+    <div class="container info-view-shell">
+        <button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
+        <h1>Collectors Popcorn Specials</h1>
+        <p class="info-view-subtitle">Filmbezogene Specials in einer links/rechts versetzten Darstellung.</p>
+        <div class="collector-zigzag">
+            <article class="collector-entry left">
+                <div class="collector-film-logo">Filmlogo</div>
+                <div class="collector-entry-content">
+                    <h4>Special Becher 01</h4>
+                    <p>Kurzbeschreibung des Artikels und Bezug zum Film.</p>
+                    <input type="text" placeholder="Bildpfad (z.B. img/becher1.jpg)">
+                </div>
+            </article>
+            <article class="collector-entry right">
+                <div class="collector-film-logo">Filmlogo</div>
+                <div class="collector-entry-content">
+                    <h4>Special Eimer 02</h4>
+                    <p>Weitere Edition mit eigenem Motiv und Text.</p>
+                    <input type="text" placeholder="Bildpfad (z.B. img/eimer2.jpg)">
+                </div>
+            </article>
+            <article class="collector-entry left">
+                <div class="collector-film-logo">Filmlogo</div>
+                <div class="collector-entry-content">
+                    <h4>Special Box 03</h4>
+                    <p>Noch ein Eintrag fuer limitierte Collectors.</p>
+                    <input type="text" placeholder="Bildpfad (z.B. img/collector3.jpg)">
+                </div>
+            </article>
+        </div>
+    </div>
+</section>
--- a/src/components/DboxView.astro
+++ b/src/components/DboxView.astro
@@ -0,0 +1,31 @@
+<section id="dbox-view" class="hidden info-view">
+    <div class="container info-view-shell">
+        <button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
+        <h1>D-BOX & Technik</h1>
+        <p class="info-view-subtitle">Inspiriert von Technikseiten moderner Kinos, aber in deinem Design.</p>
+        <section class="dbox-modal-section">
+            <h3>Wie D-BOX funktioniert</h3>
+            <p>D-BOX Sitze reagieren synchron zum Film. Die Bewegungsintensität ist individuell steuerbar und kann bei Bedarf reduziert oder deaktiviert werden.</p>
+        </section>
+        <section class="dbox-modal-section">
+            <h3>Technik im Saal</h3>
+            <p>Ergänze hier deine Informationen zu Projektion, Soundsystem, Sitzkomfort und den Sälen mit D-BOX-Unterstützung.</p>
+            <div class="dbox-image-grid">
+                <div class="dbox-image-slot">Bildplatz Technik 1</div>
+                <div class="dbox-image-slot">Bildplatz Technik 2</div>
+                <div class="dbox-image-slot">Bildplatz Technik 3</div>
+                <div class="dbox-image-slot">Bildplatz Technik 4</div>
+            </div>
+        </section>
+        <section class="dbox-now-highlight modal-highlight">
+            <h4>Filme in D-BOX</h4>
+            <div class="dbox-mini-cards">
+                <div>Zoomania 2</div>
+                <div>Der Austronaut</div>
+                <div>Spider Man</div>
+                <div>Scream VII</div>
+                <div>Gangster Gang 2</div>
+            </div>
+        </section>
+    </div>
+</section>
--- a/src/components/HallsView.astro
+++ b/src/components/HallsView.astro
@@ -0,0 +1,29 @@
+<section id="halls-view" class="hidden info-view">
+    <div class="container info-view-shell">
+        <button class="subpage-back-btn" data-go-home type="button">← Zur Startseite</button>
+        <h1>Unsere Säle</h1>
+        <p class="info-view-subtitle">Pflegbare Infoseite zu allen Sälen inkl. Bild- und Textbereichen.</p>
+        <div class="hall-modal-grid full-page-grid">
+            <article class="hall-modal-item">
+                <h4>Kino 1</h4>
+                <textarea placeholder="Infos zu Kino 1 eintragen..."></textarea>
+                <input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/saal1.jpg)">
+            </article>
+            <article class="hall-modal-item">
+                <h4>Kino 2</h4>
+                <textarea placeholder="Infos zu Kino 2 eintragen..."></textarea>
+                <input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/saal2.jpg)">
+            </article>
+            <article class="hall-modal-item">
+                <h4>Deluxe 1</h4>
+                <textarea placeholder="Infos zu Deluxe 1 eintragen..."></textarea>
+                <input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/deluxe.jpg)">
+            </article>
+            <article class="hall-modal-item">
+                <h4>IMAX</h4>
+                <textarea placeholder="Infos zu IMAX eintragen..."></textarea>
+                <input type="text" placeholder="Bildpfad fuer den Hintergrund (z.B. img/imax.jpg)">
+            </article>
+        </div>
+    </div>
+</section>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,10 @@
+<header class="hero">
+    <div id="hero-slider" class="hero-slider"></div>
+    <div class="hero-overlay">
+        <span class="badge">Neu im Kino</span>
+        <h1 id="hero-title">Jetzt im Kino</h1>
+        <p id="hero-text">Erlebe die neuesten Highlights auf der großen Leinwand.</p>
+        <button class="btn-primary" id="hero-booking-btn">Jetzt Tickets kaufen</button>
+        <div id="hero-dots" class="hero-dots"></div>
+    </div>
+</header>
--- a/src/components/HomeSection.astro
+++ b/src/components/HomeSection.astro
@@ -0,0 +1,58 @@
+<section id="movies-grid-section" class="movie-section cinema-home">
+    <div class="section-header reveal-on-scroll">
+        <h2>Dein Kinoabend beginnt hier</h2>
+        <p>Premieren, Lieblingsfilme und flexible Spielzeiten in allen Sälen.</p>
+    </div>
+
+    <div class="home-poster-band reveal-on-scroll">
+        <div class="home-band-header">
+            <h3>Jetzt läuft</h3>
+            <span>Heute im Fokus</span>
+        </div>
+        <div id="now-running-row" class="now-running-row"></div>
+    </div>
+
+    <div class="home-inline-showcase reveal-on-scroll">
+        <article class="inline-section inline-halls">
+            <div class="inline-media"></div>
+            <div class="inline-content">
+                <h3>Unsere Säle im Überblick</h3>
+                <p>Jeder Saal hat ein eigenes Profil: von klassischem Kinofeeling bis High-End-Erlebnis mit Premiumtechnik und mehr Komfort.</p>
+                <div class="inline-tags">
+                    <span>IMAX</span>
+                    <span>Deluxe 1</span>
+                    <span>Kino 1</span>
+                    <span>Kino 2</span>
+                </div>
+                <button type="button" class="story-more-btn" data-home-view-open="halls-view">Mehr erfahren</button>
+            </div>
+        </article>
+
+        <article class="inline-section inline-dbox">
+            <div class="inline-media"></div>
+            <div class="inline-content">
+                <h3>D-BOX & Technik</h3>
+                <p>Spüre Bewegungen synchron zum Film und kombiniere das Erlebnis mit modernem Raumklang und Premium-Bestuhlung.</p>
+                <div class="dbox-now-highlight">
+                    <h4>Aktuell in D-BOX</h4>
+                    <div class="dbox-mini-cards">
+                        <div>Zoomania 2</div>
+                        <div>Shelter</div>
+                        <div>Hoppers</div>
+                        <div>Spider Man</div>
+                    </div>
+                </div>
+                <button type="button" class="story-more-btn" data-home-view-open="dbox-view">Mehr erfahren</button>
+            </div>
+        </article>
+
+        <article class="inline-section inline-collectors">
+            <div class="inline-media"></div>
+            <div class="inline-content">
+                <h3>Collectors Popcorn Specials</h3>
+                <p>Präsentiere Sonderbecher und Eimer filmbezogen mit Bild, Logo und kurzem Text in einer lebendigen Timeline.</p>
+                <button type="button" class="story-more-btn" data-home-view-open="collectors-view">Mehr erfahren</button>
+            </div>
+        </article>
+    </div>
+</section>
--- a/src/components/MovieListView.astro
+++ b/src/components/MovieListView.astro
@@ -0,0 +1,19 @@
+---
+
+const api_token = import.meta.env.TMDB_API_TOKEN;
+
+var api = await fetch("https://api.themoviedb.org/3/movie/11")
+var request = await api.json
+
+---
+
+<section id="movie-list-view" class="hidden">
+    <div class="container movie-list-shell">
+        <h1 class="list-title">Aktuelle Filme & Spielzeiten</h1>
+        <p class="list-subtitle">Alle Filme mit 7 Tagen Spielplan. Erste Vorstellung täglich ab 13:00 Uhr.</p>
+        <div>{ api_token }</div>
+
+        <!-- Movie List. -->
+        <div id="movie-program-list" class="movie-program-list"></div>
+    </div>
+</section>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -0,0 +1,22 @@
+<nav class="navbar">
+    <div class="logo" id="logo-home" style="cursor:pointer">EAGLE's IMAX</div>
+    <ul class="nav-links">
+        <li><a href="#" id="link-filme">Aktuelle Filme</a></li>
+        <li><a href="#" id="link-snacks">Snacks & Getränke</a></li>
+        <li><a href="#" id="link-about">Über uns</a></li>
+        <li><a href="#" id="link-account">Mein Konto</a></li>
+        <li>
+            <a href="#" id="link-cart" style="position: relative; display: flex; align-items: center; gap: 5px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+                Warenkorb
+                <span id="cart-badge" class="badge">0</span>
+            </a>
+        </li>
+        <li class="theme-toggle-item">
+            <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Theme wechseln">
+                <span class="theme-icon theme-icon-sun">☀</span>
+                <span class="theme-icon theme-icon-moon">☾</span>
+            </button>
+        </li>
+    </ul>
+</nav>
--- a/src/components/SnackPrompt.astro
+++ b/src/components/SnackPrompt.astro
@@ -0,0 +1,10 @@
+<div id="snack-prompt-overlay" class="snack-overlay hidden">
+    <div class="snack-prompt-box">
+        <h2>Popcorn gefällig? 🍿</h2>
+        <p>Möchtest du noch Snacks oder Getränke hinzufügen?</p>
+        <div class="prompt-buttons">
+            <button id="btn-yes-snacks" class="btn-primary">Ja, Snacks wählen</button>
+            <button id="btn-no-cart" class="btn-secondary">Weiter zum Warenkorb</button>
+        </div>
+    </div>
+</div>
--- a/src/components/SnacksView.astro
+++ b/src/components/SnacksView.astro
@@ -0,0 +1,449 @@
+<section id="snacks-view" class="hidden">
+    <div class="container" style="padding: 120px 8% 50px 8%;">
+        <h1 class="list-title">Snacks & Getränke</h1>
+
+        <div class="category-tabs">
+            <button class="tab-btn active" data-target="cat-getraenke">Getränke</button>
+            <button class="tab-btn" data-target="cat-popcorn">Popcorn</button>
+            <button class="tab-btn" data-target="cat-nachos">Nachos</button>
+            <button class="tab-btn" data-target="cat-snacks">Snacks</button>
+            <button class="tab-btn" data-target="cat-kombi">Kombi</button>
+            <button class="tab-btn" data-target="cat-eis">Eis</button>
+        </div>
+
+        <div id="cat-getraenke" class="snack-category active">
+            <div class="snack-grid">
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/cola.png" alt="Cola"></div>
+                    <div class="snack-info">
+                        <h3>Coca Cola</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/cola-zero.png" alt="Cola Zero"></div>
+                    <div class="snack-info">
+                        <h3>Coca Cola Zero</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/cola-light.png" alt="Cola Light"></div>
+                    <div class="snack-info">
+                        <h3>Coca Cola Light</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/sprite.png" alt="Sprite"></div>
+                    <div class="snack-info">
+                        <h3>Sprite</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/fanta.png" alt="Fanta"></div>
+                    <div class="snack-info">
+                        <h3>Fanta</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/spezi.png" alt="Spezi"></div>
+                    <div class="snack-info">
+                        <h3>Mezzo Mix</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                            <button class="size-chip">0,75L <span>4,50€</span></button>
+                            <button class="size-chip">1L <span>5,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/wasser.png" alt="Wasser"></div>
+                    <div class="snack-info">
+                        <h3>Wasser</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,00€</span></button>
+                            <button class="size-chip">0,50L <span>3,00€</span></button>
+                            <button class="size-chip">0,75L <span>3,50€</span></button>
+                            <button class="size-chip">1L <span>4,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/Apfelschorle.png" alt="Apfelschorle"></div>
+                    <div class="snack-info">
+                        <h3>Apfelschorle</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,00€</span></button>
+                            <button class="size-chip">0,50L <span>3,00€</span></button>
+                            <button class="size-chip">0,75L <span>3,50€</span></button>
+                            <button class="size-chip">1L <span>4,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/fuze-tea.png" alt="Fuze Tea"></div>
+                    <div class="snack-info">
+                        <h3>Fuze Tea</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">0,33L <span>2,50€</span></button>
+                            <button class="size-chip">0,50L <span>3,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cat-popcorn" class="snack-category hidden">
+            <div class="snack-grid">
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/popcorn-klein.png" alt="Popcorn klein"></div>
+                    <div class="snack-info">
+                        <h3>Popcorn klein</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">3,50€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/popcorn-mittel.png" alt="Popcorn mittel"></div>
+                    <div class="snack-info">
+                        <h3>Popcorn Mittel</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">4,50€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/popcorn-big.png" alt="Popcorn groß"></div>
+                    <div class="snack-info">
+                        <h3>Popcorn Groß</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">6,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/zoomania-popcorn.jpg" alt="Popcorn limited - Zoomania 2"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Metallbecher - Zoomania 2</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">12,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/screamdoorpopcorn.jpg" alt="Popcorn limited - Scream VII"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Sammelbecher - Scream VII</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">29,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Sammelbecher - Der Austronaut</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">34,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/hopperspopcornmetall.jpg" alt="Popcorn limited - Hoppers"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Metallbecher - Hoppers</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">12,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/hopperspopcornwood.png" alt="Popcorn limited - Hoppers Wood"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Sammelbecher - Hoppers</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">21,00€</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/marioyoshipopcorn.png" alt="Popcorn limited - Yoshi"></div>
+                    <div class="snack-info">
+                        <h3>Limitierter Sammelbecher - Yoshi Becher</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Süß</button>
+                            <button class="opt-btn">Salzig</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">35,90€</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cat-nachos" class="snack-category hidden">
+            <div class="snack-grid">
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/nachosnormal.png" alt="Nachos"></div>
+                    <div class="snack-info">
+                        <h3>Nachos Klein</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Käse-Dip</button>
+                            <button class="opt-btn">Salsa-Dip</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Klein <span>5,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/nachosnormal.png" alt="Nachos"></div>
+                    <div class="snack-info">
+                        <h3>Nachos Normal</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Käse-Dip</button>
+                            <button class="opt-btn">Salsa-Dip</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Mittel <span>6,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/nachos.jpg" alt="Nachos groß"></div>
+                    <div class="snack-info">
+                        <h3>Nachos Groß</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Käse-Dip</button>
+                            <button class="opt-btn">Sourcreme-Dip</button>
+                            <button class="opt-btn">Salsa-Dip</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Groß <span>8,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <h2 class="list-title">Dips</h2>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/käsedip.png" alt="Käse-Dip"></div>
+                    <div class="snack-info">
+                        <h3>Käse-Dip (warm)</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Normal</button>
+                            <button class="opt-btn">Scharf</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Schale <span>2,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/sourdip.png" alt="Sourcreme-Dip"></div>
+                    <div class="snack-info">
+                        <h3>Sourcreme-Dip</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Normal</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Schale <span>2,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/salsadip.png" alt="Salsa-Dip"></div>
+                    <div class="snack-info">
+                        <h3>Salsa-Dip</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Normal</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Schale <span>2,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <h2 class="list-title">Nacho Kombi-Menüs</h2>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/nachokombiklein.png" alt="Nacho Kombi Klein"></div>
+                    <div class="snack-info">
+                        <h3>Nacho Menü Klein – Nachos klein + 1 Dip + 1 0,33L Getränk</h3>
+                        <div class="option-group">
+                            <button class="opt-btn active">Klein</button>
+                        </div>
+                        <div class="size-selector">
+                            <button class="size-chip">Kombi <span>6,90€</span></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cat-snacks" class="snack-category hidden">
+            <div class="snack-grid">
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/mms.png" alt="M&Ms"></div>
+                    <div class="snack-info">
+                        <h3>M&M's (verschiedene Sorten)</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">Packung <span>4,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/haribo.png" alt="Haribo"></div>
+                    <div class="snack-info">
+                        <h3>Haribo Goldbären (verschiedene Sorten)</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">Tüte <span>3,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card">
+                    <div class="snack-img"><img src="/img/riegel.png" alt="Riegel"></div>
+                    <div class="snack-info">
+                        <h3>Schokoriegel (verschiedene Sorten)</h3>
+                        <div class="size-selector">
+                            <button class="size-chip">Tüte <span>2,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cat-kombi" class="snack-category hidden">
+            <div class="snack-grid">
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <h3>Kleines Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,33L Getränk + Popcorn Klein</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>5,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <h3>Mittleres Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk + Popcorn Mittel</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>6,50€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <span class="badge">Bestseller</span>
+                        <h3>Großes Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">1L Getränk + Popcorn Groß</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>8,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <div class="snack-img"><img src="/img/hopperskidsmenu.jpg" alt="Hoppers Kids Menu"></div>
+                        <span class="badge">SPECIAL</span>
+                        <h3>Limitiertes Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im HOPPERS Becher + HOPPERS Popcorn Schale + HOPPERS Figur</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>10,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <div class="snack-img"><img src="/img/mariokidsmenu.png" alt="Mario Kids Menu"></div>
+                        <span class="badge">SPECIAL</span>
+                        <h3>Limitiertes Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im MARIO GALAXY Becher + MARIO GALAXY Popcorn Schale</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>10,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="snack-card highlight">
+                    <div class="snack-info">
+                        <div class="snack-img"><img src="/img/zoomaniakidsmenu.jpg" alt="Zoomania Kids Menu"></div>
+                        <span class="badge">SPECIAL</span>
+                        <h3>Limitiertes Menü</h3>
+                        <p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im ZOOMANIA Becher + ZOOMANIA Popcorn Schale + Figur zum aussuchen</p>
+                        <div class="size-selector">
+                            <button class="size-chip">Menü-Preis <span>10,00€</span></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="cat-eis" class="snack-category hidden">
+            <div class="coming-soon-banner">
+                <h2>Eiscreme & Shakes</h2>
+                <p>Coming Soon...</p>
+                <span>Wir bereiten etwas ganz Besonderes für dich vor! Coming this summer!</span>
+            </div>
+        </div>
+    </div>
+</section>
--- a/src/components/TechModal.astro
+++ b/src/components/TechModal.astro
@@ -0,0 +1,25 @@
+<div id="about-tech-modal" class="home-modal-overlay hidden">
+    <div class="home-modal-panel home-modal-wide">
+        <button type="button" class="home-modal-close" data-about-modal-close="about-tech-modal">&times;</button>
+        <h2>Technik</h2>
+        <p class="home-modal-sub">Daten und Eckwerte zu Bild, Projektoren, Leinwandgrößen und Sitzkapazitäten.</p>
+        <div class="hall-modal-grid full-page-grid">
+            <article class="hall-modal-item">
+                <h4>Projektoren</h4>
+                <textarea placeholder="z.B. 4K Laserprojektion, Modellinfos, Lichtleistung..."></textarea>
+            </article>
+            <article class="hall-modal-item">
+                <h4>Leinwandgrößen</h4>
+                <textarea placeholder="z.B. IMAX: 22m x 12m, Deluxe: 14m x 7m ..."></textarea>
+            </article>
+            <article class="hall-modal-item">
+                <h4>Sitzplätze pro Saal</h4>
+                <textarea placeholder="z.B. Kino 1: 180, Kino 2: 150, Deluxe 1: 120, IMAX: 300"></textarea>
+            </article>
+            <article class="hall-modal-item">
+                <h4>Bild & Audio</h4>
+                <textarea placeholder="z.B. Dolby Atmos, 7.1, Frame Rates, HDR-Profile..."></textarea>
+            </article>
+        </div>
+    </div>
+</div>
--- a/src/components/react/topbar.tsx
+++ b/src/components/react/topbar.tsx
@@ -0,0 +1,8 @@
+export default function topbar() {
+    return (
+        <div className="navbar bg-[rgba(29, 29, 31, 0.75)]">
+            <div className="leftButtonArray">Hallo</div>
+            <div className="rightButtonArray"></div>
+        </div>
+    )
+}
--- a/src/components/topbar.astro
+++ b/src/components/topbar.astro
@@ -0,0 +1,14 @@
+---
+import "../../src/styles/global.css";
+---
+
+<div class="bg-[#1d1d1fbf] text-white p-5 flex gap-5 justify-between">
+    <div id="leftButtons" class="flex gap-2">
+        <div>hi</div>
+        <div>hi</div>
+    </div>
+    <div id="rightButtons" class="flex gap-2">
+        <div>hi</div>
+        <div>hi</div>
+    </div>
+</div>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,48 @@
 ---
+import Navbar from "../components/Navbar.astro";
+import Hero from "../components/Hero.astro";
+import HomeSection from "../components/HomeSection.astro";
+import MovieListView from "../components/MovieListView.astro";
+import HallsView from "../components/HallsView.astro";
+import DboxView from "../components/DboxView.astro";
+import CollectorsView from "../components/CollectorsView.astro";
+import AboutView from "../components/AboutView.astro";
+import SnacksView from "../components/SnacksView.astro";
+import BookingModal from "../components/BookingModal.astro";
+import CartView from "../components/CartView.astro";
+import AccountView from "../components/AccountView.astro";
+import CheckoutView from "../components/CheckoutView.astro";
+import SnackPrompt from "../components/SnackPrompt.astro";
+import TechModal from "../components/TechModal.astro";
+import "../styles/global.css";
+---

---
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <title>EAGLE's IMAX | Deluxe Experience</title>
+    </head>
+    <body>
+        <Navbar />
+        <Hero />
+        <HomeSection />
+        <MovieListView />
+        <HallsView />
+        <DboxView />
+        <CollectorsView />
+        <AboutView />
+        <SnacksView />
+        <BookingModal />
+        <CartView />
+        <AccountView />
+        <CheckoutView />
+        <SnackPrompt />
+        <TechModal />

-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
+        <script>
+            import "../scripts/main.ts";
+        </script>
+    </body>
 </html>
--- a/src/scripts/account.ts
+++ b/src/scripts/account.ts
@@ -0,0 +1,474 @@
+import type { User } from "./interfaces.js";
+
+function readStorageJson(key: string, fallbackValue: any) {
+    const raw = localStorage.getItem(key);
+
+    if (!raw || raw === "undefined" || raw === "null") {
+        return fallbackValue;
+    }
+
+    try {
+        return JSON.parse(raw);
+    } catch (error) {
+        console.warn(`Konnte LocalStorage-Wert fuer ${key} nicht lesen.`, error);
+        return fallbackValue;
+    }
+}
+
+function normalizeUser(user: User): User {
+    return {
+        firstName: user.firstName || "",
+        lastName: user.lastName || "",
+        email: user.email || "",
+        hashedPassword: user.hashedPassword || "",
+        orders: Array.isArray(user.orders) ? user.orders : [],
+        paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : []
+    };
+}
+
+function escapeHtml(value: string) {
+    return String(value || "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+
+function formatEuro(value: string) {
+    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
+}
+
+function persistUsers() {
+    localStorage.setItem("eagleUsers", JSON.stringify(users));
+}
+
+function persistCurrentUser() {
+    if (currentUser) {
+        localStorage.setItem("currentUser", JSON.stringify(currentUser));
+    } else {
+        localStorage.removeItem("currentUser");
+    }
+}
+
+export let users = readStorageJson("eagleUsers", []);
+if (!Array.isArray(users)) {
+    users = [];
+}
+users = users.map(normalizeUser).filter(Boolean);
+
+const rawCurrentUser = readStorageJson("currentUser", null);
+
+export var currentUser: User | null = rawCurrentUser ? normalizeUser(rawCurrentUser) : null;
+
+if (currentUser && currentUser.email) {
+    const currentEmail = currentUser.email;
+    const storedMatch = users.find((user: { email: string; }) => {
+        return user.email === currentEmail;
+    });
+    if (storedMatch) {
+        currentUser = storedMatch;
+    } else {
+        users.push(currentUser);
+        persistUsers();
+    }
+}
+
+async function hashMessage(message: string) {
+  const msgBuffer = new TextEncoder().encode(message); // Encode as UTF-8
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); // Hash
+  const hashArray = Array.from(new Uint8Array(hashBuffer)); // Convert to bytes
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // Hex string
+}
+
+function getInputValue(id: string): string {
+  const el = document.getElementById(id) as HTMLInputElement | null;
+  return el?.value.trim() ?? "";
+}
+
+export async function registerUser() {
+const firstName = getInputValue("reg-firstname");
+const lastName = getInputValue("reg-lastname");
+const email = getInputValue("reg-email").toLowerCase();
+const password = document.querySelector<HTMLInputElement>("#reg-password")?.value ?? "";
+
+    if (!firstName || !lastName || !email || !password) {
+        alert("Bitte fuelle alle Felder aus.");
+        return;
+    }
+
+    if (!email.includes("@")) {
+        alert("Bitte gib eine gueltige E-Mail-Adresse ein.");
+        return;
+    }
+
+    const existingUser = users.find((user: User) => user.email.toLowerCase() === email);
+    if (existingUser) {
+        alert("E-Mail bereits registriert");
+        return;
+    }
+
+    const hashedPassword = await hashMessage(password);
+
+    const newUser = {
+        firstName,
+        lastName,
+        email,
+        hashedPassword,
+        orders: [],
+        paymentMethods: []
+    };
+
+    users.push(newUser);
+    currentUser = newUser;
+
+    persistUsers();
+    persistCurrentUser();
+
+    alert("Registrierung erfolgreich");
+    document.getElementById("register-modal")?.classList.add("hidden");
+
+    openAccountDashboard();
+}
+
+export async function loginUser() {
+    const email = (document.querySelector<HTMLInputElement>("#login-email")?.value.trim() || "").toLowerCase();
+    const password = document.querySelector<HTMLInputElement>("#login-password")?.value || "";
+    const hashedPassword = await hashMessage(password);
+
+    const user = users.find(
+        (entry: User) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword
+    );
+
+    if (!user) {
+        document.getElementById("login-error")?.classList.remove("hidden");
+        return;
+    }
+
+    currentUser = user;
+    persistCurrentUser();
+    openAccountDashboard();
+}
+
+export function openAccountDashboard() {
+    const accountView = document.getElementById("account-view");
+    if (!accountView) {
+        return;
+    }
+
+    if (!currentUser) {
+        accountView.innerHTML = "<div class='account-login-box'><h2>Mein Konto</h2><p>Bitte melde dich an oder registriere dich.</p></div>";
+        return;
+    }
+
+    accountView.innerHTML = /*html*/`
+        <div class="account-panel">
+            <div class="account-panel-header">
+                <h2>Mein Konto</h2>
+                <button class="account-logout-btn" onclick="logoutUser()">Abmelden</button>
+            </div>
+
+            <div class="account-tabs">
+                <button class="account-tab-btn" onclick="renderPersonalInfo()">Persönliche Daten</button>
+                <button class="account-tab-btn" onclick="renderOrders()">Meine Bestellungen</button>
+                <button class="account-tab-btn" onclick="renderPayments()">Zahlungsmethoden</button>
+            </div>
+
+            <div id="account-tab-content"></div>
+        </div>
+    `;
+
+    renderPersonalInfo();
+}
+
+function renderPersonalInfo() {
+    const target = document.getElementById("account-tab-content");
+    if (!target || !currentUser) {
+        return;
+    }
+
+    target.innerHTML = `
+        <div class="account-card">
+            <p><strong>Vorname:</strong> ${currentUser.firstName || "-"}</p>
+            <p><strong>Nachname:</strong> ${currentUser.lastName || "-"}</p>
+            <p><strong>E-Mail:</strong> ${currentUser.email || "-"}</p>
+        </div>
+    `;
+}
+
+function renderOrders() {
+    const target = document.getElementById("account-tab-content");
+    if (!target || !currentUser) {
+        return;
+    }
+
+    const orders = Array.isArray(currentUser.orders) ? currentUser.orders : [];
+
+    if (!orders.length) {
+        target.innerHTML = `
+            <div class="account-card">
+                <h3>Meine Bestellungen</h3>
+                <p>Noch keine Bestellungen vorhanden.</p>
+            </div>
+        `;
+        return;
+    }
+
+    const orderHtml = orders
+        .map((order, index) => {
+            const movieItems = Array.isArray(order.items)
+                ? order.items.filter((item: any) => item.category === "movie")
+                : [];
+            const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
+            const previewTitle = previewItem?.title || "Bestellung";
+            const ticketsCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
+
+            return `
+                <button type="button" class="order-box order-item-btn" data-order-index="${index}">
+                    <div class="order-item-head">
+                        <h4>${escapeHtml(previewTitle)}</h4>
+                        <span>${formatEuro(order.total || 0)}</span>
+                    </div>
+                    <p><strong>Datum:</strong> ${escapeHtml(order.date || "-")}</p>
+                    <p><strong>Anzahl:</strong> ${ticketsCount}x</p>
+                </button>
+            `;
+        })
+        .join("");
+
+    target.innerHTML = `
+        <div class="account-orders-shell">
+            <h3>Meine Bestellungen</h3>
+            <p class="account-payments-note">Klicke auf eine Bestellung, um dein Ticket-Detail zu sehen.</p>
+            <div class="account-orders-grid">${orderHtml}</div>
+            <div id="order-ticket-details" class="order-ticket-details hidden"></div>
+        </div>
+    `;
+
+    const detailTarget = document.getElementById("order-ticket-details");
+    const orderButtons = Array.from(target.querySelectorAll<HTMLButtonElement>(".order-item-btn"));
+
+    const renderOrderTicket = (orderIndex: number) => {
+        const order = orders[orderIndex];
+        if (!order || !detailTarget) {
+            return;
+        }
+
+        const movieItems = Array.isArray(order.items)
+            ? order.items.filter((item: any) => item.category === "movie")
+            : [];
+        const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
+        const poster = primaryMovie?.img || "";
+        const seats = movieItems.map((item: any) => item.seatId).filter(Boolean).join(", ") || "-";
+        const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
+        const hall = primaryMovie?.hall || "-";
+        const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-";
+
+        detailTarget.innerHTML = `
+            <article class="order-ticket-card">
+                <div class="order-ticket-poster">
+                    ${poster
+                        ? `<img src="${escapeHtml(poster)}" alt="${escapeHtml(primaryMovie?.title || "Film")}">`
+                        : `<div class="order-ticket-poster-fallback">Kein Poster</div>`}
+                </div>
+                <div class="order-ticket-content">
+                    <div class="order-ticket-brand">EAGLE'S IMAX | Bestell-Details</div>
+                    <h4>${escapeHtml(primaryMovie?.title || "Bestellung")}</h4>
+                    <div class="order-ticket-grid">
+                        <p><span>Datum</span><strong>${escapeHtml(order.date || "-")}</strong></p>
+                        <p><span>Saal</span><strong>${escapeHtml(hall)}</strong></p>
+                        <p><span>Uhrzeit</span><strong>${escapeHtml(time)}</strong></p>
+                        <p><span>Tickets</span><strong>${ticketCount}x</strong></p>
+                        <p><span>Sitze</span><strong>${escapeHtml(seats)}</strong></p>
+                        <p><span>Gesamt</span><strong>${formatEuro(order.total || 0)}</strong></p>
+                    </div>
+                </div>
+            </article>
+        `;
+
+        detailTarget.classList.remove("hidden");
+        orderButtons.forEach((button) => {
+            button.classList.toggle("active", Number(button.dataset.orderIndex) === orderIndex);
+        });
+    };
+
+    orderButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+            const orderIndex = Number(button.dataset.orderIndex || -1);
+            if (orderIndex >= 0) {
+                renderOrderTicket(orderIndex);
+            }
+        });
+    });
+
+}
+
+function renderPayments() {
+    const target = document.getElementById("account-tab-content");
+    if (!target || !currentUser) {
+        return;
+    }
+
+    target.innerHTML = /*html*/`
+        <div class="account-card">
+            <h3>Zahlungsmethoden</h3>
+            <p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p>
+            <div class="account-payment-grid">
+                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-card">
+                    <div class="payment-logo-slot">
+                        <img src="img/mastercard.png" alt="Mastercard">
+                    </div>
+                    <h4>Visa / Mastercard</h4>
+                    <p>Karteninformationen hinterlegen</p>
+                </button>
+                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-paypal">
+                    <div class="payment-logo-slot">
+                        <img src="img/paypal.png" alt="PayPal">
+                    </div>
+                    <h4>PayPal</h4>
+                    <p>Konto verbinden</p>
+                </button>
+                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-apple">
+                    <div class="payment-logo-slot">
+                        <img src="img/applepay.png" alt="Apple Pay">
+                    </div>
+                    <h4>Apple Pay</h4>
+                    <p>Geraet freischalten</p>
+                </button>
+                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-google">
+                    <div class="payment-logo-slot">
+                        <img src="img/googlepay.png" alt="Google Pay">
+                    </div>
+                    <h4>Google Pay</h4>
+                    <p>Wallet verknuepfen</p>
+                </button>
+            </div>
+        </div>
+
+        <div id="pay-modal-card" class="pay-modal-overlay hidden">
+            <div class="pay-modal-panel pay-modal-card-style">
+                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
+                <div class="pay-modal-head">
+                    <img src="img/mastercard.png" alt="Kreditkarte">
+                    <h4>Kreditkarte hinterlegen</h4>
+                </div>
+                <div class="pay-form-grid">
+                    <label>Kartennummer
+                        <input type="text" placeholder="1234 5678 9012 3456">
+                    </label>
+                    <div class="pay-form-row">
+                        <label>Exp. Datum
+                            <input type="text" placeholder="MM/JJ">
+                        </label>
+                        <label>CVV
+                            <input type="text" placeholder="123">
+                        </label>
+                    </div>
+                    <label>Name auf Karte
+                        <input type="text" placeholder="Max Mustermann">
+                    </label>
+                </div>
+                <button type="button" class="pay-submit-btn">Karte speichern</button>
+            </div>
+        </div>
+
+        <div id="pay-modal-paypal" class="pay-modal-overlay hidden">
+            <div class="pay-modal-panel pay-modal-paypal-style">
+                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
+                <div class="pay-modal-head">
+                    <img src="img/paypal.png" alt="PayPal">
+                    <h4>PayPal verbinden</h4>
+                </div>
+                <p>Einloggen und dein PayPal-Konto mit deinem Kino-Account verbinden.</p>
+                <label>E-Mail
+                    <input type="email" placeholder="name@beispiel.de">
+                </label>
+                <label>Passwort
+                    <input type="password" placeholder="Passwort">
+                </label>
+                <button type="button" class="pay-submit-btn paypal-btn">Mit PayPal fortfahren</button>
+            </div>
+        </div>
+
+        <div id="pay-modal-apple" class="pay-modal-overlay hidden">
+            <div class="pay-modal-panel pay-modal-apple-style">
+                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
+                <div class="pay-modal-head">
+                    <img src="img/applepay.png" alt="Apple Pay">
+                    <h4>Apple Pay einrichten</h4>
+                </div>
+                <p>Apple Pay wirkt schlicht, klar und fokussiert. Hinterlege hier die bevorzugte Karte für schnelle Zahlungen.</p>
+                <label>Apple-ID E-Mail
+                    <input type="email" placeholder="appleid@beispiel.de">
+                </label>
+                <label>Bevorzugte Karte
+                    <input type="text" placeholder="Visa, Mastercard, ...">
+                </label>
+                <button type="button" class="pay-submit-btn apple-btn">Zu Wallet hinzufügen</button>
+            </div>
+        </div>
+
+        <div id="pay-modal-google" class="pay-modal-overlay hidden">
+            <div class="pay-modal-panel pay-modal-google-style">
+                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
+                <div class="pay-modal-head">
+                    <img src="img/googlepay.png" alt="Google Pay">
+                    <h4>Google Pay einrichten</h4>
+                </div>
+                <p>Verbinde deine Wallet, damit zukünftige Bestellungen in wenigen Klicks abgeschlossen werden.</p>
+                <label>Google-Konto
+                    <input type="email" placeholder="konto@gmail.com">
+                </label>
+                <label>Standard-Zahlungsquelle
+                    <input type="text" placeholder="z. B. Visa 1234">
+                </label>
+                <button type="button" class="pay-submit-btn google-btn">Wallet verbinden</button>
+            </div>
+        </div>
+    `;
+
+    const modals = Array.from(target.querySelectorAll(".pay-modal-overlay"));
+    const triggers = Array.from(target.querySelectorAll(".account-pay-trigger"));
+    const closeButtons = Array.from(target.querySelectorAll("[data-pay-close]"));
+
+    const closeAllPaymentModals = () => {
+        modals.forEach((modal) => modal.classList.add("hidden"));
+        document.body.style.overflow = "auto";
+    };
+
+    triggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+            closeAllPaymentModals();
+            const targetId = trigger.getAttribute("data-pay-modal");
+            const modal = targetId ? target.querySelector(`#${targetId}`) : null;
+
+            if (modal) {
+                modal.classList.remove("hidden");
+                document.body.style.overflow = "hidden";
+            }
+        });
+    });
+
+    closeButtons.forEach((button) => {
+        button.addEventListener("click", closeAllPaymentModals);
+    });
+
+    modals.forEach((modal) => {
+        modal.addEventListener("click", (event) => {
+            if (event.target === modal) {
+                closeAllPaymentModals();
+            }
+        });
+    });
+}
+
+function logoutUser() {
+    persistCurrentUser();
+    window.location.reload();
+}
+
+(window as any).logoutUser = logoutUser;
+(window as any).renderPersonalInfo = renderPersonalInfo;
+(window as any).renderOrders = renderOrders;
+(window as any).renderPayments = renderPayments;
+
--- a/src/scripts/bigConsts.ts
+++ b/src/scripts/bigConsts.ts
@@ -0,0 +1,33 @@
+import type { MovieCatalog } from "./interfaces";
+// script will be removed since we switch to apis
+
+
+export const movieCatalog:MovieCatalog[] = [
+        {
+            title: "Zoomania 2",
+            genre: "Animation",
+            duration: 148,
+            fsk: "6",
+            description: "In Walt Disney Animation Studios’ \"Zoomania 2\" geraten die tierischen Detektive Judy Hopps und Nick Wilde auf die rätselhafte Spur eines geheimnisvollen Reptils, das in Zoomania auftaucht und die Metropole völlig auf den Kopf stellt: Gary De’Snake! ",
+            poster: "img/Zoomania-2.jpg",
+            backdrop: "img/Zoomania-2.jpg"
+        },
+        {
+            title: "Shelter",
+            genre: "Action, Abenteuer",
+            duration: 147,
+            fsk: "16",
+            description: "Michael Mason, ein untergetauchter Elite-Agent, lebt auf einer abgelegenen Insel in Schottland. Als er in einem schweren Sturm ein Mädchen vor dem Ertrinken rettet, setzt er damit eine Kette von Ereignissen in Gang, die sein Versteck enttarnen und ihn zurück in die Welt zwingen. Dort muss er nicht nur um das Überleben der Teenagerin kämpfen, sondern sich auch den Dämonen seiner Vergangenheit stellen…",
+            poster: "img/shelter.jpg",
+            backdrop: "img/shelter.jpg"
+        },
+        {
+            title: "Mutiny",
+            genre: "Action, Abenteuer",
+            duration: 0,
+            fsk: "?",
+            description: "Als sein milliardenschwerer Boss vor seinen Augen einem Mordkomplott zum Opfer fällt, wird Cole Reed (Jason Statham) für das Verbrechen verantwortlich gemacht. Im Bestreben dessen Tod zu rächen und die Täter zu überführen, gelangt Reed an Bord eines Frachters und stößt dabei auf eine internationale Verschwörung. Im Alleingang startet Cole eine gnadenlose Racheaktion auf hoher See…",
+            poster: "img/mutiny.jpg",
+            backdrop: "img/mutiny.jpg"
+        }
+    ];
--- a/src/scripts/booking.ts
+++ b/src/scripts/booking.ts
@@ -0,0 +1,358 @@
+import { seatLayouts, occupiedSeatsData, prices, cart } from "./main.js"
+import { renderCart, saveCart } from "./cart.js";
+import { renderCheckout } from "./checkout.js";
+
+let currentBookingContext: any = null;
+let currentHallLayout: any = null;
+
+export function openBooking(movie: string, hall: string, time: any) {
+     const titleEl = document.getElementById("modal-movie-title");
+     const infoEl = document.getElementById("modal-info-text");
+
+     if (titleEl) {
+         titleEl.innerText = movie;
+     }
+
+     if (infoEl) {
+         infoEl.innerText = `${hall} • ${time} Uhr`;
+     }
+
+     currentBookingContext = { movie, hall, time };
+
+     createSeats(hall, time);
+     renderBookingLegend();
+     updateBookingSummary();
+
+     document.getElementById("booking-modal")?.classList.remove("hidden");
+ }
+
+function getRowLabel(rowIndex: number) {
+    return String(rowIndex + 1);
+}
+
+function buildHallLayout(hallName: string, baseConfig:any) {
+    const rows = Number(baseConfig.rows || 0);
+    const totalCols = Number(baseConfig.left || 0) + Number(baseConfig.right || 0);
+    const isDeluxe = /deluxe/i.test(hallName);
+
+    const left = isDeluxe
+        ? Math.max(3, Number(baseConfig.left || 0) - 1)
+        : Number(baseConfig.left || 0);
+    const right = Math.max(0, totalCols - left);
+
+    const vipRows = rows > 0 ? [rows] : [];
+
+    const dboxMap = new Set();
+    const markDboxRange = (rowNumber: number, startCol: number, width: number) => {
+        if (!rowNumber || width <= 0) {
+            return;
+        }
+
+        const maxCol = Math.min(totalCols, startCol + width - 1);
+        for (let col = startCol; col <= maxCol; col++) {
+            dboxMap.add(`${rowNumber}-${col}`);
+        }
+    };
+
+    if (isDeluxe) {
+        const configuredDboxSeats = Array.isArray(baseConfig.dbox)
+            ? baseConfig.dbox.reduce((sum: number, section: any) => sum + Number(section.w || 0), 0)
+            : 0;
+
+        const totalDboxSeats = Math.max(4, configuredDboxSeats || 0);
+
+        const firstRow = Math.max(1, rows - 2);
+        const secondRow = Math.max(1, rows - 1);
+        const targetRows = [firstRow, secondRow]
+            .filter((rowNumber, index, arr) => arr.indexOf(rowNumber) === index)
+            .filter((rowNumber) => !vipRows.includes(rowNumber));
+
+        const rowCount = Math.max(1, targetRows.length);
+        const seatsPerFirstRows = Math.ceil(totalDboxSeats / rowCount);
+        let remaining = totalDboxSeats;
+
+        targetRows.forEach((rowNumber, index) => {
+            const seatsForRow = index === targetRows.length - 1
+                ? remaining
+                : Math.min(seatsPerFirstRows, remaining);
+            remaining -= seatsForRow;
+
+            const startCol = left + Math.max(1, Math.floor((right - seatsForRow) / 2) + 1);
+            markDboxRange(rowNumber, startCol, seatsForRow);
+        });
+    } else if (Array.isArray(baseConfig.dbox)) {
+        baseConfig.dbox.forEach((section: any) => {
+            const rowNumber = Number(section.r || 0);
+            const width = Number(section.w || 0);
+            const startCol = Number(section.c || 0);
+            markDboxRange(rowNumber, startCol, width);
+        });
+    }
+
+    return {
+        rows,
+        left,
+        right,
+        totalCols,
+        vipRows,
+        dboxMap,
+        isImax: Boolean(baseConfig.isImax)
+    };
+}
+
+function getSeatType(layout: any, rowNumber: number, colNumber: number) {
+    if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) {
+        return "dbox";
+    }
+
+    if (layout.vipRows.includes(rowNumber)) {
+        return "vip";
+    }
+
+    if (layout.isImax) {
+        return "imax";
+    }
+
+    return "normal";
+}
+
+function createSeatElement({seatId, seatType, occupiedSeats }:any) {
+    const seat = document.createElement("button");
+    seat.type = "button";
+    seat.classList.add("seat", seatType);
+    seat.dataset.seatId = seatId;
+    seat.dataset.type = seatType;
+    seat.title = `${seatId} (${seatType.toUpperCase()})`;
+
+    if (occupiedSeats.has(seatId)) {
+        seat.classList.add("occupied");
+        seat.disabled = true;
+        seat.setAttribute("aria-label", `${seatId} belegt`);
+        return seat;
+    }
+
+    seat.setAttribute("aria-label", `${seatId} frei`);
+    seat.addEventListener("click", () => {
+        seat.classList.toggle("selected");
+        updateBookingSummary();
+    });
+
+    return seat;
+}
+
+function createSeats(hallName: string, time: any) {
+    const seatGrid = document.getElementById("seat-grid");
+    if (!seatGrid) {
+        return;
+    }
+
+    seatGrid.innerHTML = "";
+
+    const arrIndex = hallName as keyof typeof seatLayouts;
+    const baseConfig: any = seatLayouts[arrIndex];
+    if (!baseConfig) {
+        currentHallLayout = null;
+        return;
+    }
+
+    currentHallLayout = buildHallLayout(hallName, baseConfig);
+
+    const occupiedKey = `${hallName}-${time}`;
+    const occupiedSeats = new Set(Array.isArray(occupiedSeatsData?.[occupiedKey]) ? occupiedSeatsData[occupiedKey] : []);
+
+    for (let rowIndex = 0; rowIndex < currentHallLayout.rows; rowIndex++) {
+        const rowNumber = rowIndex + 1;
+        const rowLabel = getRowLabel(rowIndex);
+
+        const perspectiveFactor = (currentHallLayout.rows - rowNumber) / Math.max(currentHallLayout.rows - 1, 1);
+        const rowIndent = Math.round(18 * perspectiveFactor);
+
+        const row = document.createElement("div");
+        row.className = "seat-row cinema-row";
+        row.style.setProperty("--row-indent", `${rowIndent}px`);
+
+        const leftLabel = document.createElement("div");
+        leftLabel.className = "row-label";
+        leftLabel.textContent = rowLabel;
+
+        const rightLabel = document.createElement("div");
+        rightLabel.className = "row-label row-label-right";
+        rightLabel.textContent = rowLabel;
+
+        const leftBlock = document.createElement("div");
+        leftBlock.className = "row-seat-block left-block";
+
+        const rightBlock = document.createElement("div");
+        rightBlock.className = "row-seat-block right-block";
+
+        for (let col = 1; col <= currentHallLayout.totalCols; col++) {
+            const seatId = `R${rowNumber}-P${col}`;
+            const seatType = getSeatType(currentHallLayout, rowNumber, col);
+            const seat = createSeatElement({ seatId, seatType, occupiedSeats });
+
+            if (col <= currentHallLayout.left) {
+                leftBlock.appendChild(seat);
+            } else {
+                rightBlock.appendChild(seat);
+            }
+        }
+
+        const aisle = document.createElement("div");
+        aisle.className = "aisle-gap";
+
+        row.append(leftLabel, leftBlock, aisle, rightBlock, rightLabel);
+        seatGrid.appendChild(row);
+    }
+}
+
+function renderBookingLegend() {
+    const legend = document.getElementById("dynamic-legend");
+    if (!legend || !currentHallLayout) {
+        return;
+    }
+
+    const legendItems = [
+        { type: "normal", label: "Standard" },
+        { type: "selected", label: "Ausgewählt" },
+        { type: "occupied", label: "Belegt" }
+    ];
+
+    if (currentHallLayout.isImax) {
+        legendItems.unshift({ type: "imax", label: "IMAX" });
+    }
+
+    if (currentHallLayout.vipRows.length > 0) {
+        legendItems.unshift({ type: "vip", label: "VIP" });
+    }
+
+    if (currentHallLayout.dboxMap.size > 0) {
+        legendItems.unshift({ type: "dbox", label: "D-BOX" });
+    }
+
+    legend.innerHTML = legendItems
+        .map((item) => `
+            <div class="item">
+                <span class="seat ${item.type}"></span>
+                <span>${item.label}</span>
+            </div>
+        `)
+        .join("");
+}
+
+function updateBookingSummary() {
+    const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];;
+    const summaryPanel = document.getElementById("booking-summary");
+    const summaryItems = document.getElementById("summary-items");
+    const totalEl = document.getElementById("total-price");
+
+    let total = 0;
+
+    if (summaryItems) {
+        summaryItems.innerHTML = selectedSeats
+            .map((seat) => {
+                const type = (seat.dataset.type || "normal") as keyof typeof prices;
+                const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11);
+                total += seatPrice;
+
+                return `
+                    <div class="summary-row">
+                        <span>${seat.dataset.seatId}</span>
+                        <span>${seatPrice.toFixed(2).replace(".", ",")} EUR</span>
+                    </div>
+                `;
+            })
+            .join("");
+    } else {
+        selectedSeats.forEach((seat) => {
+            const type = seat.dataset.type || "normal";
+            const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11);
+            total += seatPrice;
+        });
+    }
+
+    if (totalEl) {
+        totalEl.innerText = `${total.toFixed(2).replace(".", ",")} EUR`;
+    }
+
+    summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0);
+}
+
+function findMoviePoster(movieTitle: string) {
+    const cards = Array.from(document.querySelectorAll(".movie-card, .detailed-card"));
+    const normalizedTarget = String(movieTitle || "").trim().toLowerCase();
+
+    for (const card of cards) {
+        const currentCard = card.querySelector("h2, h3") as HTMLElement;
+        const title = currentCard.innerText?.trim().toLowerCase();
+        if (title === normalizedTarget) {
+            const imageSrc = card.querySelector("img")?.src;
+            if (imageSrc) {
+                return imageSrc;
+            }
+        }
+    }
+
+    return "";
+}
+
+function confirmSelectedSeats() {
+    const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];
+
+    if (!currentBookingContext || selectedSeats.length === 0) {
+        alert("Bitte waehle mindestens einen Platz aus.");
+        return;
+    }
+
+    const moviePoster = findMoviePoster(currentBookingContext.movie);
+    const addedSeats = [];
+
+    selectedSeats.forEach((seat) => {
+        const seatId = seat.dataset.seatId;
+        const seatType = seat.dataset.type || "normal";
+
+        const alreadyInCart = cart.some((item: any) =>
+            item.category === "movie" &&
+            item.title === currentBookingContext.movie &&
+            item.hall === currentBookingContext.hall &&
+            item.time === currentBookingContext.time &&
+            item.seatId === seatId
+        );
+
+        if (alreadyInCart) {
+            return;
+        }
+
+        cart.push({
+            id: Date.now() + Math.random(),
+            category: "movie",
+            title: currentBookingContext.movie,
+            hall: currentBookingContext.hall,
+            time: currentBookingContext.time,
+            seatId,
+            type: seatType.toUpperCase(),
+            price: Number(prices?.[seatType] ?? prices?.normal ?? 11),
+            img: moviePoster
+        });
+
+        addedSeats.push(seatId);
+    });
+
+    if (!addedSeats.length) {
+        alert("Diese Plaetze sind bereits im Warenkorb.");
+        return;
+    }
+
+    saveCart?.();
+    renderCart?.();
+    renderCheckout?.();
+
+    document.getElementById("booking-modal")?.classList.add("hidden");
+
+    const snackOverlay = document.getElementById("snack-prompt-overlay");
+    snackOverlay?.classList.remove("hidden");
+    document.body.style.overflow = "hidden";
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("btn-confirm-seats")?.addEventListener("click", confirmSelectedSeats);
+});
--- a/src/scripts/cart.ts
+++ b/src/scripts/cart.ts
@@ -0,0 +1,203 @@
+import { cart } from "./main.js";
+
+function formatEuro(value: number) {
+    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
+}
+
+function escapeHtml(value: any) {
+    return String(value || "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+
+function buildCartKey(item: { category: string; seatId: any; hall: any; time: any; title: any; }) {
+    const infoText = item.category === "movie"
+        ? `Sitz: ${item.seatId} (${item.hall})`
+        : item.time;
+    return `${item.title}-${item.hall}-${infoText}`;
+}
+
+function isDrinkItem(item: { category: string; title: any; hall: any; }) {
+    if (item.category !== "snack") {
+        return false;
+    }
+
+    const title = String(item.title || "").toLowerCase();
+    const size = String(item.hall || "").toLowerCase();
+    const drinkKeywords = [
+        "cola",
+        "sprite",
+        "fanta",
+        "mezzo",
+        "fuze",
+        "wasser",
+        "getraenk",
+        "drink"
+    ];
+
+    return drinkKeywords.some((word) => title.includes(word)) || size.includes("l");
+}
+
+function buildItemInfo(item: { category: any; seatId?: any; hall: any; time?: any; title: any; }) {
+    if (item.category === "movie") {
+        return `
+            <div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div>
+            <div>Saal: ${escapeHtml(item.hall || "-")}</div>
+            <div>Uhrzeit: ${escapeHtml(item.time || "-")} Uhr</div>
+        `;
+    }
+
+    if (isDrinkItem(item)) {
+        return `
+            <div>Variante: ${escapeHtml(item.time || "-")}</div>
+            <div>Groesse: ${escapeHtml(item.hall || "-")}</div>
+        `;
+    }
+
+    return `
+        <div>Kategorie: Snack</div>
+        <div>Variante: ${escapeHtml(item.time || "-")}</div>
+        <div>Groesse: ${escapeHtml(item.hall || "-")}</div>
+    `;
+}
+
+function groupCartItems() {
+    const groups = new Map();
+
+    cart.forEach((item: { price?: any; category: string; seatId: any; hall: any; time: any; title: any; }) => {
+        const key = buildCartKey(item);
+
+        if (!groups.has(key)) {
+            groups.set(key, {
+                key,
+                quantity: 0,
+                total: 0,
+                item
+            });
+        }
+
+        const group = groups.get(key);
+        group.quantity += 1;
+        group.total += Number(item.price || 0);
+    });
+
+    return Array.from(groups.values());
+}
+
+export function saveCart() {
+    localStorage.setItem("eagleCart", JSON.stringify(cart));
+    updateCartBadge();
+}
+
+export function updateCartBadge() {
+    const cartBadge = document.getElementById("cart-badge");
+
+    if (!cartBadge) {
+        return;
+    }
+
+    cartBadge.innerText = cart.length;
+    cartBadge.classList.toggle("hidden", cart.length === 0);
+}
+
+export function renderCart() {
+    const cartList = document.getElementById("cart-items-list");
+    const totalEl = document.getElementById("cart-total-right");
+    const vatEl = document.getElementById("cart-vat-right");
+
+    if (!cartList || !totalEl || !vatEl) {
+        return;
+    }
+
+    if (!Array.isArray(cart) || cart.length === 0) {
+        cartList.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
+        totalEl.innerText = formatEuro(0);
+        vatEl.innerText = `inkl. 19% MwSt: ${formatEuro(0)}`;
+        return;
+    }
+
+    const groupedItems = groupCartItems();
+
+    const header = /*html*/`
+        <div class="cart-header-row">
+            <div class="col-amount">MENGE</div>
+            <div class="col-img">VORSCHAU</div>
+            <div class="col-product">NAME</div>
+            <div class="col-details">INFO</div>
+            <div class="col-price">PREIS</div>
+            <div class="col-action">AKTION</div>
+        </div>
+    `;
+
+    const rows = groupedItems
+        .map((group) => {
+            const imageHtml = group.item.img
+                ? /*html*/`<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
+                : /*html*/`<div class="cart-img-fallback">Kein Bild</div>`;
+            const quantityHtml = group.item.category === "movie"
+                ? /*html*/`<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
+                : /*html*/`
+                    <div class="qty-stepper">
+                        <button class="btn-qty" data-action="minus" data-key="${escapeHtml(group.key)}">-</button>
+                        <span>${group.quantity}</span>
+                        <button class="btn-qty" data-action="plus" data-key="${escapeHtml(group.key)}">+</button>
+                    </div>
+                `;
+
+            return /*html*/`
+                <div class="cart-item-row">
+                    <div class="col-amount">
+                        ${quantityHtml}
+                    </div>
+                    <div class="col-img">${imageHtml}</div>
+                    <div class="col-product">${escapeHtml(group.item.title)}</div>
+                    <div class="col-details cart-item-info">${buildItemInfo(group.item)}</div>
+                    <div class="col-price">${formatEuro(group.total)}</div>
+                    <div class="col-action">
+                        <button class="btn-delete-item" data-key="${escapeHtml(group.key)}" aria-label="Eintrag entfernen"><span aria-hidden="true">🗑️</span></button>
+                    </div>
+                </div>
+            `;
+        })
+        .join("");
+
+    cartList.innerHTML = header + rows;
+
+    const total = cart.reduce((sum, item) => sum + Number(item.price || 0), 0);
+    const vat = total - total / 1.19;
+
+    totalEl.innerText = formatEuro(total);
+    vatEl.innerText = `inkl. 19% MwSt: ${formatEuro(vat)}`;
+
+    saveCart();
+}
+//@ts-ignore
+window.removeItem = function removeItem(id: any) {
+    var localCart = cart.filter((item: { id: any; }) => item.id !== id);
+    saveCart();
+    renderCart();
+};
+
+//@ts-ignore
+window.changeQty = function changeQty(title, delta): void {
+    if (delta > 0) {
+        const item = cart.find((entry: { title: any; }) => entry.title === title);
+        if (item) {
+            cart.push({ ...item, id: Date.now() + Math.random() });
+        }
+    } else {
+        const index = cart
+            .map((entry: { title: any; }) => entry.title)
+            .lastIndexOf(title);
+        if (index !== -1) {
+            cart.splice(index, 1);
+        }
+    }
+
+    saveCart();
+    renderCart();
+};
+
--- a/src/scripts/checkout.ts
+++ b/src/scripts/checkout.ts
@@ -0,0 +1,238 @@
+import { currentUser, users } from "./account.js";
+import { renderCart, saveCart } from "./cart.js";
+import { cart, emptyCart, occupiedSeatsData } from "./main.js";
+
+function formatCheckoutEuro(value: number) {
+    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
+}
+
+let selectedPaymentMethod = "";
+let checkoutEventsBound = false;
+
+function setCheckoutStep(step: number) {
+    const step1 = document.getElementById("checkout-step-1");
+    const step2 = document.getElementById("checkout-step-2");
+    const step3 = document.getElementById("checkout-step-3");
+
+    step1?.classList.toggle("hidden", step !== 1);
+    step2?.classList.toggle("hidden", step !== 2);
+    step3?.classList.toggle("hidden", step !== 3);
+
+    const line1 = document.getElementById("line-1");
+    const line2 = document.getElementById("line-2");
+    const indicator1 = document.getElementById("step-1-indicator");
+    const indicator2 = document.getElementById("step-2-indicator");
+    const indicator3 = document.getElementById("step-3-indicator");
+
+    indicator1?.classList.add("active");
+    indicator2?.classList.toggle("active", step >= 2);
+    indicator3?.classList.toggle("active", step >= 3);
+    line1?.classList.toggle("active", step >= 2);
+    line2?.classList.toggle("active", step >= 3);
+}
+
+export function renderCheckout() {
+    const summaryList = document.getElementById("checkout-summary-list");
+    const totalDisplay = document.getElementById("checkout-total-display");
+    const vatDisplay = document.getElementById("checkout-vat-display");
+    const nextButton = document.getElementById("btn-next-step-2");
+
+    if (!summaryList) {
+        return;
+    }
+
+    summaryList.innerHTML = "";
+
+    const safeCart = Array.isArray(cart) ? cart : [];
+    const total = safeCart.reduce((sum, item) => sum + Number(item.price || 0), 0);
+    const vat = total - total / 1.19;
+
+    safeCart.forEach((item) => {
+        const row = document.createElement("div");
+        row.style.cssText = "display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:0.95rem;";
+
+        const infoText = item.category === "movie"
+            ? `Sitz ${item.seatId || "-"} | ${item.hall || "-"} | ${item.time || "-"} Uhr`
+            : `${item.time || "Standard"} | ${item.hall || "-"}`;
+
+        row.innerHTML = `<span>${item.title} (${infoText})</span><span>${formatCheckoutEuro(item.price)}</span>`;
+        summaryList.appendChild(row);
+    });
+
+    if (totalDisplay) {
+        totalDisplay.innerText = `Gesamtbetrag: ${formatCheckoutEuro(total)}`;
+    }
+
+    if (vatDisplay) {
+        vatDisplay.innerText = `inkl. 19% MwSt: ${formatCheckoutEuro(vat)}`;
+    }
+
+    selectedPaymentMethod = "";
+    document.querySelectorAll(".payment-method").forEach((method) => {
+        method.classList.remove("selected");
+    });
+
+    nextButton?.classList.add("hidden");
+    setCheckoutStep(1);
+}
+
+function generateTicket() {
+    const ticketContainer = document.getElementById("ticket-container");
+    if (!ticketContainer) {
+        return;
+    }
+
+    const moviesInCart = (Array.isArray(cart) ? cart : []).filter((item) => item.category === "movie");
+    if (!moviesInCart.length) {
+        ticketContainer.innerHTML = "<p>Danke fuer deinen Einkauf!</p>";
+        return;
+    }
+
+    const mainMovie = moviesInCart[0];
+    const matchingMovieSeats = moviesInCart
+        .filter((item) => item.title === mainMovie.title && item.time === mainMovie.time)
+        .map((item) => item.seatId)
+        .join(", ");
+
+    const qrData = encodeURIComponent(`EAGLE-IMAX|${mainMovie.title}|${mainMovie.hall}|${matchingMovieSeats}`);
+    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrData}&bgcolor=ffffff`;
+
+    ticketContainer.innerHTML = /*html*/`
+        <div class="luxury-ticket">
+            <div class="ticket-left">
+                <img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}">
+            </div>
+            <div class="ticket-right">
+                <div class="ticket-brand">EAGLE'S IMAX PREMIUM</div>
+                <h2 class="ticket-title">${mainMovie.title}</h2>
+                <div class="ticket-details">
+                    <p><span>SAAL</span> <strong>${mainMovie.hall}</strong></p>
+                    <p><span>ZEIT</span> <strong>${mainMovie.time} Uhr</strong></p>
+                    <p><span>SITZE</span> <strong>${matchingMovieSeats || "-"}</strong></p>
+                </div>
+                <div class="ticket-footer">
+                    <img src="${qrUrl}" class="ticket-qr" alt="QR Code">
+                    <div class="ticket-code">#${Math.floor(Math.random() * 90000) + 10000}</div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+function saveOrderForCurrentUser(orderItems: any[], orderTotal: any) {
+    if (typeof currentUser === "undefined" || !currentUser) {
+        return;
+    }
+
+    if (typeof users === "undefined" || !Array.isArray(users)) {
+        return;
+    }
+
+    const order = {
+        date: new Date().toLocaleString("de-DE"),
+        items: orderItems,
+        total: orderTotal,
+        paymentMethod: selectedPaymentMethod || "-"
+    };
+
+    //@ts-ignore
+    const userIndex = users.findIndex((entry) => entry.email === currentUser.email);
+    if (userIndex === -1) {
+        return;
+    }
+
+    if (!Array.isArray(users[userIndex].orders)) {
+        users[userIndex].orders = [];
+    }
+
+    users[userIndex].orders.push(order);
+    localStorage.setItem("eagleUsers", JSON.stringify(users));
+}
+
+function reserveSeatsAfterPayment(orderItems: any[]) {
+    const movieItems = orderItems.filter((item) => item.category === "movie");
+
+    movieItems.forEach((item) => {
+        const key = `${item.hall}-${item.time}`;
+        if (!occupiedSeatsData[key]) {
+            occupiedSeatsData[key] = [];
+        }
+
+        occupiedSeatsData[key].push(item.seatId);
+    });
+
+    localStorage.setItem("eagleOccupied", JSON.stringify(occupiedSeatsData));
+}
+
+function completeCheckout() {
+    const orderItems = Array.isArray(cart) ? [...cart] : [];
+    const orderTotal = orderItems.reduce((sum, item) => sum + Number(item.price || 0), 0);
+
+    saveOrderForCurrentUser(orderItems, orderTotal);
+    reserveSeatsAfterPayment(orderItems);
+
+    emptyCart?.()
+    saveCart?.();
+    renderCart?.();
+}
+
+function bindCheckoutEvents() {
+    if (checkoutEventsBound) {
+        return;
+    }
+
+    checkoutEventsBound = true;
+
+    const nextButton = document.getElementById("btn-next-step-2");
+    const backButton = document.getElementById("btn-back-to-step1");
+    const payNowButton = document.getElementById("btn-pay-now") as HTMLButtonElement;
+
+    document.querySelectorAll(".payment-method").forEach((method) => {
+        method.addEventListener("click", () => {
+            document.querySelectorAll(".payment-method").forEach((entry) => {
+                entry.classList.remove("selected");
+            });
+
+            method.classList.add("selected");
+            //@ts-ignore
+            selectedPaymentMethod = method.dataset.method || "";
+            nextButton?.classList.remove("hidden");
+        });
+    });
+
+    nextButton?.addEventListener("click", () => {
+        if (!selectedPaymentMethod) {
+            alert("Bitte waehle zuerst eine Zahlungsmethode aus.");
+            return;
+        }
+
+        setCheckoutStep(2);
+    });
+
+    backButton?.addEventListener("click", () => {
+        setCheckoutStep(1);
+    });
+
+    payNowButton?.addEventListener("click", () => {
+        if (!Array.isArray(cart) || !cart.length) {
+            alert("Dein Warenkorb ist leer.");
+            return;
+        }
+
+        payNowButton.disabled = true;
+        payNowButton.innerText = "Verarbeite...";
+        payNowButton.style.opacity = "0.7";
+
+        setTimeout(() => {
+            setCheckoutStep(3);
+            generateTicket();
+            completeCheckout();
+
+            payNowButton.disabled = false;
+            payNowButton.innerText = "Jetzt Bezahlen";
+            payNowButton.style.opacity = "1";
+        }, 1200);
+    });
+}
+
+document.addEventListener("DOMContentLoaded", bindCheckoutEvents);
--- a/src/scripts/interfaces.ts
+++ b/src/scripts/interfaces.ts
@@ -0,0 +1,18 @@
+export interface User {
+    firstName: string;
+    lastName: string;
+    email: string;
+    hashedPassword: string;
+    orders: any[]; // TODO: figure out proper array type of orders. Probably smartest do create an Order interface which this would be an array of
+    paymentMethods: any[]; // TODO: figure out proper array type of paymentMethods. create paymentMethod interface and make this an array of it
+}
+
+export interface MovieCatalog {
+    title: string;
+    genre: string;
+    duration: number;
+    fsk: string;
+    description: string;
+    poster: string;
+    backdrop: string;
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`import/img/* filter=lfs diff=lfs merge=lfs -text`