${escapeHtml(movie.title)}
- ${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${escapeHtml(movie.fsk)} + +${escapeHtml(movie.description)}
@@ -690,6 +736,12 @@ document.addEventListener("DOMContentLoaded", () => { showMovieList(); }); + ui.nowRunningToggle?.addEventListener("click", () => { + const isCollapsed = ui.nowRunningShell?.classList.toggle("is-collapsed"); + ui.nowRunningToggle.setAttribute("aria-expanded", String(!isCollapsed)); + ui.nowRunningToggle.setAttribute("aria-label", isCollapsed ? "Weitere Filme anzeigen" : "Filme einklappen"); + }); + ui.checkoutBtn?.addEventListener("click", showCheckoutStart); ui.backHomeBtn?.addEventListener("click", showHome); }; diff --git a/style.css b/style.css index 7289042..f5af099 100644 --- a/style.css +++ b/style.css @@ -4238,3 +4238,609 @@ body.theme-light .limited-special-card { align-items: flex-start; } } + +/* --- Account payments readability + limited specials polish --- */ +.account-payment-grid { + gap: 14px; +} + +.account-payment-card { + min-height: 168px; + display: flex; + flex-direction: column; + gap: 8px; + background: + linear-gradient(145deg, rgba(0, 113, 227, 0.14), rgba(255, 255, 255, 0.025) 44%), + #171b24; + border: 1px solid rgba(154, 187, 227, 0.2); + border-radius: 12px; + color: #f5f8ff; + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.account-payment-card h4 { + color: #f8fbff; + font-size: 0.98rem; +} + +.account-payment-card p { + color: #b7c4d8; + line-height: 1.45; +} + +.account-payments-note { + color: #b4bfd0; + line-height: 1.5; +} + +.account-payment-card .payment-logo-slot { + height: 66px; + background: #f7f9fd; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 10px; +} + +.account-payment-card .payment-logo-slot img { + max-width: 78%; + max-height: 38px; + filter: drop-shadow(0 5px 10px rgba(20, 28, 40, 0.2)); +} + +.account-payment-card:hover { + background: + linear-gradient(145deg, rgba(0, 113, 227, 0.22), rgba(255, 255, 255, 0.04) 48%), + #1b2230; + border-color: rgba(91, 169, 255, 0.62); +} + +body.theme-light .account-payment-card { + background: #f7faff !important; + border-color: rgba(35, 66, 108, 0.16) !important; + color: #14243d; + box-shadow: 0 12px 26px rgba(31, 62, 104, 0.1); +} + +body.theme-light .account-payment-card:hover { + background: #ffffff !important; + border-color: rgba(0, 113, 227, 0.32) !important; +} + +body.theme-light .account-payment-card h4 { + color: #10213a; +} + +body.theme-light .account-payment-card p { + color: #52647f; +} + +body.theme-light .account-payment-card .payment-logo-slot { + background: #ffffff; + border-color: rgba(28, 56, 94, 0.12); +} + +.limited-specials-hero { + border-radius: 16px; +} + +.limited-specials-hero h2 { + font-size: 3.35rem; + letter-spacing: 0; +} + +.limited-specials-hero p { + font-size: 1rem; +} + +.special-film-heading { + border-radius: 14px; +} + +.special-film-heading img { + width: 86px; + height: 86px; + border-radius: 10px; +} + +.special-film-heading h2 { + font-size: 1.65rem; + letter-spacing: 0; +} + +.limited-special-grid { + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + align-items: stretch; +} + +.limited-special-card { + border-radius: 12px; + box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2); +} + +.limited-special-card .snack-img { + height: 210px; + padding: 12px; +} + +.limited-special-card .snack-img img { + padding: 0; + border-radius: 10px; + object-fit: contain; +} + +.limited-special-card .snack-info { + align-items: flex-start; + text-align: left; + gap: 10px; +} + +.limited-special-card .snack-info h3 { + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.3; +} + +.limited-special-card .snack-card-note { + min-height: 42px; + line-height: 1.5; +} + +.limited-special-card .option-group, +.limited-special-card .size-selector { + justify-content: flex-start; +} + +.limited-special-card .size-chip { + min-width: 132px; + padding: 8px 12px; +} + +.wide-special { + grid-column: span 2; + grid-template-columns: minmax(210px, 38%) 1fr; +} + +.wide-special .snack-img { + min-height: 250px; +} + +body.theme-light .limited-special-card { + box-shadow: 0 16px 34px rgba(31, 62, 104, 0.12); +} + +body.theme-light .limited-special-card .snack-img { + background: #f3f7ff; +} + +@media (max-width: 760px) { + .limited-specials-hero h2 { + font-size: 2.25rem; + } + + .limited-special-card .snack-img { + height: 190px; + } + + .wide-special { + grid-column: span 1; + } +} + +/* --- 2026-05 refinements: limited specials, program rows, home collapse --- */ +.limited-special-card .snack-info { + align-items: center; + text-align: center; +} + +.limited-special-card .badge { + align-self: center; +} + +.limited-special-card .option-group, +.limited-special-card .size-selector { + width: 100%; + justify-content: center; +} + +.limited-special-card.wide-special { + grid-column: span 1; + grid-template-columns: minmax(118px, 42%) minmax(0, 1fr); + min-height: 220px; +} + +.limited-special-card.wide-special .snack-img { + height: 100%; + min-height: 220px; + padding: 0; + background: #0b0f17; +} + +.limited-special-card.wide-special .snack-img img { + width: 100%; + height: 100%; + border-radius: 0; + object-fit: cover; + object-position: center; +} + +.limited-special-card.wide-special .snack-info { + padding: 16px 14px; + gap: 7px; +} + +.limited-special-card.wide-special .badge { + margin-bottom: 2px; + font-size: 0.66rem; +} + +.limited-special-card.wide-special .snack-info h3 { + font-size: 0.98rem; +} + +.limited-special-card.wide-special .snack-card-note { + min-height: 0; + font-size: 0.82rem; + line-height: 1.38; +} + +.limited-special-card.wide-special .size-chip { + min-width: 116px; + padding: 7px 10px; +} + +.now-running-shell { + position: relative; +} + +.now-running-row { + --running-card-height: 404px; +} + +.now-running-shell.is-collapsed .now-running-row { + max-height: calc((var(--running-card-height) * 3) + 96px); + overflow: hidden; +} + +.now-running-fade { + display: none; +} + +.now-running-shell.is-collapsed .now-running-fade { + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 140px; + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 12px; + background: linear-gradient(180deg, rgba(7, 8, 11, 0.08), rgba(7, 8, 11, 0.92) 72%); + backdrop-filter: blur(3px); + pointer-events: none; +} + +.now-running-toggle { + width: 44px; + height: 44px; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 50%; + background: rgba(16, 19, 27, 0.92); + color: #f5f8ff; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34); + pointer-events: auto; +} + +.now-running-toggle span { + display: block; + transform: rotate(90deg); + font-size: 1.35rem; + line-height: 1; +} + +.now-running-shell:not(.is-collapsed) .now-running-fade { + position: static; + display: flex; + justify-content: center; + height: auto; + padding-top: 16px; + background: transparent; + backdrop-filter: none; +} + +.now-running-shell:not(.is-collapsed) .now-running-toggle span { + transform: rotate(-90deg); +} + +.program-halls-summary { + display: grid; + grid-template-columns: 88px minmax(0, 1fr); + gap: 10px; + align-items: center; + margin: -2px 0 14px; +} + +.program-halls-summary strong { + color: #9aa8ba; + font-size: 0.76rem; + text-transform: uppercase; + letter-spacing: 0.9px; +} + +.program-halls-summary div { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.program-halls-summary span { + border: 1px solid rgba(0, 113, 227, 0.36); + border-radius: 999px; + background: rgba(0, 113, 227, 0.12); + color: #c7ddf8; + padding: 4px 9px; + font-size: 0.76rem; + font-weight: 700; +} + +.fsk-logo-field { + position: absolute; + left: 12px; + bottom: 12px; + min-width: 78px; + min-height: 42px; + max-width: 112px; + border: 1px dashed rgba(255, 255, 255, 0.42); + border-radius: 6px; + background: rgba(9, 12, 17, 0.82); + color: #dbe7f7; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + text-align: center; + font-size: 0.66rem; + font-weight: 800; + backdrop-filter: blur(4px); +} + +.fsk-logo-field img { + max-width: 100%; + max-height: 56px; + display: block; + object-fit: contain; +} + +.fsk-logo-field.has-logo:not(.missing-logo) { + border-style: solid; + background: rgba(255, 255, 255, 0.94); +} + +.fsk-logo-field.has-logo:not(.missing-logo) span { + display: none; +} + +.program-time-row:hover { + background: rgba(255, 255, 255, 0.055); + border-color: rgba(255, 255, 255, 0.16); + transform: translateX(0); +} + +body.theme-dark .program-time-row:hover { + background: rgba(255, 255, 255, 0.055); + border-color: rgba(255, 255, 255, 0.16); +} + +body.theme-light .program-halls-summary strong { + color: #52647f; +} + +body.theme-light .program-halls-summary span { + color: #144274; + border-color: rgba(0, 113, 227, 0.28); + background: rgba(0, 113, 227, 0.1); +} + +body.theme-light .fsk-logo-field { + background: rgba(255, 255, 255, 0.94); + border-color: rgba(28, 56, 94, 0.32); + color: #273952; +} + +body.theme-light .now-running-shell.is-collapsed .now-running-fade { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(247, 249, 253, 0.94) 72%); +} + +body.theme-light .now-running-toggle { + background: #ffffff; + color: #173050; + border-color: rgba(28, 56, 94, 0.18); + box-shadow: 0 12px 24px rgba(31, 62, 104, 0.16); +} + +body.theme-light .program-time-row:hover { + border-color: rgba(24, 52, 87, 0.24); + background: #ebf3ff; + transform: translateX(0); +} + +@media (max-width: 760px) { + .limited-special-card.wide-special { + grid-template-columns: 1fr; + } + + .limited-special-card.wide-special .snack-img { + height: 190px; + min-height: 190px; + } + + .now-running-row { + --running-card-height: 402px; + } + + .program-halls-summary { + grid-template-columns: 1fr; + gap: 6px; + } +} + +/* --- 2026-05 follow-up adjustments --- */ +.movie-meta-line { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px; +} + +.fsk-meta-logo { + min-width: 42px; + min-height: 22px; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; +} + +.fsk-meta-logo img { + max-width: 58px; + max-height: 26px; + object-fit: contain; + display: block; +} + +.fsk-meta-logo.has-logo:not(.missing-logo) span { + display: none; +} + +.fsk-meta-logo.missing-logo { + padding: 2px 7px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.22); + background: rgba(255, 255, 255, 0.08); + color: #dbe7f7; + font-size: 0.68rem; + font-weight: 800; +} + +.program-time-row { + grid-template-columns: 1fr 1fr 1fr; +} + +.schedule-header span:nth-child(2), +.schedule-header span:nth-child(3), +.program-time-row .hall-pill, +.program-time-row .time-btn { + justify-self: center; + text-align: center; +} + +.program-time-row .time-btn { + min-width: 64px; +} + +.limited-special-grid { + grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); + gap: 16px; +} + +.limited-special-card { + border-radius: 10px; +} + +.limited-special-card .snack-img { + height: 185px; + padding: 10px; +} + +.limited-special-card .snack-info { + padding: 16px 14px; + gap: 8px; +} + +.limited-special-card .snack-info h3 { + font-size: 1rem; + line-height: 1.25; +} + +.limited-special-card .snack-card-note { + min-height: 34px; + font-size: 0.86rem; + line-height: 1.38; +} + +.limited-special-card .option-group { + width: auto; + padding: 3px; + gap: 4px; +} + +.limited-special-card .option-group .opt-btn { + flex: 0 0 auto; + min-width: 66px; + padding: 5px 12px; +} + +.limited-special-card .size-selector { + width: auto; +} + +.limited-special-card .size-chip { + min-width: 116px; + padding: 7px 11px; +} + +.limited-special-card.wide-special { + min-height: 198px; + grid-template-columns: minmax(122px, 40%) minmax(0, 1fr); +} + +.limited-special-card.wide-special .snack-img { + min-height: 198px; + padding: 8px; +} + +.limited-special-card.wide-special .snack-img img { + border-radius: 8px; + object-fit: contain; + background: #080b10; +} + +.limited-special-card.wide-special .snack-info { + padding: 14px 12px; +} + +body.theme-light .fsk-meta-logo.missing-logo { + background: #f3f7ff; + border-color: rgba(28, 56, 94, 0.24); + color: #223854; +} + +body.theme-light .limited-special-card.wide-special .snack-img img { + background: #f3f7ff; +} + +@media (max-width: 760px) { + .program-time-row { + grid-template-columns: 1fr; + } + + .schedule-header span:nth-child(2), + .schedule-header span:nth-child(3), + .program-time-row .hall-pill, + .program-time-row .time-btn { + justify-self: flex-start; + text-align: left; + } + + .limited-special-card .snack-img { + height: 176px; + } + + .limited-special-card.wide-special .snack-img { + min-height: 176px; + } +}








