From f44be56a8edbc8f152712d20de9eaf0ccbd3fb20 Mon Sep 17 00:00:00 2001
From: the-eagle16 <haberaecker8@gmail.com>
Date: Mon, 22 Jun 2026 13:29:39 +0200
Subject: [PATCH] =?UTF-8?q?Anpassung=20Design=20->=20Registration=20/=20An?=
 =?UTF-8?q?meldung=20;=20Extra=20Fenster=20f=C3=BCr=20jeden=20Film?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 img/youtube-logo.png |   3 +
 style.css            | 721 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 724 insertions(+)
 create mode 100644 img/youtube-logo.png

diff --git a/img/youtube-logo.png b/img/youtube-logo.png
new file mode 100644
index 0000000..9ba1695
--- /dev/null
+++ b/img/youtube-logo.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:177c369acda81dc48fec0a9c9a07a584608c3775aa16307bf65f769d4b9c8140
+size 15526
diff --git a/style.css b/style.css
index f5af099..01715e1 100644
--- a/style.css
+++ b/style.css
@@ -4844,3 +4844,724 @@ body.theme-light .limited-special-card.wide-special .snack-img img {
         min-height: 176px;
     }
 }
+
+/* --- Account registration form refresh --- */
+.auth-field {
+    display: block;
+    width: 100%;
+    margin-bottom: 12px;
+}
+
+.auth-field input,
+.auth-field select {
+    width: 100%;
+    margin-bottom: 0;
+}
+
+.auth-field .field-error {
+    min-height: 16px;
+    display: block;
+    margin-top: 5px;
+    color: #ff6d7d;
+    font-size: 0.76rem;
+    line-height: 1.25;
+}
+
+.auth-field.is-invalid input,
+.auth-field.is-invalid select,
+.auth-field.is-invalid .gender-selector {
+    border-color: rgba(255, 84, 105, 0.88) !important;
+    box-shadow: 0 0 0 3px rgba(255, 84, 105, 0.12);
+}
+
+#login-error {
+    margin: 0 0 8px;
+    padding: 9px 11px;
+    border: 1px solid rgba(255, 84, 105, 0.35);
+    border-radius: 10px;
+    background: rgba(255, 84, 105, 0.1);
+    color: #ff8795;
+    font-size: 0.82rem;
+}
+
+.register-auth-modal {
+    width: min(1180px, 94vw);
+    max-width: 1180px;
+    max-height: 88vh;
+    overflow-y: auto;
+    padding: 28px 30px 24px;
+}
+
+.register-form-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 22px;
+    margin-top: 16px;
+}
+
+.register-form-section {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.035);
+    border-radius: 14px;
+    padding: 16px;
+}
+
+.register-form-section h3 {
+    margin-bottom: 14px;
+    font-size: 1rem;
+    color: #f7faff;
+}
+
+.register-form-section input,
+.register-form-section select {
+    min-height: 48px;
+    border-width: 0 0 1px;
+    border-radius: 0;
+    background: transparent;
+    padding: 10px 2px;
+    color: #f5f7fb;
+}
+
+.register-form-section select {
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, #9aa7ba 50%), linear-gradient(135deg, #9aa7ba 50%, transparent 50%);
+    background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
+    background-size: 6px 6px, 6px 6px;
+    background-repeat: no-repeat;
+}
+
+.register-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 18px;
+}
+
+.street-row {
+    grid-template-columns: minmax(0, 1fr) 110px;
+}
+
+.gender-selector {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 12px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.gender-selector button {
+    min-height: 52px;
+    border: 0;
+    border-right: 1px solid rgba(255, 255, 255, 0.16);
+    background: transparent;
+    color: #f8fbff;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.gender-selector button:last-child {
+    border-right: 0;
+}
+
+.gender-selector button.active {
+    background: rgba(0, 113, 227, 0.28);
+    color: #ffffff;
+}
+
+.register-warning {
+    color: #8f98a7;
+    font-size: 0.84rem;
+    line-height: 1.45;
+    margin-top: 10px;
+}
+
+.account-personal-card h3 {
+    margin-bottom: 12px;
+}
+
+.account-personal-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+}
+
+.account-personal-grid p {
+    margin: 0;
+    padding: 11px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.035);
+}
+
+.account-personal-grid span {
+    display: block;
+    margin-bottom: 4px;
+    color: #91a0b4;
+    font-size: 0.72rem;
+}
+
+.account-personal-grid strong {
+    color: #f6f9ff;
+    font-size: 0.92rem;
+}
+
+body.theme-light .auth-field.is-invalid input,
+body.theme-light .auth-field.is-invalid select,
+body.theme-light .auth-field.is-invalid .gender-selector {
+    border-color: rgba(216, 42, 66, 0.82) !important;
+    box-shadow: 0 0 0 3px rgba(216, 42, 66, 0.1);
+}
+
+body.theme-light .register-form-section {
+    background: #f7faff;
+    border-color: rgba(28, 56, 94, 0.14);
+}
+
+body.theme-light .register-form-section h3 {
+    color: #10213a;
+}
+
+body.theme-light .register-form-section input,
+body.theme-light .register-form-section select {
+    background: transparent !important;
+    color: #10213a !important;
+    border-color: rgba(33, 55, 91, 0.22) !important;
+}
+
+body.theme-light .gender-selector {
+    background: #eef4ff;
+    border-color: rgba(28, 56, 94, 0.16);
+}
+
+body.theme-light .gender-selector button {
+    color: #1b2f4d;
+    border-color: rgba(28, 56, 94, 0.16);
+}
+
+body.theme-light .gender-selector button.active {
+    background: #dcecff;
+    color: #0057ae;
+}
+
+body.theme-light .register-warning {
+    color: #5a6c86;
+}
+
+body.theme-light .account-personal-grid p {
+    background: #f7faff;
+    border-color: rgba(28, 56, 94, 0.12);
+}
+
+body.theme-light .account-personal-grid span {
+    color: #52647f;
+}
+
+body.theme-light .account-personal-grid strong {
+    color: #10213a;
+}
+
+body.theme-light .auth-field.is-invalid input,
+body.theme-light .auth-field.is-invalid select,
+body.theme-light .auth-field.is-invalid .gender-selector,
+body.theme-light .register-form-section .auth-field.is-invalid input,
+body.theme-light .register-form-section .auth-field.is-invalid select {
+    border-color: rgba(216, 42, 66, 0.82) !important;
+    box-shadow: 0 0 0 3px rgba(216, 42, 66, 0.1);
+}
+
+@media (max-width: 860px) {
+    .register-form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .register-auth-modal {
+        padding: 24px 18px 20px;
+    }
+}
+
+@media (max-width: 560px) {
+    .register-row,
+    .street-row {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+}
+
+/* --- Account edit and movie detail overlay --- */
+.account-header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.account-edit-btn {
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.06);
+    color: #ffffff;
+    cursor: pointer;
+    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.account-edit-btn:hover {
+    transform: translateY(-1px);
+    border-color: rgba(0, 113, 227, 0.75);
+    background: rgba(0, 113, 227, 0.2);
+}
+
+.account-edit-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.account-card-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.account-card-title-row h3 {
+    margin: 0;
+}
+
+.account-card-title-row span {
+    color: #8fa0b6;
+    font-size: 0.82rem;
+}
+
+.account-edit-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 12px 16px;
+}
+
+.account-edit-form .auth-field {
+    margin-bottom: 0;
+}
+
+.account-edit-form .auth-field > span:first-child,
+.account-email-locked > span:first-child {
+    display: block;
+    margin-bottom: 6px;
+    color: #91a0b4;
+    font-size: 0.78rem;
+    font-weight: 700;
+}
+
+.account-edit-form input,
+.account-edit-form select {
+    min-height: 46px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.04);
+    color: #f6f9ff;
+    padding: 10px 12px;
+}
+
+.account-email-locked input:disabled {
+    opacity: 0.72;
+    cursor: not-allowed;
+}
+
+.account-email-locked small {
+    display: block;
+    margin-top: 6px;
+    color: #7e8da1;
+    font-size: 0.74rem;
+}
+
+.account-edit-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 18px;
+}
+
+.account-save-btn,
+.account-secondary-btn {
+    border: 0;
+    border-radius: 999px;
+    padding: 10px 16px;
+    font-weight: 800;
+    cursor: pointer;
+}
+
+.account-save-btn {
+    background: #0071e3;
+    color: #ffffff;
+}
+
+.account-secondary-btn {
+    background: rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+}
+
+.program-card,
+.running-poster {
+    cursor: pointer;
+}
+
+.program-card:focus-within,
+.running-poster:focus-visible {
+    outline: 2px solid rgba(0, 113, 227, 0.8);
+    outline-offset: 4px;
+}
+
+.movie-detail-overlay {
+    position: fixed;
+    z-index: 10000;
+    overflow: hidden;
+    background: #05070a;
+    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
+    transition: left 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
+        top 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
+        width 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
+        height 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
+        border-radius 0.46s cubic-bezier(0.2, 0.82, 0.2, 1),
+        opacity 0.28s ease;
+}
+
+.movie-detail-overlay.hidden {
+    display: none;
+}
+
+.movie-detail-overlay.is-closing {
+    opacity: 0.2;
+}
+
+.movie-detail-stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    opacity: 0;
+    transform: scale(0.985);
+    transition: opacity 0.25s ease 0.12s, transform 0.32s ease 0.1s;
+}
+
+.movie-detail-overlay.is-open .movie-detail-stage {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.movie-detail-backdrop {
+    position: absolute;
+    inset: 0 0 auto;
+    height: min(620px, 76vh);
+    background-size: cover;
+    background-position: center;
+    filter: saturate(1.05);
+}
+
+.movie-detail-content {
+    position: relative;
+    width: min(1180px, calc(100% - 32px));
+    margin: 0 auto;
+    padding: 112px 0 70px;
+}
+
+.movie-detail-close {
+    position: fixed;
+    top: 22px;
+    right: 24px;
+    z-index: 2;
+    width: 42px;
+    height: 42px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 50%;
+    background: rgba(12, 14, 18, 0.76);
+    color: #ffffff;
+    font-size: 1.6rem;
+    line-height: 1;
+    cursor: pointer;
+    backdrop-filter: blur(18px);
+}
+
+.movie-detail-hero-block {
+    min-height: 520px;
+    display: grid;
+    grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
+    align-items: end;
+    gap: clamp(24px, 5vw, 58px);
+}
+
+.movie-detail-poster img {
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
+}
+
+.movie-detail-copy {
+    padding-bottom: 22px;
+}
+
+.movie-detail-kicker {
+    margin-bottom: 8px;
+    color: #9bc8ff;
+    font-size: 0.78rem;
+    font-weight: 800;
+    text-transform: uppercase;
+}
+
+.movie-detail-copy h2 {
+    max-width: 820px;
+    margin: 0 0 14px;
+    font-size: clamp(2.1rem, 5vw, 5.2rem);
+    line-height: 0.96;
+}
+
+.movie-detail-meta {
+    gap: 10px;
+    margin-bottom: 18px;
+    color: #dce7f6;
+    font-weight: 800;
+}
+
+.movie-detail-copy > p:last-child {
+    max-width: 760px;
+    color: #d5dbe5;
+    font-size: 1rem;
+    line-height: 1.65;
+}
+
+.movie-detail-section {
+    margin-top: 28px;
+    padding-top: 28px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.movie-detail-section-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.movie-detail-section-head h3 {
+    margin: 0;
+    font-size: 1.35rem;
+}
+
+.movie-detail-section-head span {
+    color: #8d98a8;
+    font-size: 0.82rem;
+    font-weight: 800;
+    text-transform: uppercase;
+}
+
+.movie-detail-youtube-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.movie-detail-youtube-logo img {
+    width: 34px;
+    max-height: 18px;
+    object-fit: contain;
+    display: block;
+}
+
+.movie-trailer-frame {
+    aspect-ratio: 16 / 9;
+    width: min(920px, 100%);
+    background: #0b0d11;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.movie-trailer-preview {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: grid;
+    place-items: center;
+    align-content: center;
+    gap: 14px;
+    background-size: cover;
+    background-position: center;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+.movie-trailer-preview strong {
+    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
+}
+
+.movie-trailer-preview.is-missing {
+    filter: grayscale(0.4);
+}
+
+.movie-trailer-play {
+    width: 74px;
+    height: 74px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.92);
+    position: relative;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.movie-trailer-play::after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 23px;
+    border-top: 14px solid transparent;
+    border-bottom: 14px solid transparent;
+    border-left: 20px solid #0a0d12;
+}
+
+.movie-trailer-frame iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+}
+
+.movie-actor-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.movie-actor-list span {
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.06);
+    color: #eef4ff;
+    font-weight: 700;
+}
+
+.movie-actor-list p {
+    margin: 0;
+    color: #8f9caf;
+}
+
+.movie-detail-schedule {
+    padding-bottom: 20px;
+}
+
+.movie-detail-time-row:hover {
+    transform: none;
+}
+
+body.theme-light .account-edit-btn,
+body.theme-light .account-secondary-btn {
+    background: #eef4ff;
+    border-color: rgba(28, 56, 94, 0.16);
+    color: #10213a;
+}
+
+body.theme-light .account-card-title-row span,
+body.theme-light .account-edit-form .auth-field > span:first-child,
+body.theme-light .account-email-locked > span:first-child,
+body.theme-light .account-email-locked small {
+    color: #52647f;
+}
+
+body.theme-light .account-edit-form input,
+body.theme-light .account-edit-form select {
+    background: #ffffff;
+    border-color: rgba(28, 56, 94, 0.16);
+    color: #10213a;
+}
+
+body.theme-light .movie-detail-overlay {
+    background: #f4f7fb;
+}
+
+body.theme-light .movie-detail-backdrop {
+    filter: saturate(1.05) brightness(1.08);
+}
+
+body.theme-light .movie-detail-copy > p:last-child,
+body.theme-light .movie-detail-meta,
+body.theme-light .movie-actor-list span {
+    color: #10213a;
+}
+
+body.theme-light .movie-detail-copy h2,
+body.theme-light .movie-detail-copy > p:last-child,
+body.theme-light .movie-detail-meta {
+    color: #ffffff;
+}
+
+body.theme-light .movie-detail-section {
+    border-color: rgba(28, 56, 94, 0.14);
+}
+
+body.theme-light .movie-actor-list span {
+    background: #ffffff;
+    border-color: rgba(28, 56, 94, 0.14);
+}
+
+@media (max-width: 760px) {
+    .account-panel-header,
+    .account-card-title-row {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .account-edit-actions {
+        justify-content: stretch;
+    }
+
+    .account-save-btn,
+    .account-secondary-btn {
+        flex: 1;
+    }
+
+    .movie-detail-content {
+        width: min(100% - 24px, 560px);
+        padding-top: 78px;
+    }
+
+    .movie-detail-hero-block {
+        min-height: auto;
+        grid-template-columns: 1fr;
+        gap: 18px;
+    }
+
+    .movie-detail-poster {
+        width: min(210px, 62vw);
+    }
+
+    .movie-detail-copy {
+        padding-bottom: 0;
+    }
+
+    .movie-detail-copy h2 {
+        font-size: clamp(2rem, 12vw, 3.8rem);
+    }
+
+    .movie-detail-section-head {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .movie-detail-trailer-head {
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .movie-trailer-frame {
+        width: 100%;
+    }
+}