/* ----------------------------------------------------------
   Lokale Schriften (DSGVO-konform, kein Google Fonts)
   ---------------------------------------------------------- */
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-v31-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ============================================================
   VÖRDER FILMTHEATER — Hauptstylesheet
   Mobile-First | v3
   ============================================================ */

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- DESIGN-TOKENS --- */
:root {
    --terracotta:        #C9A84C;
    --curtain-red:       #7A1A1A;
    --dark-bg:           #080709;
    --card-bg:           rgba(255, 255, 255, 0.04);
    --text-main:         #F5EDD8;
    --text-muted:        #a8a49e;
    --frame-color:       rgba(192, 113, 79, 0.45);
    --header-height:     110px;
    --footer-height:     36px;
    --radius-sm:         5px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
}

html::before {
    content: '';
    position: fixed; inset: 0;
    background-image: none; /* Standard: aus */
    pointer-events: none; z-index: 9998; opacity: 0.15;
}
/* Grain nur wenn keine Bewegungseinschränkung und Desktop */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    html::before {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    }
}

html, body { width: 100vw; height: 100vh; overflow: hidden; background-color: var(--dark-bg); }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(ellipse 38% 38% at 15% 20%,  rgba(192,113,79,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 45% 35% at 85% 15%,  rgba(139,26,26,0.12)  0%, transparent 70%),
        radial-gradient(ellipse 30% 40% at 72% 75%,  rgba(192,113,79,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 30% 85%,  rgba(139,26,26,0.09)  0%, transparent 70%),
        radial-gradient(ellipse 35% 35% at 55% 40%,  rgba(212,169,106,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 28% 28% at 90% 55%,  rgba(192,113,79,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 25% at 5%  60%,  rgba(139,26,26,0.07)  0%, transparent 70%),
        radial-gradient(ellipse 25% 35% at 45% 10%,  rgba(212,169,106,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(139,26,26,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #080709 0%, #0a080a 100%);
}
@media (min-width: 769px) { body { background-attachment: fixed; } }

/* ============================================================
   SEITENRAHMEN
   ============================================================ */
.main-frame {
    position: fixed;
    top: var(--header-height); bottom: var(--footer-height);
    left: 50%; width: min(1200px, 100vw); transform: translateX(-50%);
    border-left: 1px solid var(--frame-color);
    border-right: 1px solid var(--frame-color);
    z-index: 900; pointer-events: none;
}
.main-frame::before, .main-frame::after {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    border-color: var(--terracotta); border-style: solid; opacity: 0.7;
}
.main-frame::before { top: 0; left: -1px;  border-width: 1px 0 0 1px; }
.main-frame::after  { top: 0; right: -1px; border-width: 1px 1px 0 0; }
@media (max-width: 1250px) { .main-frame { display: none; } }

/* ============================================================
   WERBE-SIDEBAR
   ============================================================ */
.ad-card-wrapper {
    position: fixed;
    top: calc(var(--header-height) + (100vh - var(--header-height) - var(--footer-height)) / 2);
    transform: translateY(-50%);
    width: 160px; z-index: 800; display: flex; flex-direction: column; gap: 15px;
}
.ad-card-left  { left: calc(25% - 300px); transform: translateX(-50%) translateY(-50%); }
.ad-card-right { left: calc(75% + 300px); transform: translateX(-50%) translateY(-50%); }
.ad-card-wrapper .movie-poster { height: 10vh; }
.ad-card-wrapper .movie-title  { font-size: 0.7rem; min-height: auto; }
.ad-card-wrapper .movie-meta   { font-size: 0.45rem; }
@media (max-width: 1599px) { .ad-card-wrapper { display: none; } }

@media (min-width: 768px) and (max-width: 1599px) {
    .ad-card-wrapper {
        display: flex; position: static; transform: none;
        flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
        width: 100%; max-width: 860px; margin: 0 auto 6px;
        gap: 10px; padding: 4px 12px; justify-content: center;
        scrollbar-width: thin; scrollbar-color: rgba(192,113,79,0.3) transparent;
    }
    .ad-card-left, .ad-card-right { left: auto; top: auto; transform: none; position: static; }
    .ad-card-wrapper .movie-card   { width: 90px; flex-shrink: 0; }
    .ad-card-wrapper .movie-poster { height: 7vh; }
}
@media (max-width: 767px) {
    .ad-card-wrapper {
        display: flex; position: static; transform: none;
        flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
        width: 100%; gap: 8px; padding: 4px 12px; justify-content: flex-start;
        scrollbar-width: none;
    }
    .ad-card-wrapper::-webkit-scrollbar { display: none; }
    .ad-card-left, .ad-card-right { left: auto; top: auto; transform: none; position: static; }
    .ad-card-wrapper .movie-card   { width: 72px; flex-shrink: 0; }
    .ad-card-wrapper .movie-poster { height: 60px; }
    .ad-card-wrapper .movie-title  { font-size: 0.55rem; }
}

.sponsoren-label {
    position: fixed;
    top: calc(var(--header-height) + 20px + 1vh);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 1rem;
    color: var(--terracotta); opacity: 0.75;
    pointer-events: none; z-index: 801; white-space: nowrap; letter-spacing: 1px;
}
.sponsoren-label-left  { left: calc(25% - 300px); transform: translateX(-50%); }
.sponsoren-label-right { left: calc(75% + 300px); transform: translateX(-50%); }
@media (max-width: 1599px) { .sponsoren-label { display: none; } }
@media (min-width: 768px) and (max-width: 1599px) {
    .sponsoren-label { display: block; position: static; transform: none; text-align: center; margin: 2px 0 0; font-size: 0.75rem; }
    .sponsoren-label-right { display: none; }
}
@media (max-width: 767px) {
    .sponsoren-label { display: block; position: static; transform: none; text-align: center; margin: 2px 0 0; font-size: 0.65rem; }
    .sponsoren-label-right { display: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
header {
    position: fixed; top: 0; left: 0; width: 100vw; height: var(--header-height);
    z-index: 1000; background: var(--dark-bg);
    padding: 8px 4%; border-bottom: none;
    box-shadow: 0 4px 30px rgba(0,0,0,0.7);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* A: Spotlight-Effekt hinter dem Logo */
    background-image:
        radial-gradient(ellipse 55% 80% at 50% 60%, rgba(201,168,76,0.13) 0%, transparent 70%),
        radial-gradient(ellipse 30% 50% at 50% 80%, rgba(201,168,76,0.07) 0%, transparent 60%);
}
/* C: Goldene Glow-Trennlinie */
header::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,0.25) 15%,
        rgba(201,168,76,0.75) 40%,
        #C9A84C 50%,
        rgba(201,168,76,0.75) 60%,
        rgba(201,168,76,0.25) 85%,
        transparent 100%);
    box-shadow: 0 0 12px 2px rgba(201,168,76,0.4), 0 0 30px 4px rgba(201,168,76,0.15);
}
.main-logo {
    height: clamp(26px, 4vh, 46px); width: auto; opacity: 0.65; cursor: pointer;
    display: block; margin-bottom: 8px; transition: all 0.4s ease; filter: saturate(0.8);
}
@media (hover: hover) {
    .main-logo:hover { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 12px rgba(192,113,79,0.6)) saturate(1.2); }
}
.voorder-logo {
    display: block; width: clamp(170px, 55vw, 420px);
    max-height: clamp(50px, 8vh, 90px); object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(192,113,79,0.2));
    animation: shimmer 6s ease-in-out infinite;
}
@media (min-width: 768px)  { :root { --header-height: 150px; } .voorder-logo { width: clamp(280px, 45vw, 550px); max-height: 100px; } .main-logo { margin-bottom: 12px; } }
@media (min-width: 1200px) { :root { --header-height: 180px; } }

/* ============================================================
   MAIN
   ============================================================ */
main {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: calc(var(--footer-height) + 12px);
    overflow-y: auto; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    z-index: 10; -webkit-overflow-scrolling: touch;
}
main::-webkit-scrollbar           { width: 3px; }
main::-webkit-scrollbar-track     { background: transparent; }
main::-webkit-scrollbar-thumb     { background: rgba(192,113,79,0.3); border-radius: 2px; }

.main-date {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 6vw, 3.2rem);
    color: var(--terracotta); margin-top: 10px; margin-bottom: 14px;
    letter-spacing: clamp(2px, 1.5vw, 5px); font-weight: 600;
}
.main-date::before, .main-date::after { content: '—'; margin: 0 8px; opacity: 0.5; font-size: 0.6em; vertical-align: middle; }

.movie-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 2.5vw, 20px); width: 92%; max-width: 680px;
}
.main-nav-buttons {
    display: flex; flex-direction: column; align-items: center;
    width: 92%; max-width: 360px; gap: 10px; margin-top: 14px; padding-bottom: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 12px 20px;
    background: var(--terracotta); color: #000;
    text-decoration: none; text-transform: uppercase;
    letter-spacing: 2px; font-size: clamp(0.65rem, 2.5vw, 0.8rem);
    font-weight: 600; font-family: inherit;
    width: 100%; max-width: 320px; text-align: center;
    border: none; cursor: pointer; border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(192,113,79,0.25);
    position: relative; overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-action::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    pointer-events: none;
}
@media (hover: hover) {
    .btn-action:hover { background: var(--curtain-red); color: white; letter-spacing: 3px; box-shadow: 0 4px 20px rgba(139,26,26,0.45); transform: translateY(-1px); }
}
.btn-archive { margin-top: 32px; width: auto; min-width: 160px; font-size: 0.6rem; padding: 10px 20px; letter-spacing: 2px; }
.btn-trailer { background: transparent; border: 1px solid var(--terracotta); color: var(--terracotta); display: none; box-shadow: none; }
@media (hover: hover) { .btn-trailer:hover { background: rgba(192,113,79,0.12); color: var(--text-main); } }
.btn-whatsapp { background: transparent; border: 1px solid rgba(192,113,79,0.35); color: var(--text-muted); font-size: 0.6rem; width: auto; min-width: 180px; box-shadow: none; }
@media (hover: hover) { .btn-whatsapp:hover { background: rgba(192,113,79,0.08); border-color: rgba(192,113,79,0.6); color: var(--text-main); box-shadow: none; transform: none; } }

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay-wrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(8,7,9,0.97); z-index: 500; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-out);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: var(--header-height);
    padding-bottom: calc(var(--footer-height) + 20px);
}
.overlay-wrapper.active { transform: translateY(0); }
.overlay-wrapper::-webkit-scrollbar       { width: 3px; }
.overlay-wrapper::-webkit-scrollbar-thumb { background: rgba(192,113,79,0.3); border-radius: 2px; }

#extended-wrapper { overflow-y: hidden; }
@media (max-width: 900px) { #extended-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; } }

#extended-wrapper .scroll-container { gap: 1vh 8px; padding: 4px 8px 8px; }
#extended-wrapper .movie-pair       { padding: 10px; gap: 8px; }
#extended-wrapper .pair-date        { font-size: 0.95rem; margin-bottom: 4px; padding-bottom: 4px; }
#extended-wrapper .movie-poster     { height: 14vh; }
#extended-wrapper .movie-content    { padding: 6px; }
#extended-wrapper .movie-title      { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: auto; }
#extended-wrapper .movie-meta       { font-size: 0.48rem; margin-bottom: 2px; }

.overlay-back {
    position: sticky; top: 0; align-self: center;
    width: calc(100% - 24px); max-width: 300px; margin: 10px auto 8px;
    text-align: center; background: rgba(8,7,9,0.92); backdrop-filter: blur(6px);
    border: 1px solid rgba(192,113,79,0.4);
    color: var(--text-muted); font-size: 0.7rem; font-family: inherit;
    text-transform: uppercase; letter-spacing: 1.5px;
    padding: 12px 16px; border-radius: var(--radius-sm);
    min-height: 44px; cursor: pointer; z-index: 600;
    transition: color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .overlay-back:hover { color: var(--terracotta); border-color: var(--terracotta); background: rgba(20,15,18,0.95); } }

.scroll-container {
    width: 100%; max-width: 1100px; padding: 8px 12px 16px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(8px, 2vh, 16px) clamp(6px, 1.5vw, 14px);
}
.archive-headline { margin-bottom: 12px; }

/* ============================================================
   FILM-KARTEN
   ============================================================ */
.movie-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: calc(33.333% - 1vw);
    background: rgba(255,255,255,0.02); padding: 10px;
    border-radius: var(--radius-lg); border: 1px solid rgba(192,113,79,0.18);
    transition: border-color 0.3s ease;
}
@media (hover: hover) { .movie-pair:hover { border-color: rgba(192,113,79,0.4); } }

.pair-date {
    grid-column: 1 / -1; text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem; color: var(--terracotta);
    margin-bottom: 6px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(192,113,79,0.25); letter-spacing: 2px;
}

.movie-card {
    background: var(--card-bg); border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.3s ease, transform 0.3s ease;
    cursor: pointer; border-radius: var(--radius-md);
    overflow: hidden; display: flex; flex-direction: column;
    animation: fadeInUp 0.4s ease both;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 769px) { .movie-card { backdrop-filter: blur(8px); } }
@media (hover: hover) {
    .movie-card:hover { border-color: rgba(192,113,79,0.6); transform: translateY(-4px); background: rgba(255,255,255,0.07); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
    .movie-card:hover .movie-poster { transform: scale(1.03); }
}

.movie-poster-container { padding: 6px; flex-grow: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.movie-poster { width: 100%; height: clamp(90px, 18vw, 20vh); object-fit: contain; transition: transform 0.4s ease; }
.movie-pair .movie-poster { height: clamp(60px, 10vw, 12vh); }
.archive-card { width: calc(25% - 1.5vw); min-width: 130px; }

.movie-content { padding: 8px 6px; text-align: center; background: rgba(0,0,0,0.55); border-top: 1px solid rgba(255,255,255,0.04); }
.movie-title   { font-family: 'Cormorant Garamond', serif; font-size: clamp(0.72rem, 2.5vw, 0.95rem); color: var(--terracotta); min-height: 1.2em; line-height: 1.3; }
.movie-meta    { font-size: clamp(0.42rem, 1.4vw, 0.55rem); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }

/* ============================================================
   MODALS
   ============================================================ */
.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.88); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 14px;
}
.modal.active { display: flex; }
.modal-content {
    width: 100%; max-width: 500px;
    background: linear-gradient(145deg, #0e0c0f, #0a080c);
    padding: 44px 18px 22px;
    border: 1px solid rgba(192,113,79,0.5); border-radius: var(--radius-lg);
    text-align: center; position: relative;
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: modalIn 0.28s var(--ease-out) both;
}
@media (min-width: 480px) { .modal-content { padding: 44px 30px 30px; } }
.modal-content::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 10%, var(--terracotta) 50%, transparent 90%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-content-wide  { max-width: 780px; }
.modal-content-video { padding: 10px; background: #000; border: 1px solid var(--terracotta); }
.modal-content-video video { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

.modal-headline    { font-family: 'Cormorant Garamond', serif; color: var(--terracotta); font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 10px; letter-spacing: 1px; }
.modal-meta-label  { color: var(--text-muted); text-transform: uppercase; font-size: 0.65rem; margin-bottom: 5px; letter-spacing: 1px; }
.modal-text        { color: var(--text-main); line-height: 1.75; font-size: clamp(0.82rem, 3vw, 0.95rem); text-align: left; white-space: pre-wrap; }
.modal-text a      { color: var(--terracotta); text-decoration: none; }
@media (hover: hover) { .modal-text a:hover { text-decoration: underline; } }
.modal-text-small    { font-size: 0.82rem; }
.modal-text-centered { text-align: center; font-size: 1rem; padding: 14px 0; }
.modal-actions       { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 16px; }
.ksb-link { display: block; margin-bottom: 14px; text-align: center; }
.ksb-logo { height: clamp(60px, 12vw, 120px); }

.modal-close {
    position: absolute; top: 6px; right: 6px;
    background: transparent; border: none; color: var(--text-muted);
    font-size: 22px; cursor: pointer; z-index: 10000; line-height: 1;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .modal-close:hover { color: var(--terracotta); background: rgba(192,113,79,0.12); transform: rotate(90deg); } }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    position: fixed; bottom: 0; left: 0; width: 100vw; height: var(--footer-height);
    border-top: 1px solid var(--frame-color);
    background: rgba(8,7,9,0.97); z-index: 1000;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
footer::before {
    content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,113,79,0.6), transparent);
}
.f-link {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.6rem;
    padding: 10px 12px; font-family: inherit;
    min-height: 36px; display: flex; align-items: center;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .f-link:hover { color: var(--terracotta); } }
.f-sep { color: var(--frame-color); font-size: 0.7rem; user-select: none; }

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer  { 0%, 100% { opacity: 0.65; } 50% { opacity: 0.80; } }
@keyframes modalIn  { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================
   RESPONSIVE — TABLET (768–1100px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1100px) {
    .movie-pair   { width: calc(50% - 8px); }
    .archive-card { width: calc(33.333% - 1.5vw); }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    .movie-grid { grid-template-columns: repeat(2, 1fr); width: 94%; max-width: 100%; gap: 10px; }
    .movie-pair { grid-template-columns: 1fr 1fr; width: 100%; }
    #extended-wrapper .scroll-container { flex-direction: column; align-items: stretch; padding: 4px 10px 16px; gap: 10px; }
    #extended-wrapper .movie-pair       { width: 100%; }
    .archive-card   { width: calc(50% - 8px); min-width: 120px; }
    .main-nav-buttons { width: 94%; max-width: 100%; gap: 8px; }
    .btn-action     { max-width: 100%; font-size: 0.7rem; letter-spacing: 1.5px; }
}

/* ============================================================
   RESPONSIVE — KLEIN (< 480px)
   ============================================================ */
@media (max-width: 480px) {
    .movie-grid   { gap: 8px; }
    .archive-card { width: 100%; }
    .modal-content { padding: 44px 12px 18px; }
    .main-date    { margin-bottom: 10px; }
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
#countdown {
    text-align: center; margin: 6px auto 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.72rem, 3vw, 0.85rem);
    font-weight: 500; letter-spacing: 0.1em;
    color: #b03a2e; opacity: 0.9;
}
#countdown.hidden { display: none; }

/* ============================================================
   LOSTOPF-BUTTON + FUNKEN
   ============================================================ */
.btn-lostopf {
    font-size: clamp(0.58rem, 2.2vw, 0.72rem);
    padding: 9px 18px;
    min-height: 38px;
    max-width: 220px;
    background: transparent;
    border: 1px solid rgba(212,169,106,0.6);
    color: #D4AF37;
    box-shadow: 0 0 10px rgba(212,169,106,0.15);
    letter-spacing: 2px;
    position: relative;
    overflow: visible;
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
    .btn-lostopf:hover {
        background: rgba(212,169,106,0.1);
        box-shadow: 0 0 18px rgba(212,169,106,0.35);
        color: #f0d060;
        transform: none;
        letter-spacing: 2px;
    }
}

/* Funken-Partikel */
.lostopf-spark {
    position: fixed;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    animation: sparkFly var(--dur, 0.6s) ease-out forwards;
}
@keyframes sparkFly {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ============================================================
   LOSTOPF-FORMULAR
   ============================================================ */
.lostopf-frage {
    background: rgba(212,169,106,0.07);
    border-left: 3px solid #D4AF37;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: clamp(0.82rem, 2.8vw, 0.92rem);
    line-height: 1.65;
    color: var(--text-main);
}
.lostopf-form {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px;
}
.lostopf-label {
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-muted);
    margin-top: 8px;
}
.lostopf-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(192,113,79,0.35);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.25s ease;
    -webkit-appearance: none;
}
.lostopf-input:focus {
    border-color: var(--terracotta);
    background: rgba(255,255,255,0.08);
}
.lostopf-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.lostopf-error {
    color: #e05555; font-size: 0.78rem;
    min-height: 1.2em; margin: 2px 0 0;
}
.lostopf-hinweis {
    font-size: 0.7rem; color: var(--text-muted);
    text-align: center; margin-top: 8px; line-height: 1.5;
    opacity: 0.8;
}

/* Lostopf-Modal: kompakter damit kein Scroll nötig */
#modal-lostopf .modal-content {
    max-height: 92vh;
    padding: 36px 16px 16px;
}
#modal-lostopf .modal-headline {
    font-size: 1.4rem;
    margin-bottom: 6px;
}
#modal-lostopf .modal-text p {
    font-size: 0.75rem;
    line-height: 1.55;
    margin-bottom: 8px;
}
#modal-lostopf .lostopf-frage {
    font-size: 0.72rem;
    line-height: 1.55;
    padding: 10px 12px;
    margin-bottom: 10px;
}
#modal-lostopf .lostopf-label {
    font-size: 0.62rem;
    margin-top: 4px;
}
#modal-lostopf .lostopf-input {
    padding: 8px 12px;
    font-size: 0.8rem;
}
#modal-lostopf .lostopf-form {
    gap: 4px;
}
#modal-lostopf .lostopf-hinweis {
    font-size: 0.62rem;
    margin-top: 4px;
}
#modal-lostopf .btn-action {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.68rem;
    margin-top: 4px;
}

/* ============================================================
   BUTTON: 🎟 Lostopf — Gewinnspiel-Aura
   ============================================================ */
#open-about {
    background: linear-gradient(135deg, #1a1200 0%, #2a1f00 50%, #1a1200 100%);
    border: 1px solid #D4AF37;
    color: #D4AF37;
    box-shadow: 0 0 12px rgba(212,175,55,0.3), 0 0 28px rgba(212,175,55,0.12);
    overflow: hidden;
    animation: lostopfPulse 2.4s ease-in-out infinite;
}
#open-about::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,80,0.25), transparent);
    animation: lostopfShimmer 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lostopfPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.3), 0 0 24px rgba(212,175,55,0.1); }
    50%       { box-shadow: 0 0 20px rgba(212,175,55,0.6), 0 0 44px rgba(212,175,55,0.25), inset 0 0 8px rgba(212,175,55,0.08); }
}
@keyframes lostopfShimmer {
    0%   { left: -100%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
@media (hover: hover) {
    #open-about:hover {
        background: linear-gradient(135deg, #2e2000, #4a3500, #2e2000);
        color: #f5d060;
        letter-spacing: 3px;
        box-shadow: 0 0 28px rgba(212,175,55,0.7), 0 0 60px rgba(212,175,55,0.3);
        transform: translateY(-2px);
    }
}

/* ============================================================
   BUTTON: Programm ansehen — Filmstreifen-Look
   ============================================================ */
#open-program {
    background: var(--terracotta);
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 3px;
}
#open-program::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 18px,
        rgba(0,0,0,0.18) 18px,
        rgba(0,0,0,0.18) 22px
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#open-program::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    animation: programSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes programSweep {
    0%   { left: -120%; }
    55%  { left: 150%; }
    100% { left: 150%; }
}
@media (hover: hover) {
    #open-program:hover::before { opacity: 1; }
    #open-program:hover {
        background: var(--curtain-red);
        color: white;
        letter-spacing: 4px;
        box-shadow: 0 6px 24px rgba(139,26,26,0.5);
        transform: translateY(-2px);
    }
}

/* ============================================================
   BUTTON-HIERARCHIE: stufenweise kleiner nach unten
   Programm (groß) → Lostopf (mittel) → WhatsApp (klein) → Über uns (groß)
   ============================================================ */
#open-about {
    max-width: 270px;
    min-height: 40px;
    padding: 10px 18px;
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
}
.btn-whatsapp {
    max-width: 210px;
    min-height: 34px;
    padding: 7px 14px;
    font-size: 0.55rem;
    letter-spacing: 1.5px;
}

/* ============================================================
   MENÜ — komplett neu
   ============================================================ */
.main-nav-buttons {
    width: 92%; max-width: 360px;
    margin-top: 18px;
    padding-bottom: 8px;
    display: flex; flex-direction: column; align-items: center;
}

.nav-menu {
    width: 100%;
    border: 1px solid rgba(192,113,79,0.3);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    background: rgba(10,8,12,0.6);
    box-shadow: 0 4px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.nav-item {
    display: flex; align-items: center;
    width: 100%; padding: 13px 20px;
    background: transparent; border: none; cursor: pointer;
    text-align: left; gap: 14px;
    transition: background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.nav-icon {
    font-size: 1rem; width: 22px; text-align: center;
    flex-shrink: 0; opacity: 0.85;
    transition: transform 0.25s ease;
}
.nav-label {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase; letter-spacing: 2px;
    font-size: 0.7rem; font-weight: 600;
    transition: letter-spacing 0.25s ease;
}
.nav-sub {
    margin-left: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.52rem; letter-spacing: 1px;
    text-transform: uppercase; opacity: 0.45;
    font-weight: 400;
}

.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,113,79,0.2), transparent);
    margin: 0 16px;
}

/* Programm — Hauptaktion */
.nav-item-primary {
    background: linear-gradient(135deg, rgba(192,113,79,0.18), rgba(192,113,79,0.08));
    padding: 17px 20px;
}
.nav-item-primary .nav-icon { color: var(--terracotta); font-size: 0.75rem; }
.nav-item-primary .nav-label { color: var(--terracotta); font-size: 0.78rem; letter-spacing: 3px; }
@media (hover: hover) {
    .nav-item-primary:hover {
        background: rgba(192,113,79,0.28);
    }
    .nav-item-primary:hover .nav-icon { transform: scale(1.2); }
    .nav-item-primary:hover .nav-label { letter-spacing: 4px; }
}

/* Lostopf — Gold-Aura */
.nav-item-lostopf {
    background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.04));
    animation: navLostopfPulse 2.6s ease-in-out infinite;
    overflow: hidden;
}
.nav-item-lostopf::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,220,80,0.15), transparent);
    animation: navLostopfShimmer 2.6s ease-in-out infinite;
    pointer-events: none;
}
.nav-item-lostopf .nav-icon  { font-size: 1rem; }
.nav-item-lostopf .nav-label { color: #D4AF37; letter-spacing: 2.5px; }
.nav-item-lostopf .nav-sub   { color: #D4AF37; opacity: 0.5; }
@keyframes navLostopfPulse {
    0%, 100% { box-shadow: inset 0 0 0px rgba(212,175,55,0); }
    50%       { box-shadow: inset 0 0 20px rgba(212,175,55,0.08); }
}
@keyframes navLostopfShimmer {
    0%   { left: -100%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
@media (hover: hover) {
    .nav-item-lostopf:hover { background: rgba(212,175,55,0.14); }
    .nav-item-lostopf:hover .nav-icon { transform: rotate(-8deg) scale(1.2); }
}

/* WhatsApp — gedimmt */
.nav-item-muted .nav-label { color: rgba(255,255,255,0.3); font-size: 0.62rem; letter-spacing: 1.5px; }
.nav-item-muted .nav-icon  { opacity: 0.3; }
.nav-item-muted .nav-sub   { opacity: 0.25; }

/* Über uns — Ghost */
.nav-item-ghost .nav-label { color: rgba(255,255,255,0.55); letter-spacing: 2px; }
.nav-item-ghost .nav-icon  { color: rgba(255,255,255,0.35); font-size: 0.75rem; }
@media (hover: hover) {
    .nav-item-ghost:hover { background: rgba(255,255,255,0.04); }
    .nav-item-ghost:hover .nav-label { color: rgba(255,255,255,0.85); letter-spacing: 3px; }
}

/* Sweep-Animation auf Programm (unverändert) */
#open-program::after { display: none; }

/* ============================================================
   BUTTON-GRÖSSEN: Hierarchie von oben nach unten
   Programm (bleibt) → Lostopf → WhatsApp → Über uns (kleinste)
   ============================================================ */
#open-about {
    max-width: 270px; min-height: 40px;
    padding: 10px 18px;
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
}
.btn-whatsapp {
    max-width: 210px; min-height: 34px;
    padding: 7px 14px;
    font-size: 0.55rem; letter-spacing: 1.5px;
}
#btn-lostopf {
    max-width: 170px; min-height: 28px;
    padding: 5px 12px;
    font-size: 0.5rem; letter-spacing: 1.5px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.4);
    box-shadow: none;
}
@media (hover: hover) {
    #btn-lostopf:hover {
        background: rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.7);
        transform: none; box-shadow: none; letter-spacing: 1.5px;
    }
}

/* Menü-CSS deaktivieren */
.nav-menu, .nav-item, .nav-icon, .nav-label,
.nav-sub, .nav-divider { all: unset; }