Added html hints to enable syntax highliting

.gitignore

@@ -0,0 +1 @@
+img/*

account.js

@@ -152,7 +152,7 @@ function openAccountDashboard() {
         return;
     }
 
-    accountView.innerHTML = `
+    accountView.innerHTML = /*html*/`
         <div class="account-panel">
             <div class="account-panel-header">
                 <h2>Mein Konto</h2>
@@ -300,7 +300,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>

cart.js

@@ -119,7 +119,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 +133,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 +145,7 @@ function renderCart() {
                     </div>
                 `;
 
-            return `
+            return /*html*/`
                 <div class="cart-item-row">
                     <div class="col-amount">
                         ${quantityHtml}

checkout.js

@@ -93,7 +93,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}">

main.js

@@ -538,7 +538,7 @@ document.addEventListener("DOMContentLoaded", () => {
             return;
         }
 
-        ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => `
+        ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => /*html*/`
             <article class="running-poster">
                 <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
                 <div class="running-meta">
@@ -562,7 +562,7 @@ document.addEventListener("DOMContentLoaded", () => {
             return;
         }
 
-        body.innerHTML = day.showings.map((showing) => `
+        body.innerHTML = day.showings.map((showing) => /*html*/`
             <button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}">
                 <span>${escapeHtml(day.long)}</span>
                 <span class="hall-pill">${escapeHtml(showing.hall)}</span>
@@ -577,14 +577,14 @@ document.addEventListener("DOMContentLoaded", () => {
         }
 
         ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => {
-            const dayTabs = movie.schedule.map((day, dayIndex) => `
+            const dayTabs = movie.schedule.map((day, dayIndex) => /*html*/`
                 <button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}">
                     <span>${escapeHtml(day.short)}</span>
                     <small>${escapeHtml(formatDateShort(day.date))}</small>
                 </button>
             `).join("");
 
-            return `
+            return /*html*/`
                 <article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
                     <div class="card-left">
                         <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">