Merge branch 'master' into dev_jannis

.env.example

@@ -0,0 +1,2 @@
+TMDB_API_TOKEN=yourapitoken
+TMDB_API_KEY=yourapikey

.gitattributes

@@ -1,2 +1,2 @@
-img/ filter=lfs diff=lfs merge=lfs -text
-img/** filter=lfs diff=lfs merge=lfs -text
+public/img/* filter=lfs diff=lfs merge=lfs -text
+

.gitignore

@@ -1,2 +1,25 @@
-node_modules
-dist/
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+.claude/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,22 @@
+// @ts-check
+import { defineConfig, envField } from 'astro/config';
+
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+
+
+// https://astro.build/config
+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' }),
+        }
+    }
+});

package.json

@@ -1,25 +1,28 @@
 {
-  "name": "p1---kino",
-  "version": "1.0.0",
-  "description": "",
-  "main": "main.js",
+  "name": "kino-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
-    "serve": "serve .",
-    "run": "npm-run-all --parallel watch serve"
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
-  "repository": {
-    "type": "git",
-    "url": "ssh://git@gitea.starfour.de:2222/Aaron/Kino-Website.git"
+  "dependencies": {
+    "@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"
   },
-  "keywords": [],
-  "author": "Aaron und Jannis",
-  "license": "ISC",
-  "type": "commonjs",
   "devDependencies": {
-    "npm-run-all": "^4.1.5",
-    "serve": "^14.2.6",
-    "typescript": "^6.0.3"
+    "@types/node": "^25.6.0"
   }
 }

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>
+    )
+}

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>

src/pages/index.astro

@@ -0,0 +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 />
+
+        <script>
+            import "../scripts/main.ts";
+        </script>
+    </body>
+</html>

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("&", "&")
+        .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;
+