Merge branch 'master' into dev_jannis

added .claude to the gitignore
Added assets, started actual work on making this a proper multi file webapp. gonna continue tonight
2026-04-30 12:40:23 +02:00 · 2026-04-30 12:31:58 +02:00 · 2026-04-30 12:30:54 +02:00 · 2026-04-30 08:39:10 +02:00 · 2026-04-30 08:22:46 +02:00 · 2026-04-29 13:06:04 +00:00
131 changed files with 14141 additions and 1683 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,2 @@
+TMDB_API_TOKEN=yourapitoken
+TMDB_API_KEY=yourapikey
--- a/.gitattributes
+++ b/.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
+
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# 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/
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.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"
+    }
+  ]
+}
--- a/README.md
+++ b/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).
--- a/astro.config.mjs
+++ b/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' }),
+        }
+    }
+});
--- a/img/astronaut-rockypopcorn.jpg
+++ b/img/astronaut-rockypopcorn.jpg
--- a/img/cashtruck.jpg
+++ b/img/cashtruck.jpg
--- a/img/fsk-0.png
+++ b/img/fsk-0.png
--- a/img/fsk-12.png
+++ b/img/fsk-12.png
--- a/img/fsk-16.png
+++ b/img/fsk-16.png
--- a/img/fsk-18.png
+++ b/img/fsk-18.png
--- a/img/fsk-6.png
+++ b/img/fsk-6.png
--- a/img/nachokombigross.png
+++ b/img/nachokombigross.png
--- a/img/nachokombimittel.png
+++ b/img/nachokombimittel.png
--- a/img/popcornkombigross.png
+++ b/img/popcornkombigross.png
--- a/img/popcornkombiklein.png
+++ b/img/popcornkombiklein.png
--- a/img/popcornkombimittel.png
+++ b/img/popcornkombimittel.png
--- a/img/screammetalpopcorn.png
+++ b/img/screammetalpopcorn.png
--- a/img/zoomania-2-logo.png
+++ b/img/zoomania-2-logo.png
--- a/index.html
+++ b/index.html
@@ -51,14 +51,7 @@
                <h3>Jetzt läuft</h3>
                <span>Heute im Fokus</span>
            </div>
-            <div id="now-running-shell" class="now-running-shell is-collapsed">
            <div id="now-running-row" class="now-running-row"></div>
-                <div class="now-running-fade">
-                    <button id="now-running-toggle" class="now-running-toggle" type="button" aria-expanded="false" aria-label="Weitere Filme anzeigen">
-                        <span>&gt;</span>
-                    </button>
-                </div>
-            </div>
        </div>

        <div class="home-inline-showcase reveal-on-scroll">
@@ -274,238 +267,15 @@
            <h1 class="list-title">Snacks & Getränke</h1>
            
            <div class="category-tabs">
-                <button class="tab-btn active" data-target="cat-limited">Limitierte Specials</button>
-                <button class="tab-btn" data-target="cat-getraenke">Getränke</button>
+                <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-limited" class="snack-category active limited-specials-category">
-                <div class="limited-specials-hero">
-                    <div>
-                        <span class="limited-kicker">Nur für kurze Zeit</span>
-                        <h2>Limitierte Specials</h2>
-                        <p>Filmbecher, Sammler-Eimer und Kids-Menüs als kleine Vitrine für besondere Aktionen.</p>
-                    </div>
-                </div>
-
-                <div class="limited-special-block">
-                    <div class="special-film-heading">
-                        <img src="img/Zoomania-2.jpg" alt="Zoomania 2 Logo">
-                        <div>
-                            <span>Zoomania 2</span>
-                            <h2>Tiereische Collection</h2>
-                        </div>
-                    </div>
-                    <div class="limited-special-grid">
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/zoomania-popcorn.jpg" alt="Zoomania 2 Metallbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Metallbecher</span>
-                                <h3>Limitierter Metallbecher - Zoomania 2</h3>
-                                <p class="snack-card-note">Sammlerbecher mit Popcornfüllung, wahlweise süß oder salzig.</p>
-                                <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">Special <span>12,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card wide-special">
-                            <div class="snack-img"><img src="img/zoomaniakidsmenu.jpg" alt="Zoomania Kids Menu"></div>
-                            <div class="snack-info">
-                                <span class="badge">Kids Special</span>
-                                <h3>Zoomania Kids Menü</h3>
-                                <p class="snack-card-note">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 class="limited-special-block">
-                    <div class="special-film-heading">
-                        <img src="img/screamvii.jpg" alt="Scream VII Logo">
-                        <div>
-                            <span>Scream VII</span>
-                            <h2>Horror Collection</h2>
-                        </div>
-                    </div>
-                    <div class="limited-special-grid">
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/screamdoorpopcorn.jpg" alt="Scream VII Sammelbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Collector</span>
-                                <h3>Limitierter Sammelbecher - Scream VII</h3>
-                                <p class="snack-card-note">Hallo Sydney! Ghostface in der Tür.</p>
-                                <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">Special <span>29,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/screammetalpopcorn.png" alt="Scream VII Sammelbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Collector</span>
-                                <h3>Limitierter Metallbecher - Scream VII</h3>
-                                <p class="snack-card-note">Metall Sammelbecher im SCREAM VII Design</p>
-                                <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">Special <span>12,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="limited-special-block">
-                    <div class="special-film-heading">
-                        <img src="img/derAustronaut.jpg" alt="Der Austronaut Logo">
-                        <div>
-                            <span>Project Hail Mary</span>
-                            <h2>Space Collection</h2>
-                        </div>
-                    </div>
-                    <div class="limited-special-grid">
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Der Austronaut Sammelbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Space Cup</span>
-                                <h3>Limitierter Sammelbecher - Der Austronaut</h3>
-                                <p class="snack-card-note">Der Helm von Ryland Grace aus "Der Austronaut"</p>
-                                <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">Special <span>34,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/astronaut-rockypopcorn.jpg" alt="Der Austronaut - Rocky"></div>
-                            <div class="snack-info">
-                                <span class="badge">Collector</span>
-                                <h3>Limitierter Sammelbecher - Der Austronaut</h3>
-                                <p class="snack-card-note">Die Kapsel von Rocky - Mit abnehmbarer Rocky Figur</p>
-                                <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">Special <span>22,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="limited-special-block">
-                    <div class="special-film-heading">
-                        <img src="img/hoppers.jpg" alt="Hoppers Logo">
-                        <div>
-                            <span>Hoppers</span>
-                            <h2>Biber Specials (Ist das eine Eidechse?)</h2>
-                        </div>
-                    </div>
-                    <div class="limited-special-grid">
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/hopperspopcornmetall.jpg" alt="Hoppers Metallbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Metallbecher</span>
-                                <h3>Limitierter Metallbecher - Hoppers</h3>
-                                <p class="snack-card-note">Stabiler Becher mit Popcornfüllung.</p>
-                                <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">Special <span>12,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/hopperspopcornwood.png" alt="Hoppers Sammelbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Collector</span>
-                                <h3>Limitierter Sammelbecher - Hoppers</h3>
-                                <p class="snack-card-note">Sammlerbecher mit warmem Popcornmoment.</p>
-                                <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">Special <span>21,00€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card wide-special">
-                            <div class="snack-img"><img src="img/hopperskidsmenu.jpg" alt="Hoppers Kids Menu"></div>
-                            <div class="snack-info">
-                                <span class="badge">Kids Special</span>
-                                <h3>Hoppers Kids Menü</h3>
-                                <p class="snack-card-note">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>
-                </div>
-
-                <div class="limited-special-block">
-                    <div class="special-film-heading">
-                        <img src="img/mariogalaxy.jpg" alt="Mario Galaxy Logo">
-                        <div>
-                            <span>Super Mario Galaxy</span>
-                            <h2>Galaxy Collection</h2>
-                        </div>
-                    </div>
-                    <div class="limited-special-grid">
-                        <div class="snack-card limited-special-card">
-                            <div class="snack-img"><img src="img/marioyoshipopcorn.png" alt="Yoshi Sammelbecher"></div>
-                            <div class="snack-info">
-                                <span class="badge">Yoshi Cup</span>
-                                <h3>Limitierter Sammelbecher - Yoshi Becher</h3>
-                                <p class="snack-card-note">Verspielter Sammlerbecher für Mario-Fans.</p>
-                                <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">Special <span>35,90€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card limited-special-card wide-special">
-                            <div class="snack-img"><img src="img/mariokidsmenu.png" alt="Mario Kids Menu"></div>
-                            <div class="snack-info">
-                                <span class="badge">Kids Special</span>
-                                <h3>Mario Galaxy Kids Menü</h3>
-                                <p class="snack-card-note">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>
-                </div>
-            </div>
-
-<div id="cat-getraenke" class="snack-category hidden">
+<div id="cat-getraenke" class="snack-category active">
    <div class="snack-grid">
        
        <div class="snack-card">
@@ -622,11 +392,6 @@
 </div> </div>

            <div id="cat-popcorn" class="snack-category hidden">
-                <div class="snack-subsection">
-                    <div class="snack-section-heading">
-                        <span>Frisch gepoppt</span>
-                        <h2>Einzelprodukte</h2>
-                    </div>
                <div class="snack-grid">
                    <div class="snack-card">
                        <div class="snack-img"><img src="img/popcorn-klein.png" alt="Popcorn klein"></div>
@@ -637,7 +402,7 @@
                                <button class="opt-btn">Salzig</button>
                            </div>
                            <div class="size-selector">
-                                    <button class="size-chip">Klein <span>3,50€</span></button>
+                    <button class="size-chip">3,50€</button>
                </div>
            </div>
        </div>
@@ -650,7 +415,7 @@
                                <button class="opt-btn">Salzig</button>
                            </div>
                            <div class="size-selector">
-                                    <button class="size-chip">Mittel <span>4,50€</span></button>
+                    <button class="size-chip">4,50€</button>
                </div>
            </div>
        </div>
@@ -663,59 +428,91 @@
                                <button class="opt-btn">Salzig</button>
                            </div>
                            <div class="size-selector">
-                                    <button class="size-chip">Groß <span>6,00€</span></button>
+                    <button class="size-chip">6,00€</button>
                </div>
            </div>
        </div>
-                    </div>
-                </div>
-
-                <div class="snack-subsection">
-                    <div class="snack-section-heading popcorn-combo-heading">
-                        <span>Für Filmabende</span>
-                        <h2>Kombi Menü</h2>
-                    </div>
-                    <div class="snack-grid">
-                        <div class="snack-card highlight">
-                            <div class="snack-img"><img src="img/popcornkombiklein.png" alt="Popcorn klein - Kombi-Menü"></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>Kleines Menü</h3>
-                                <p class="snack-card-note">0,33L Getränk + Popcorn klein</p>
+                            <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">Menü-Preis <span>5,00€</span></button>
+                    <button class="size-chip">12,00€</button>
                </div>
            </div>
        </div>  
-                        <div class="snack-card highlight">
-                            <div class="snack-img"><img src="img/popcornkombimittel.png" alt="Popcorn mittel - Kombi-Menü"></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>Mittleres Menü</h3>
-                                <p class="snack-card-note">0,5L Getränk + Popcorn mittel</p>
+                            <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">Menü-Preis <span>6,50€</span></button>
+                    <button class="size-chip">29,00€</button>
                </div>
            </div>
        </div> 
-                        <div class="snack-card highlight">
-                            <div class="snack-img"><img src="img/popcornkombigross.png" alt="Popcorn groß - Kombi-Menü"></div>
+        <div class="snack-card">
+                        <div class="snack-img"><img src="img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
                        <div class="snack-info">
-                                <span class="badge">Bestseller</span>
-                                <h3>Großes Menü</h3>
-                                <p class="snack-card-note">1L Getränk + Popcorn groß</p>
-                                <div class="size-selector">
-                                    <button class="size-chip">Menü-Preis <span>8,00€</span></button>
+                            <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"></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-subsection">
-                    <div class="snack-section-heading">
-                        <span>Nachos</span>
-                        <h2>Einzelprodukte</h2>
-                    </div>
                <div class="snack-grid">
                    <div class="snack-card">
                        <div class="snack-img"><img src="img/nachosnormal.png" alt="Nachos"></div>
@@ -757,15 +554,12 @@
                            </div>
                        </div>
                    </div>
-                    </div>
-                </div>
-
-                <div class="snack-subsection">
-                    <div class="snack-section-heading">
-                        <span>Extra dazu</span>
-                        <h2>Dips</h2>
-                    </div>
-                    <div class="snack-grid">
+                    <h2 class="list-title"> </h2>
+                    <br>
+                    <h2 class="list-title">Dips</h2>
+                    <br>
+                    <br>
+                    <br>
                    <div class="snack-card">
                        <div class="snack-img"><img src="img/käsedip.png" alt="Käse-Dip"></div>
                        <div class="snack-info">
@@ -803,20 +597,16 @@
                            </div>
                        </div>
                    </div>
+                    <h2 class="list-title">Nacho Kombi-Menüs</h2>
+                    <br>
+                    <br>
                </div>
            </div>
-
-                <div class="snack-subsection">
-                    <div class="snack-section-heading">
-                        <span>Alles drin</span>
-                        <h2>Kombi Menü</h2>
        </div>
-                    <div class="snack-grid">
-                        <div class="snack-card highlight">
+            <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</h3>
-                                <p class="snack-card-note">Nachos klein + 1 Dip + 1x 0,33L Getränk</p>
+                            <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>
@@ -825,35 +615,6 @@
                            </div>
                        </div>
                    </div>
-                        <div class="snack-card highlight">
-                            <div class="snack-img"><img src="img/nachokombimittel.png" alt="Nacho Kombi Mittel"></div>
-                            <div class="snack-info">
-                                <h3>Nacho Menü Mittel</h3>
-                                <p class="snack-card-note">Nachos mittel + 1 Dip + 1x 0,33L Getränk</p>
-                                <div class="option-group">
-                                    <button class="opt-btn active">Mittel</button>
-                                </div>
-                                <div class="size-selector">
-                                    <button class="size-chip">Kombi <span>6,90€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="snack-card highlight">
-                            <div class="snack-img"><img src="img/nachokombigross.png" alt="Nacho Kombi Groß"></div>
-                            <div class="snack-info">
-                                <h3>Nacho Menü Groß</h3>
-                                <p class="snack-card-note">Nachos groß + 1 Dip + 1x 0,33L Getränk</p>
-                                <div class="option-group">
-                                    <button class="opt-btn active">Groß</button>
-                                </div>
-                                <div class="size-selector">
-                                    <button class="size-chip">Kombi <span>6,90€</span></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
            <div id="cat-snacks" class="snack-category hidden">
                <div class="snack-grid">
                    <div class="snack-card">
@@ -886,6 +647,75 @@
                </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>
+                    <br>
+                    <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<br>+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>
+                            <br>
+                            <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 GALXY 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>
+                            <br>
+                            <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<br>+ 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>
@@ -905,8 +735,8 @@
                    <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.png" alt="D-Box" class="tech-badge">
+                            <img src="img/Dolby.png" alt="Dolby" class="tech-badge">
+                            <img src="img/dbox.jpg" alt="D-Box" class="tech-badge">
                        </div>
                    </div>
                </div>
@@ -1118,11 +948,11 @@
        </div>
    </div>

-    <script src="account.js"></script>
-    <script src="cart.js"></script>
-    <script src="booking.js"></script>
-    <script src="checkout.js"></script>
-    <script src="main.js"></script>
+    <script type="module" src="dist/main.js"></script>
+    <script type="module" src="dist/cart.js"></script>
+    <script type="module" src="dist/booking.js"></script>
+    <script type="module" src="dist/checkout.js"></script>
+    <script type="module" src="dist/account.js"></script>
 </body>
 </html>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "kino-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/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>
--- 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/account.ts
+++ b/src/account.ts
@@ -1,4 +1,6 @@
-function readStorageJson(key, fallbackValue) {
+import type { User } from "./interfaces.js";
+
+function readStorageJson(key: string, fallbackValue: any) {
    const raw = localStorage.getItem(key);

    if (!raw || raw === "undefined" || raw === "null") {
@@ -13,22 +15,18 @@
    }
 }

-function normalizeUser(user) {
-    if (!user || typeof user !== "object") {
-        return null;
-    }
-
+function normalizeUser(user: User): User {
    return {
        firstName: user.firstName || "",
        lastName: user.lastName || "",
        email: user.email || "",
-        password: user.password || "",
+        hashedPassword: user.hashedPassword || "",
        orders: Array.isArray(user.orders) ? user.orders : [],
        paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : []
    };
 }

-function escapeHtml(value) {
+function escapeHtml(value: string) {
    return String(value || "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
@@ -37,7 +35,7 @@ function escapeHtml(value) {
        .replaceAll("'", "&#39;");
 }

-function formatEuro(value) {
+function formatEuro(value: string) {
    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
 }

@@ -53,15 +51,21 @@ function persistCurrentUser() {
    }
 }

-let users = readStorageJson("eagleUsers", []);
+export let users = readStorageJson("eagleUsers", []);
 if (!Array.isArray(users)) {
    users = [];
 }
 users = users.map(normalizeUser).filter(Boolean);

-let currentUser = normalizeUser(readStorageJson("currentUser", null));
+const rawCurrentUser = readStorageJson("currentUser", null);
+
+export var currentUser: User | null = rawCurrentUser ? normalizeUser(rawCurrentUser) : null;
+
 if (currentUser && currentUser.email) {
-    const storedMatch = users.find((user) => user.email === currentUser.email);
+    const currentEmail = currentUser.email;
+    const storedMatch = users.find((user: { email: string; }) => {
+        return user.email === currentEmail;
+    });
    if (storedMatch) {
        currentUser = storedMatch;
    } else {
@@ -70,11 +74,23 @@ if (currentUser && currentUser.email) {
    }
 }

-function registerUser() {
-    const firstName = document.getElementById("reg-firstname")?.value.trim() || "";
-    const lastName = document.getElementById("reg-lastname")?.value.trim() || "";
-    const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase();
-    const password = document.getElementById("reg-password")?.value || "";
+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.");
@@ -86,17 +102,19 @@ function registerUser() {
        return;
    }

-    const existingUser = users.find((user) => user.email.toLowerCase() === email);
+    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,
-        password,
+        hashedPassword,
        orders: [],
        paymentMethods: []
    };
@@ -113,12 +131,13 @@ function registerUser() {
    openAccountDashboard();
 }

-function loginUser() {
-    const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase();
-    const password = document.getElementById("login-password")?.value || "";
+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) => entry.email.toLowerCase() === email && entry.password === password
+        (entry: User) => entry.email.toLowerCase() === email && entry.hashedPassword === hashedPassword
    );

    if (!user) {
@@ -131,7 +150,7 @@ function loginUser() {
    openAccountDashboard();
 }

-function openAccountDashboard() {
+export function openAccountDashboard() {
    const accountView = document.getElementById("account-view");
    if (!accountView) {
        return;
@@ -142,7 +161,7 @@ function openAccountDashboard() {
        return;
    }

-    accountView.innerHTML = `
+    accountView.innerHTML = /*html*/`
        <div class="account-panel">
            <div class="account-panel-header">
                <h2>Mein Konto</h2>
@@ -198,7 +217,7 @@ function renderOrders() {
    const orderHtml = orders
        .map((order, index) => {
            const movieItems = Array.isArray(order.items)
-                ? order.items.filter((item) => item.category === "movie")
+                ? 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";
@@ -227,20 +246,20 @@ function renderOrders() {
    `;

    const detailTarget = document.getElementById("order-ticket-details");
-    const orderButtons = Array.from(target.querySelectorAll(".order-item-btn"));
+    const orderButtons = Array.from(target.querySelectorAll<HTMLButtonElement>(".order-item-btn"));

-    const renderOrderTicket = (orderIndex) => {
+    const renderOrderTicket = (orderIndex: number) => {
        const order = orders[orderIndex];
        if (!order || !detailTarget) {
            return;
        }

        const movieItems = Array.isArray(order.items)
-            ? order.items.filter((item) => item.category === "movie")
+            ? 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) => item.seatId).filter(Boolean).join(", ") || "-";
+        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` : "-";
@@ -290,7 +309,7 @@ function renderPayments() {
        return;
    }

-    target.innerHTML = `
+    target.innerHTML = /*html*/`
        <div class="account-card">
            <h3>Zahlungsmethoden</h3>
            <p class="account-payments-note">Platzhalter zum Hinterlegen deiner Logos oder Anbieter-Informationen.</p>
@@ -444,7 +463,7 @@ function renderPayments() {
 }

 function logoutUser() {
-    currentUser = null;
    persistCurrentUser();
    window.location.reload();
 }
+
--- a/src/booking.ts
+++ b/src/booking.ts
@@ -1,7 +1,11 @@
-let currentBookingContext = null;
-let currentHallLayout = null;
+import { seatLayouts, occupiedSeatsData, prices, cart } from "./main.js"
+import { renderCart, saveCart } from "./cart.js";
+import { renderCheckout } from "./checkout.js";

-function openBooking(movie, hall, time) {
+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");

@@ -22,11 +26,11 @@ function openBooking(movie, hall, time) {
     document.getElementById("booking-modal")?.classList.remove("hidden");
 }

-function getRowLabel(rowIndex) {
+function getRowLabel(rowIndex: number) {
    return String(rowIndex + 1);
 }

-function buildHallLayout(hallName, baseConfig) {
+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);
@@ -39,7 +43,7 @@ function buildHallLayout(hallName, baseConfig) {
    const vipRows = rows > 0 ? [rows] : [];

    const dboxMap = new Set();
-    const markDboxRange = (rowNumber, startCol, width) => {
+    const markDboxRange = (rowNumber: number, startCol: number, width: number) => {
        if (!rowNumber || width <= 0) {
            return;
        }
@@ -52,7 +56,7 @@ function buildHallLayout(hallName, baseConfig) {

    if (isDeluxe) {
        const configuredDboxSeats = Array.isArray(baseConfig.dbox)
-            ? baseConfig.dbox.reduce((sum, section) => sum + Number(section.w || 0), 0)
+            ? baseConfig.dbox.reduce((sum: number, section: any) => sum + Number(section.w || 0), 0)
            : 0;

        const totalDboxSeats = Math.max(4, configuredDboxSeats || 0);
@@ -77,7 +81,7 @@ function buildHallLayout(hallName, baseConfig) {
            markDboxRange(rowNumber, startCol, seatsForRow);
        });
    } else if (Array.isArray(baseConfig.dbox)) {
-        baseConfig.dbox.forEach((section) => {
+        baseConfig.dbox.forEach((section: any) => {
            const rowNumber = Number(section.r || 0);
            const width = Number(section.w || 0);
            const startCol = Number(section.c || 0);
@@ -96,7 +100,7 @@ function buildHallLayout(hallName, baseConfig) {
    };
 }

-function getSeatType(layout, rowNumber, colNumber) {
+function getSeatType(layout: any, rowNumber: number, colNumber: number) {
    if (layout.dboxMap.has(`${rowNumber}-${colNumber}`)) {
        return "dbox";
    }
@@ -112,7 +116,7 @@ function getSeatType(layout, rowNumber, colNumber) {
    return "normal";
 }

-function createSeatElement({ seatId, seatType, occupiedSeats }) {
+function createSeatElement({seatId, seatType, occupiedSeats }:any) {
    const seat = document.createElement("button");
    seat.type = "button";
    seat.classList.add("seat", seatType);
@@ -136,7 +140,7 @@ function createSeatElement({ seatId, seatType, occupiedSeats }) {
    return seat;
 }

-function createSeats(hallName, time) {
+function createSeats(hallName: string, time: any) {
    const seatGrid = document.getElementById("seat-grid");
    if (!seatGrid) {
        return;
@@ -144,7 +148,8 @@ function createSeats(hallName, time) {

    seatGrid.innerHTML = "";

-    const baseConfig = seatLayouts[hallName];
+    const arrIndex = hallName as keyof typeof seatLayouts;
+    const baseConfig: any = seatLayouts[arrIndex];
    if (!baseConfig) {
        currentHallLayout = null;
        return;
@@ -235,7 +240,7 @@ function renderBookingLegend() {
 }

 function updateBookingSummary() {
-    const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected"));
+    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");
@@ -245,7 +250,7 @@ function updateBookingSummary() {
    if (summaryItems) {
        summaryItems.innerHTML = selectedSeats
            .map((seat) => {
-                const type = seat.dataset.type || "normal";
+                const type = (seat.dataset.type || "normal") as keyof typeof prices;
                const seatPrice = Number(prices?.[type] ?? prices?.normal ?? 11);
                total += seatPrice;

@@ -272,12 +277,13 @@ function updateBookingSummary() {
    summaryPanel?.classList.toggle("hidden", selectedSeats.length === 0);
 }

-function findMoviePoster(movieTitle) {
+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 title = card.querySelector("h2, h3")?.innerText?.trim().toLowerCase();
+        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) {
@@ -290,7 +296,7 @@ function findMoviePoster(movieTitle) {
 }

 function confirmSelectedSeats() {
-    const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected"));
+    const selectedSeats = Array.from(document.querySelectorAll("#seat-grid .seat.selected")) as HTMLElement[];

    if (!currentBookingContext || selectedSeats.length === 0) {
        alert("Bitte waehle mindestens einen Platz aus.");
@@ -304,7 +310,7 @@ function confirmSelectedSeats() {
        const seatId = seat.dataset.seatId;
        const seatType = seat.dataset.type || "normal";

-        const alreadyInCart = cart.some((item) =>
+        const alreadyInCart = cart.some((item: any) =>
            item.category === "movie" &&
            item.title === currentBookingContext.movie &&
            item.hall === currentBookingContext.hall &&
--- a/src/cart.ts
+++ b/src/cart.ts
@@ -1,8 +1,10 @@
-function formatEuro(value) {
+import { cart } from "./main.js";
+
+function formatEuro(value: number) {
    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
 }

-function escapeHtml(value) {
+function escapeHtml(value: any) {
    return String(value || "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
@@ -11,14 +13,14 @@ function escapeHtml(value) {
        .replaceAll("'", "&#39;");
 }

-function buildCartKey(item) {
+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) {
+function isDrinkItem(item: { category: string; title: any; hall: any; }) {
    if (item.category !== "snack") {
        return false;
    }
@@ -39,7 +41,7 @@ function isDrinkItem(item) {
    return drinkKeywords.some((word) => title.includes(word)) || size.includes("l");
 }

-function buildItemInfo(item) {
+function buildItemInfo(item: { category: any; seatId?: any; hall: any; time?: any; title: any; }) {
    if (item.category === "movie") {
        return `
            <div>Sitzplatz: ${escapeHtml(item.seatId || "-")}</div>
@@ -65,7 +67,7 @@ function buildItemInfo(item) {
 function groupCartItems() {
    const groups = new Map();

-    cart.forEach((item) => {
+    cart.forEach((item: { price?: any; category: string; seatId: any; hall: any; time: any; title: any; }) => {
        const key = buildCartKey(item);

        if (!groups.has(key)) {
@@ -85,12 +87,12 @@ function groupCartItems() {
    return Array.from(groups.values());
 }

-function saveCart() {
+export function saveCart() {
    localStorage.setItem("eagleCart", JSON.stringify(cart));
    updateCartBadge();
 }

-function updateCartBadge() {
+export function updateCartBadge() {
    const cartBadge = document.getElementById("cart-badge");

    if (!cartBadge) {
@@ -101,7 +103,7 @@ function updateCartBadge() {
    cartBadge.classList.toggle("hidden", cart.length === 0);
 }

-function renderCart() {
+export function renderCart() {
    const cartList = document.getElementById("cart-items-list");
    const totalEl = document.getElementById("cart-total-right");
    const vatEl = document.getElementById("cart-vat-right");
@@ -119,7 +121,7 @@ function renderCart() {

    const groupedItems = groupCartItems();

-    const header = `
+    const header = /*html*/`
        <div class="cart-header-row">
            <div class="col-amount">MENGE</div>
            <div class="col-img">VORSCHAU</div>
@@ -133,11 +135,11 @@ function renderCart() {
    const rows = groupedItems
        .map((group) => {
            const imageHtml = group.item.img
-                ? `<img class="cart-img-small" src="${escapeHtml(group.item.img)}" alt="${escapeHtml(group.item.title)}">`
-                : `<div class="cart-img-fallback">Kein Bild</div>`;
+                ? /*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"
-                ? `<div class="qty-static" aria-label="Feste Ticketanzahl">${group.quantity}x</div>`
-                : `
+                ? /*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>
@@ -145,7 +147,7 @@ function renderCart() {
                    </div>
                `;

-            return `
+            return /*html*/`
                <div class="cart-item-row">
                    <div class="col-amount">
                        ${quantityHtml}
@@ -172,22 +174,23 @@ function renderCart() {

    saveCart();
 }
-
-window.removeItem = function removeItem(id) {
-    cart = cart.filter((item) => item.id !== id);
+//@ts-ignore
+window.removeItem = function removeItem(id: any) {
+    var localCart = cart.filter((item: { id: any; }) => item.id !== id);
    saveCart();
    renderCart();
 };

-window.changeQty = function changeQty(title, delta) {
+//@ts-ignore
+window.changeQty = function changeQty(title, delta): void {
    if (delta > 0) {
-        const item = cart.find((entry) => entry.title === title);
+        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) => entry.title)
+            .map((entry: { title: any; }) => entry.title)
            .lastIndexOf(title);
        if (index !== -1) {
            cart.splice(index, 1);
@@ -197,3 +200,4 @@ window.changeQty = function changeQty(title, delta) {
    saveCart();
    renderCart();
 };
+
--- a/src/checkout.ts
+++ b/src/checkout.ts
@@ -1,11 +1,15 @@
-function formatCheckoutEuro(value) {
+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) {
+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");
@@ -27,7 +31,7 @@ function setCheckoutStep(step) {
    line2?.classList.toggle("active", step >= 3);
 }

-function renderCheckout() {
+export function renderCheckout() {
    const summaryList = document.getElementById("checkout-summary-list");
    const totalDisplay = document.getElementById("checkout-total-display");
    const vatDisplay = document.getElementById("checkout-vat-display");
@@ -93,7 +97,7 @@ function generateTicket() {
    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 = `
+    ticketContainer.innerHTML = /*html*/`
        <div class="luxury-ticket">
            <div class="ticket-left">
                <img src="${mainMovie.img}" class="ticket-poster" alt="${mainMovie.title}">
@@ -115,7 +119,7 @@ function generateTicket() {
    `;
 }

-function saveOrderForCurrentUser(orderItems, orderTotal) {
+function saveOrderForCurrentUser(orderItems: any[], orderTotal: any) {
    if (typeof currentUser === "undefined" || !currentUser) {
        return;
    }
@@ -131,6 +135,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
        paymentMethod: selectedPaymentMethod || "-"
    };

+    //@ts-ignore
    const userIndex = users.findIndex((entry) => entry.email === currentUser.email);
    if (userIndex === -1) {
        return;
@@ -144,7 +149,7 @@ function saveOrderForCurrentUser(orderItems, orderTotal) {
    localStorage.setItem("eagleUsers", JSON.stringify(users));
 }

-function reserveSeatsAfterPayment(orderItems) {
+function reserveSeatsAfterPayment(orderItems: any[]) {
    const movieItems = orderItems.filter((item) => item.category === "movie");

    movieItems.forEach((item) => {
@@ -166,7 +171,7 @@ function completeCheckout() {
    saveOrderForCurrentUser(orderItems, orderTotal);
    reserveSeatsAfterPayment(orderItems);

-    cart = [];
+    emptyCart?.()
    saveCart?.();
    renderCart?.();
 }
@@ -180,7 +185,7 @@ function bindCheckoutEvents() {

    const nextButton = document.getElementById("btn-next-step-2");
    const backButton = document.getElementById("btn-back-to-step1");
-    const payNowButton = document.getElementById("btn-pay-now");
+    const payNowButton = document.getElementById("btn-pay-now") as HTMLButtonElement;

    document.querySelectorAll(".payment-method").forEach((method) => {
        method.addEventListener("click", () => {
@@ -189,6 +194,7 @@ function bindCheckoutEvents() {
            });

            method.classList.add("selected");
+            //@ts-ignore
            selectedPaymentMethod = method.dataset.method || "";
            nextButton?.classList.remove("hidden");
        });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jannis Heydemann	7a07dd8c70	Merge branch 'master' into dev_jannis	2026-04-30 12:40:23 +02:00
Jannis Heydemann	d6905da5c5	added .claude to the gitignore	2026-04-30 12:31:58 +02:00
Jannis Heydemann	e72f8a4f1f	Added assets, started actual work on making this a proper multi file webapp. gonna continue tonight	2026-04-30 12:30:54 +02:00
houston[bot]	23d5a75891	"Initial commit from Astro"	2026-04-30 08:39:10 +02:00
Jannis Heydemann	e143d8360a	finished updates	2026-04-30 08:22:46 +02:00
Jannis	c805221208	Merge pull request 'fix/console-errors' (#8 ) from fix/console-errors into dev_jannis Reviewed-on: #8	2026-04-29 13:06:04 +00:00
Jannis Heydemann	40ee49aff5	Closed #1 #2 #3 #4 #5 by converting all files to typescript. cant confirm everything working rn	2026-04-29 15:04:52 +02:00
Jannis Heydemann	c88242b2be	fix: console errors - null crash, 404s und fehlende Bilder - account.ts: null-Guard vor normalizeUser() wenn kein User im LocalStorage - index.html: plain-JS Dateien (cart, booking, checkout, main) von dist/ auf src/ umgestellt - index.html: dolby.png -> Dolby.png und dbox.png -> dbox.jpg (falsche Dateinamen) - style.css: placeholder-Bilder auf vorhandene Dateien umgestellt (shelter.jpg, dbox.jpg, popcorn.jpg) - Projekt-Setup (package.json, tsconfig.json, src/) initial commitet Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-29 12:36:01 +02:00
Jannis Heydemann	425c5d1900	Added html hints to enable syntax highliting	2026-04-29 11:25:04 +02:00
Jannis Heydemann	e2b4852e0d	added password hashing	2026-04-29 10:56:09 +02:00