/* Homepage: originele bioscoopfoto, videolaag achter het scherm en de hoofden. */
html body.home.ha-light-preview {
    --ha-index-paper: 227, 198, 170;
    background: #e3c6aa !important;
    isolation: isolate;
}
html body.home.ha-light-preview::before,
html body.home.ha-light-preview::after { display: none !important; }
.ha-index-filter-defs { position: absolute; pointer-events: none; }
html body.home.ha-light-preview .ha-index-page-scene {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #342419;
}
html body.home.ha-light-preview .ha-index-page-scene img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: url(#ha-index-screen-key);
    opacity: 1;
}
html body.home.ha-light-preview .ha-index-page-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(227,198,170,.84), rgba(227,198,170,.88));
}
html body.home.ha-light-preview .ha-index-main {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 151px !important;
    background: transparent !important;
}
html body.home.ha-light-preview .ha-index-main::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    height: 205px;
    pointer-events: none;
    background: linear-gradient(rgba(22,14,9,.94), rgba(30,20,13,.97)), url('index-hero-moviescreen.png') center bottom / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(#000 73%, transparent);
    mask-image: linear-gradient(#000 73%, transparent);
}
html body.home.ha-light-preview .ha-light-site-header,
html body.home.ha-light-preview .ha-light-site-header.is-scrolled,
html body.home.ha-light-preview.ha-light-menu-open .ha-light-site-header,
html body.home.ha-light-preview.ha-light-menu-open .ha-light-site-header.is-scrolled {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body.home.ha-light-preview .ha-light-site-header .ha-light-logo img,
html body.home.ha-light-preview .ha-light-site-header.ha-hdr-on-light .ha-light-logo img,
html body.home.ha-light-preview .ha-light-site-header.ha-hdr-on-dark .ha-light-logo img {
    filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.35)) !important;
}
html body.home.ha-light-preview .ha-index-cinema {
    position: relative;
    isolation: isolate;
    width: 100% !important;
    aspect-ratio: 1672 / 941 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #100805 !important;
    overflow: hidden;
}
html body.home.ha-light-preview .ha-index-cinema .ha-index-cinema-still,
html body.home.ha-light-preview .ha-index-cinema .ha-index-banner-video {
    position: absolute;
    z-index: 1;
    left: 15.61%;
    top: 4.78%;
    width: 68.90% !important;
    height: 45.27% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    background: #050505;
}
html body.home.ha-light-preview .ha-index-cinema-foreground {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain;
    filter: url(#ha-index-screen-key);
    pointer-events: none;
}
html body.home.ha-light-preview .ha-index-cinema::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 17%;
    background: linear-gradient(180deg, rgba(16,8,5,0), rgba(16,8,5,.15) 34%, rgba(16,8,5,.66) 76%, #100805);
    pointer-events: none;
}
html body.home.ha-light-preview .ha-index-navigation::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: clamp(36px, 6vw, 100px);
    background: linear-gradient(180deg, #100805, rgba(16,8,5,.65) 28%, rgba(16,8,5,0));
    pointer-events: none;
}
html body.home.ha-light-preview .ha-index-navigation::after {
    height: clamp(100px, 15vw, 245px);
    background: linear-gradient(180deg, rgba(var(--ha-index-paper),0), rgba(var(--ha-index-paper),.12) 25%, rgba(var(--ha-index-paper),.48) 56%, rgba(var(--ha-index-paper),.85) 82%, rgb(var(--ha-index-paper)));
}
html body.home.ha-light-preview .ha-site-legal-footer {
    background: linear-gradient(180deg, rgb(var(--ha-index-paper)) 0%, rgba(var(--ha-index-paper),.72) 22%, rgba(var(--ha-index-paper),.25) 65%, rgba(var(--ha-index-paper),.12) 100%) !important;
    box-shadow: none !important;
    border-top: 0 !important;
}
@media (max-width: 900px) {
    html body.home.ha-light-preview { --ha-index-paper: 222, 176, 127; }
    html body.home.ha-light-preview .ha-index-main { padding-top: 113px !important; }
    html body.home.ha-light-preview .ha-index-main::before { height: 139px; }
}
@media (max-width: 600px) {
    html body.home.ha-light-preview .ha-index-main { padding-top: 84px !important; }
    html body.home.ha-light-preview .ha-index-main::before { height: 99px; }
}
@media (prefers-reduced-motion: reduce) {
    html body.home.ha-light-preview .ha-index-cinema .ha-index-banner-video {
        display: none !important;
    }
}

/* Index: zachte Wie-is-Han-blend en vintage kamerlaag; het tv-videobeeld blijft puur. */
html body.home.ha-light-preview .ha-index-page-scene img {
    filter: url(#ha-index-screen-key) sepia(.20) saturate(.72) contrast(.95) brightness(.82);
}
html body.home.ha-light-preview .ha-index-page-scene::after {
    background:linear-gradient(180deg,rgba(116,85,61,.66),rgba(78,55,39,.76)) !important;
}
html body.home.ha-light-preview .ha-index-cinema {
    -webkit-mask-image:none;
    mask-image:none;
    background:transparent !important;
    transform:scale(var(--ha-index-hero-scale,1));
    transform-origin:center center;
    transition:opacity .12s linear,transform .12s linear !important;
    z-index:2;
}
html body.home.ha-light-preview .ha-index-cinema-foreground {
    filter:url(#ha-index-screen-key) blur(var(--ha-index-hero-blur,0)) sepia(.18) saturate(.78) contrast(.97) brightness(.94);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 75%,rgba(0,0,0,.92) 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 75%,rgba(0,0,0,.92) 84%,transparent 100%);
    transform:scale(var(--ha-index-hero-scale,1));
    transform-origin:center center;
    transition:filter .12s linear,transform .12s linear !important;
}
html body.home.ha-light-preview .ha-index-cinema::after {
    inset:0;
    height:100%;
    background:linear-gradient(180deg,rgba(10,7,5,.26) 0%,transparent 25%,transparent 62%,rgba(16,8,5,.58) 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 86%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 86%,transparent 100%);
}
html body.home.ha-light-preview .ha-index-navigation::before {
    content:none !important;
    display:none !important;
}
html body.home.ha-light-preview .ha-index-navigation img {
    filter:sepia(.18) saturate(.78) contrast(.96) brightness(1.10);
}
html body.home.ha-light-preview .ha-index-navigation {
    z-index:1;
    margin-top:clamp(-150px,-8vw,-54px);
    isolation:isolate;
    background:transparent !important;
}
html body.home.ha-light-preview .ha-index-navigation picture {
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.40) 7%,#000 18%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.40) 7%,#000 18%,#000 100%);
}
html body.home.ha-light-preview .ha-index-navigation .ha-index-link {
    background:none !important;
    background-color:transparent !important;
    background-image:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
}
html body.home.ha-light-preview .ha-index-navigation .ha-index-link:hover,
html body.home.ha-light-preview .ha-index-navigation .ha-index-link:focus-visible {
    border-color:rgba(255,224,176,.78) !important;
    background-color:rgba(222,176,127,.07) !important;
    background-image:radial-gradient(circle at center,rgba(255,222,169,.12),transparent 72%) !important;
    box-shadow:0 0 0 3px rgba(255,211,151,.08),0 0 28px rgba(255,190,103,.24) !important;
}
html body.home.ha-light-preview .ha-index-intro-anchor::before {
    content:none !important;
    display:none !important;
}
html body.home.ha-light-preview .ha-index-intro-anchor .ha-index-intro {
    z-index:3;
}
@media (max-width:600px) {
    html body.home.ha-light-preview .ha-index-cinema-foreground {
        -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.90) 83%,transparent 100%);
        mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.90) 83%,transparent 100%);
    }
    html body.home.ha-light-preview .ha-index-navigation {
        margin-top:-54px;
    }
}

/* Indexheader: logo links, bediening rechts en de hero volledig achter de header. */
html body.home.ha-light-preview .ha-index-main {
    padding-top:0 !important;
}
html body.home.ha-light-preview .ha-index-main::before {
    content:none !important;
    display:none !important;
}
html body.home.ha-light-preview .ha-light-site-header,
html body.home.ha-light-preview .ha-light-site-header.is-scrolled,
html body.home.ha-light-preview.ha-light-menu-open .ha-light-site-header,
html body.home.ha-light-preview.ha-light-menu-open .ha-light-site-header.is-scrolled {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:clamp(18px,3vw,42px) !important;
    row-gap:8px !important;
    align-items:center !important;
    min-height:0 !important;
    padding:clamp(15px,2vw,28px) clamp(18px,2.8vw,44px) !important;
    background:transparent !important;
}
html body.home.ha-light-preview .ha-light-site-header .ha-light-logo {
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    justify-self:start !important;
    align-self:center !important;
    width:clamp(166px,18vw,224px) !important;
}
html body.home.ha-light-preview .ha-light-site-header .ha-light-tools--right {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
}
html body.home.ha-light-preview .ha-light-site-header .ha-light-tools--left {
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:end !important;
}
@media (max-width:600px) {
    html body.home.ha-light-preview .ha-light-site-header {
        padding:12px 15px !important;
        column-gap:12px !important;
        row-gap:6px !important;
    }
    html body.home.ha-light-preview .ha-light-site-header .ha-light-logo {
        width:clamp(126px,37vw,158px) !important;
    }
    html body.home.ha-light-preview .ha-light-site-header .ha-light-menu-button {
        display:inline-flex !important;
    }
    html body.home.ha-light-preview .ha-light-site-header .ha-light-tools {
        gap:12px !important;
    }
}