diff --git a/index.html b/index.html
deleted file mode 100644
index 537bc3c..0000000
--- a/index.html
+++ /dev/null
@@ -1,959 +0,0 @@
-﻿<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EAGLE's IMAX | Deluxe Experience</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body> <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>
-
-        <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>
-
-    <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>
-
-    <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 taeglich ab 13:00 Uhr.</p>
-            <div id="movie-program-list" class="movie-program-list"></div>
-        </div>
-    </section>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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"></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"></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"> </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">
-                            <h3>Käse-Dip<br>(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>
-                    <br>
-                    <br>
-                </div>
-            </div>
-        </div>
-            <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 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>
-                    <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>
-                    <p>Coming Soon...</p>
-                    <span>Wir bereiten etwas ganz Besonderes für dich vor! Coming this summer!</span>
-                </div>
-            </div>
-
-        </div>
-    </section>
-
-<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>
-
-<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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-
