:root { --color-dark: #292829; --color-bg: #BCC8BD; --color-mid: #798880; }
    * { padding: 0; margin: 0; border: 0; }
    html { font-size: 12px; scroll-behavior: smooth; box-sizing: border-box; }
    body { font-size: 1rem; color: #292829; line-height: 1.4; font-family: 'Basis Grotesque Pro Mono'; font-weight: normal; background: #BCC8BD; }
    a { text-decoration: none; color: #292829; }
    ul, ol { list-style-type: none; }
    .text ul, .text ol { list-style-type: disc; padding-left: 1.2em; }
    .text ol { list-style-type: decimal; }
    p { margin-bottom: 1.4em; }
    br { margin:0 !important; }
    p a { text-decoration: underline; }

    .bodyoverflow { overflow-x: hidden; }
    .displayNone { display: none; }
    /* body.bg_1 { background: #BCC8BD url('/img/bg1.svg') no-repeat; background-size: contain; background-position-x: right 20%; background-position-y:  top -7rem; background-attachment: fixed; } */
    /* body.bg_2 { background: #BCC8BD url('/img/bg2.svg') no-repeat; background-size: contain; background-position-x: right 0%; background-position-y:  top -10rem; background-attachment: fixed; } */
    /* body.bg_3 { background: #BCC8BD url('/img/bg3.svg') no-repeat; background-size: contain; background-position-x: right -20%; background-position-y:  top -9rem; background-attachment: fixed; } */

    body:before { display: block; content: ""; height: 100vh; position: fixed; left: 0; background-size: contain; background-position-x: right; background-position-y: top; z-index: -1; background-repeat: no-repeat; }
    body.bg_1:before { width: 95vw; top: -4rem; background-image: url('/img/bg1.svg'); }
    body.bg_2:before { width: 95vw; top: -10rem; background-image: url('/img/bg2.svg'); }
    body.bg_3:before { width: 125vw; top: -5rem; background-image: url('/img/bg3.svg'); }




    @media only screen and (max-width: 750px) {
    body.bg_1:before, body.bg_2:before, body.bg_3:before { background: #BCC8BD; }
}

body.home, body.keuze { background: #BCC8BD; }
body.home::before, body.keuze::before { background: #BCC8BD; }

/* HEADERS */
h1,h2,h3,h4 { font-weight: normal; margin-bottom: 0.25rem; font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; }
h1 { font-size: 2rem; margin-bottom: 1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }


/* GENERAL */
header, main, footer { max-width: 115rem; margin: 0 auto; width: calc(100% - 4rem); }
main { display: flex; margin-top: 4rem; justify-content: space-between; }
section { width: calc(100% - 2rem); }
@media only screen and (max-width: 750px) {
    main { flex-direction: column; align-items: center; }
}

/* MENU */
#premenu { font-family: 'Basis Grotesque Pro Regular'; display: flex; justify-content: flex-end; margin-top: 2rem; }
#premenu ul { display: flex; position: relative; z-index: 3; }
#premenu ul li { margin-left: 0.2rem; }
#premenu ul li.sep { margin: 0 0.8rem; }
#premenu ul li a, #mobilepremenu ul li a { padding: 0.2rem; color: #8f8f8f; text-transform: uppercase; background: #BCC8BD; cursor: pointer; }
#premenu ul li a:hover { text-decoration: underline; }
#premenu ul li a.active { color: #292829; text-decoration: underline; cursor: initial; }

#menu { font-family: 'Basis Grotesque Pro Regular'; font-size: 1.2rem; text-transform: uppercase; margin-top: 0.5rem; transition: 500ms ease; }
#menu #logo { margin-right: 3.5rem; }
#menu #logo img { width: 14rem; height: auto; display: block; }
#menu nav { display: flex; }
#menu nav ul { display: flex; z-index: 3; }
#menu nav ul li { margin-right: 2.3rem; margin-top: 2rem; }
#menu nav ul li a { background: #BCC8BD; }
#menu nav ul li a:hover, #menu nav ul li a.active { text-decoration: underline; }

#mobilepremenu { display: none; margin-bottom: -4.7rem; }
#mobilepremenu { font-family: 'Basis Grotesque Pro Regular'; flex-direction: column; justify-content: flex-end; margin-top: 2rem; }
#mobilepremenu ul { display: flex; text-transform: uppercase; justify-content: flex-end; margin-bottom: 0.7rem; }
#mobilepremenu ul li a { padding: 0.2rem; color: #8f8f8f; text-transform: uppercase; }
#mobilepremenu ul li a.active { color: #292829; }

header .button { position: absolute; font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; right: 3rem; top: 4.3rem; }
header input.button { opacity: 0; cursor: pointer; width: 5rem; right: 2rem; height: 1.5rem; z-index: 5; }

header span.button { display: flex; align-items: center; margin-right: 0.5rem; }
header span.button span { width: 0.6rem; display: block; height: 0.1rem; background: #292829; position: absolute; right: -1.2rem; }
header span.button span:nth-of-type(1) { transform: rotate(0); transition: 500ms ease; }
header span.button span:nth-of-type(2) { transform: rotate(-90deg); transition: 500ms ease; }
header input.button:checked ~ span.button span:nth-of-type(1) { transform: rotate(360deg); }
header input.button:checked ~ span.button span:nth-of-type(2) { transform: rotate(360deg); }

#menu nav.keuze ul li { display: none; }

header .button, header span.button { display: none; }

@media only screen and (max-width: 1290px) {
    #mobilepremenu { display: flex; }
    #premenu { display: none; }
    #menu #logo img { width: 14rem; height: auto; display: block; padding-top: 2rem; }
    #menu nav ul li { border: 1px solid #292829; margin: 0; padding: 1rem; }
    #menu nav ul li a { display: block; width: 100%; }
    #menu nav ul { flex-direction: column; position: absolute; background: #BCC8BD; width: 22rem; top: 11.5rem; z-index: 2; height: 0; overflow: hidden; transition: height 500ms ease; }
    header input:checked ~ #menu  nav ul { height: 26.9rem; margin-top: 0.5rem; }
    header input:checked ~ #menu { margin-bottom: 26.9rem; }
    .keuze header input:checked ~ #menu  nav ul { height: 10rem; margin-top: 0.5rem; }
    .keuze header input:checked ~ #menu { margin-bottom: 10rem; }
    #menu nav ul  li { border: 2px solid #292829; border-top: 0; }
    #menu nav ul  li:nth-of-type(1) { margin-top: 0; border-top: 2px solid #292829; }
    #menu nav.keuze ul li { display: flex; }
    header .button, header span.button { display: flex; }
}

/* FOOTER */

footer { margin-top: 20rem; margin-bottom: 3rem; }
footer nav { max-width: 75rem; width: 100%; margin: 0.5rem auto 5rem auto; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
footer nav > * { margin-top: 0.5rem; }
footer ul { display: flex; flex-direction: column; margin-right: 1rem; z-index: 3; }
footer ul:nth-of-type(3), footer ul:nth-of-type(4) { margin-right: 0; }
footer ul li { margin: 0 1.5rem; }
footer a { text-decoration: underline; background: #BCC8BD; }
footer >  ul { width: 100%; margin-top: 7rem; align-items: flex-end; font-size: 0.75rem; }
footer >  ul li { margin-right: 0; }
footer >  ul li:nth-of-type(2) { display: flex; align-items: center; margin-top: 0.25rem; z-index: 3; background: #BCC8BD; margin-bottom: 0.25rem; }
footer >  ul li:nth-of-type(2) a { display:flex; align-items: center; margin-left: 0.5rem; }
footer >  ul li:nth-of-type(2) a img { width: 8rem; }
footer > nav > ul:nth-of-type(1) > li:nth-of-type(6) { margin-top: 1rem; }

.keuze footer { margin-top: 28rem; }
.keuze footer > nav > ul:nth-of-type(1) > li:nth-of-type(3) { margin-top: 0; }
.keuze footer > nav > ul:nth-of-type(1) > li:nth-of-type(6), .keuze footer > nav > ul:nth-of-type(1) > li:nth-of-type(11) { margin-top: 1rem; }



@media only screen and (max-width: 650px) {
    footer { margin-top: 10rem; }
    .keuze footer { margin-top: 10rem; }
    footer ul { flex-direction: column; margin-bottom: 2rem; }
    footer ul li { margin: 0.2rem 0; }
}

/* .gridbackground { position: absolute; bottom:-38.7rem; left: 0;  transform: scaleX(-1) scaleY(-1);width: 154rem; height: 112vh; background:url('/img/grid2.svg') top right no-repeat;  background-size: 50%; opacity: 0.7; z-index: 3;} */

.gridground { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px solid #798880; }
.gridground span { position: absolute; display: block; border-left: 2px solid #798880; border-bottom: 2px solid #798880; left:-1px; bottom: -1px; z-index: 2; transition: 500ms ease; }
.home .gridground span:nth-of-type(1) { height: 200vh; }
.home .gridground span:nth-of-type(2) { width: 200vw; }
.home .gridground span:nth-of-type(3) { width: 200vw; top: -1px; bottom: auto; }
.home .gridground span:nth-of-type(4) { height: 200vh; right: -2px; left: auto; }
.home .gridground span:nth-of-type(5) { height: 200vh; left: 15%; }
.home .gridground span:nth-of-type(6) { width: 85%; height: 0; left: 15%; top: -1px; }
.home .gridground span.circle { height: 70rem; width: 70rem; border: 2px solid #798880; border-radius: 50%; right: -120%; left: auto; transition-delay: 500ms; }
.home .gridground > div { width: calc(40%); background: #BCC8BD; bottom: 0; right: -2px; position: absolute; border: 2px solid #798880; height: 20%; display: flex; align-items: center; justify-content: center; transition: 500ms ease; }
.home .gridground > div h2 { font-size: 2.5rem; }

@media only screen and (max-width: 1000px) {
    .gridground { display: none; }
}

.videobox:hover .gridground span:nth-of-type(6) { transform:translateY(90px); }
.videobox:hover .gridground > div { transform:translateY(100%); }
.videobox:hover .gridground .circle { transform: translateX(-10%); }


/* HOME */

section.text { width: calc(25% - 2rem); min-width: 22rem; margin-right: 2rem; }
section.text p { background: #BCC8BD; }
section.text ol { list-style-type: numeric; padding-left: 2em; margin: 1rem 0; }
section.right { width: calc(60% - 2rem); }
.home section.right { width: calc(60% - 2rem); }
.home section.video .videobox { width: 100%; padding-bottom: 56%; height: 0; position: relative; }
.home section.video .videobox figure { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; overflow: hidden; cursor: pointer; }
.home section.video .videobox iframe { position: absolute; width: 106%; height: 103%; top: 0; left: -3%; object-fit: cover; pointer-events: none; }
.home main { flex-wrap: wrap; }
.home-cta { width: calc(60% - 2rem); margin-left: auto; margin-top: 1.5rem; }
.home-cta-btn { font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; letter-spacing: 0.05em; background: #292829; color: #fff; border: 2px solid #292829; padding: 0.9rem 2rem; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms; display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; }
.home-cta-btn:hover { background: var(--color-bg); color: #292829; border-color: #292829; }
.home-cta-main { font-size: 1.2rem; }
.home-cta-sub { font-family: 'Basis Grotesque Pro Mono'; font-size: 14px; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.75); }
.home-cta-btn:hover .home-cta-sub { color: var(--color-dark); }

@media only screen and (max-width: 750px) {
    main { flex-direction: column-reverse; }
    section.right { margin-bottom: 4rem; }
    section.right { width: calc(100% - 2rem); }
    .home section.right { width: calc(100% - 2rem); }
    .home-cta { width: calc(100% - 2rem); margin-left: 0; margin-top: 0; margin-bottom: 0; }
    .home-cta-btn { width: 100%; box-sizing: border-box; }
}
@media only screen and (max-width: 500px) {
    .home section.video .videobox iframe { width: 110%; pointer-events: all; }
}
/* LESSEN */
section.grid.right { margin-right: 7%; }
section.grid ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10rem; align-items: flex-start; }
.imagebox { width: 100%; height: 0%; padding-bottom: 100%; position: relative; display: block; }
.imagebox img { width: 100%; object-fit: cover; height: 100%; position: absolute; top: 0; left: 0; transition: 500ms ease; }
section.grid ul li:hover a.imagebox div span { text-decoration: underline; }
section.grid ul li p { margin-top: 1rem; background: #BCC8BD; }
section.grid ul li h1 { background: #BCC8BD; display: inline-block; margin-bottom: 0; }

.hoverblock div:first-of-type { background: #BCC8BD; border: 2px solid #798880; border-bottom: 0; padding: 0.5rem; width: calc(100% - 1rem); transition: 500ms ease; }
.hoverblock div:first-of-type span { font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; font-size: 2rem; margin-top: -3%; width: 120%; }

.hoverblock:hover div:first-of-type:not(.slider) { transform: translateY(100%); }

.hoverblock .imagebox { overflow: hidden; border: 2px solid #798880; }
.hoverblock .imagebox.hover img.hover { transform: translateX(100%); border-left: 2px solid #798880; }
.hoverblock .imagebox.hover:hover img.top { transform: translateX(-100%); }
.hoverblock .imagebox.hover:hover img.hover { transform: translateX(-2px); }

@media only screen and (max-width: 1200px) {
    section.grid ul { grid-gap: 4rem; }
    .lessen section.grid.right, .team section.grid.right { margin-right: 0%; }
    .team section.right { width: calc(100% - 2rem); }
}

@media only screen and (max-width: 750px) {
    .lessen main, .team main { flex-direction: column; }
    section.right { margin-right: 0; margin-top: 3rem; }
    section.grid ul li a.imagebox div span { font-size: 3vw; }
}

@media only screen and (max-width: 500px) {
    section.grid ul { grid-template-columns: 1fr; }
    section.grid ul li a.imagebox div span { font-size: 2rem; }
}

@media only screen and (min-width: 1500px) {
    section.grid ul li a.imagebox div span { font-size: 2.5rem; }
}

/* LES */

section.right.image { max-width: 45rem; }
section.right.image .imagebox > div { position: absolute; z-index: 2; display: flex; flex-direction: column; top: -10%; left: -10%; }
section.right.image .imagebox > div span { font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; font-size: 3.5vw; margin-top: -3%; }

@media only screen and (min-width: 1400px) {
    section.right.image { width: calc(50% - 2rem); }
    section.right.image .imagebox > div span { font-size: 4rem; }
}

@media only screen and (max-width: 750px) {
    section.right.image { max-width: 30rem; }
    section.right.image .imagebox > div { left: -3%; top: -15%; }
    section.right.image .imagebox > div span { display: none; }
    section.right.image .imagebox > div span:first-of-type { display:block; font-size: 3rem; }
    .blog section.right.image .imagebox > div span:first-of-type { display:block; font-size: 3rem; }
}

/* ROOSTER */

.rooster main { flex-direction: column; }
.rooster iframe { margin: 0 auto; margin-bottom: 4rem; width: 100%; }
.rooster iframe.last-of-type { margin-bottom: 0; }
.rooster main .container { max-width: 115rem; margin: 1rem auto 2rem auto; width: 100%; }
.rooster main .container a { border: 1px solid #292829; padding: 0.5rem 1rem; font-size: 1.2rem; background: #BCC8BD; }

/* BLOGS */

.blogs section.grid ul li a.link { text-decoration: underline; text-transform: uppercase; }
.blogs section.grid ul li a.link:hover { text-decoration: none; }
.blogs .hoverblock div:first-of-type span { font-size: 1.6rem; }


/* BLOG */

.blog section.text { width: calc(35% - 2rem); min-width: 28rem; }
.blog section.right.image .imagebox > div span { font-size: 2.5vw; margin-top: 0; }
.blog section.right.image .imagebox > div span { font-size: 2.5vw; margin-top: 0; }
.blog .hoverblock:hover div:first-of-type { transform: translateY(0%); }


@media only screen and (max-width: 1100px) {
    .blogs main { flex-direction: column; }
    .blogs section.right { margin-right: 0; margin-top: 3rem; }
    .blogs section.right { margin-bottom: 4rem; }
    .blogs section.right { width: calc(100% - 2rem); }
}

@media only screen and (max-width: 600px) {
    .blogs section.grid ul { grid-template-columns: 1fr; }
    .blog section.text { min-width: 26rem; margin-right: -0.4rem; }
}

/* KEUZESCHERM */
.keuze main { display: block; }
.keuze h1 { text-align: center; font-size: 3rem; }
.keuze .content > * { text-align: left; max-width: 60rem; margin: 0 auto 1rem auto; }

.pick { display: flex; justify-content: space-between; padding-top: 7rem; padding-bottom: 5rem; }
.pick > a { display: block; width: 48%; }
.pick > a .imagebox { padding-bottom: 70%; }
.pick > a .imagebox img.top { opacity: 1; transition: 500ms ease; }
.pick > a .imagebox:hover img.top { opacity: 0; }

.keuze .gridground { pointer-events: none; }
.keuze .gridground span:nth-of-type(1) { height: calc(100% + 38vh); top: 0; }
.keuze .gridground span:nth-of-type(2) { width: 200vw; bottom: auto; }
.keuze .gridground span:nth-of-type(3) { width: 200vw; }
.keuze .gridground span:nth-of-type(4) { height: calc(100% + 38vh); top: 0; left: 100%; }
.keuze .gridground span:nth-of-type(5) { height: calc(100% + 38vh); top: 0; left: 108.1%; }
.keuze .gridground span:nth-of-type(6) { height: calc(100% + 38vh); top: 0; left: 208.1%; }
.keuze .gridground span:nth-of-type(7) { width: 200vw; bottom: auto; top: calc(100% + 38vh); }
.keuze .gridground span.circle { z-index: -1; height: 182%; width: 0; padding-right: 127.4%; border: 2px solid #798880; border-radius: 50%; left: 2vw; top: 0vw; transition-delay: 0ms; }

.keuze .popup { border: 2px solid #798880; height: 20%; position: absolute; width: calc(100% - 2px); left: 0px; border-bottom: none; z-index: -1; transition: 500ms ease; transition-delay: 250ms; transform: translateY(-80%); z-index: 5; }
.keuze .popup h2 { font-size: 2.5rem; margin: 1rem; }
.keuze .noord .popup { width: calc(100% - 4px); margin-left: -1px; }

.keuze .pick:hover .gridground span.circle { transform: translateX(5vw); }
.keuze .pick  img { z-index: 6; }
.keuze .pick > a:hover .popup { transform: translateY(0); }

@media only screen and (max-width: 1000px) {
    .keuze .pick { flex-direction: column; align-items: center; }
    .keuze .pick > a { width: 100%; max-width: 50rem; }
    .keuze .pick > a:nth-of-type(1) { margin-bottom: 8rem; }
    .keuze .popup { border: 2px solid #798880; width: 100%; transform: translateY(-80%); left: -2px; }
    .keuze .pick .noord .popup { border: 2px solid #798880; left: -1px; bottom: auto; transform: translateY(-80%); align-items: flex-start; width: 100%; }
    .keuze .pick:hover .noord .popup { transform: translateY(-80%); }
    .keuze .pick .imagebox { border: 2px solid #798880; }
}
@media only screen and (max-width: 670px) {
    .keuze .popup h2 { font-size: 4.5vw; margin: 0.5rem; }
}

@media only screen and (max-width: 600px) {
    .keuze .popup { transform: translateY(-80%) !important; }
    .keuze h1 { text-align: left; font-size: 2rem; }
    .keuze .content > * { text-align: left; }
}

/* TEAMMEMBER */
.teammember section.text h2 { font-size: 1.3rem; }
.teammember .imagebox { width: 80%; padding-bottom: 80%; }
.teammember .hoverblock div:first-of-type { width: calc(80% - 1rem); }

/* PAGE */
body.page { background: #BCC8BD; }
.page section.text { width: calc(100% - 2rem); max-width: 60rem; margin: 0 auto; }
.page section.text h2 { margin-top: 2rem; background: #BCC8BD; }
.page section.text ul li { margin-bottom: 1rem; background: #BCC8BD; }
.page section.text ul li ul li { margin-bottom: 0.2rem; margin-left: 2rem; }
.page section.text p { background: #BCC8BD; }


/* INFO */
.info .text { width: calc(30% - 2rem); }
.info .text nav ul li a { text-decoration: underline; }
.info .text h2 { margin-top: 2rem; }
.info .text ul { margin-bottom: 1rem; }
.info .text a:hover { text-decoration: underline; }

/* VERHUUR */
.verhuur main { flex-wrap: wrap; }
.verhuur .verhuur-toggle-row { width: 100%; margin-bottom: 2rem; }
.verhuur .text h1 { margin-top: 0.5rem; }
.verhuur .text ul { margin-bottom: 1rem; }
#verhuur-contact { text-decoration: underline; }
.verhuur section.right.image { max-width: 60rem; }
.verhuur section.right.image .imagebox.slide { padding-bottom: 56.25%; }

div.imagebox.slide > div { display: flex; align-items: center; margin-top: 3rem; top: 0 !important; left: 0 !important; margin-top: 0; height: 100%; padding: 0; transform: none !important; border: none; }
div.imagebox.slide > div[hidden] { display: none !important; }
div.imagebox.slide button { position: absolute; left: 0; all: unset; cursor: pointer; top: 50%; transform: translateY(-50%); z-index: 3; position: absolute; color: white; font-size: 2rem; user-select: none; height: 3rem; width: 2.75rem; display: flex; align-items: center; background: #798880; }
div.imagebox.slide button:last-of-type { right: 0; left: initial; justify-content: flex-end; }
div.imagebox.slide button::after, div.imagebox.slide button::before { content: ""; position: absolute; height: 3px; width: 1.2rem; background: #BCC8BD; transform: translateY(4px) rotate(45deg); left: 0.5rem; }
div.imagebox.slide button::after { transform: translateY(-4px) rotate(-45deg); }
div.imagebox.slide button:last-of-type::after { transform: translateY(4px) rotate(-45deg); left: initial; right: 0.5rem; }
div.imagebox.slide button:last-of-type::before { transform: translateY(-4px) rotate(45deg); left: initial; right: 0.5rem; }
div.imagebox.slide .overflower { width: 100%; overflow: hidden; }
div.imagebox.slide .slider { transition: 500ms ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 !important; border: none !important; }
div.imagebox.slide ul { display: flex; align-items: center; height: 100%; transform: translateX(-100%); }
div.imagebox.slide ul li { width: 100%; flex-shrink: 0; height: 100%; position: relative; }
div.imagebox.slide ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* COOKIE NOTICE */
#cookie-notice { padding: 1rem 1rem; display: none; justify-content: center; align-items: center; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: rgba(0,0,0,0.85); color: rgba(255, 255, 255, 0.8); z-index: 99; font-size: 0.9rem; }

#cookie-notice a { display: inline-block; cursor: pointer; margin-left: 1rem; padding: 0.4rem 0.65rem; color: #1d1a1c; background: #798880; text-transform: uppercase; border-radius: 1px; }

#cookie-notice a { min-width: 4.5rem; }
#cookie-notice div { display: flex; }


@media (max-width: 767px) {
    #cookie-notice span { display: block; padding-top: 3px; margin: 0.2rem 0; margin-bottom: 0.7rem; font-size: 0.75rem; }
    #cookie-notice div { flex-direction: column; }
    #cookie-notice a { position: relative; margin: 0.2rem; margin-right: 0; margin-left: 0.5rem; bottom: 4px; padding: 0.2rem 0.5rem; }
}



#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 109; display: grid; place-items: center; }
#lightbox > div { width: calc(100% - 2rem); max-width: 100rem; position: relative; }
#lightbox > div > div { height: 0; padding-bottom: 56.25%; position: relative; }
#lightbox > div > div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

section.odf__cookies :is(p, p a,li, strong) { font-size: 16px !important; }

/* ABONNEMENTEN SELECTOR */
.abonnementen main, .passes main, .personal-training main { flex-direction: column; align-items: stretch; }
.abonnementen .home-cta, .passes .home-cta, .personal-training .home-cta { width: 100%; margin-left: 0; margin-top: 0; margin-bottom: 2.5rem; }

section.abo-wrapper { width: 100%; }
section.abo-wrapper h1 { margin-bottom: 2.5rem; }

.abo-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: start; }
.abo-main { min-width: 0; }
.abo-aside { position: sticky; top: 2rem; min-width: 0; }

.abo-row { margin-bottom: 2.5rem; }
.abo-row-cards { margin-top: 0; }

.abo-row-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid #798880; padding-bottom: 0.6rem; }
.abo-row-head h2 { margin: 0; font-size: 1.17rem; }
.abo-num { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; letter-spacing: 0.08em; }
.abo-rule { flex: 1; }

.abo-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.abo-pill { appearance: none; background: transparent; color: #292829; border: 2px solid #292829; padding: 0.75rem 1.5rem; font-family: 'Basis Grotesque Pro Regular'; font-size: 1.17rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; transition: background 180ms, color 180ms; line-height: 1; }
.abo-pill:hover { background: rgba(41,40,41,0.07); }
.abo-pill[aria-pressed="true"] { background: #292829; color: #BCC8BD; }

.abo-seg { display: inline-flex; border: 2px solid #292829; padding: 3px; gap: 3px; }
.abo-seg button { appearance: none; background: transparent; border: 0; color: #292829; font-family: 'Basis Grotesque Pro Regular'; font-size: 1.17rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.7rem 1.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; transition: background 180ms, color 180ms; line-height: 1.1; }
.abo-seg button small { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; text-transform: none; letter-spacing: 0; }
.abo-seg button[aria-pressed="true"] { background: #292829; color: #BCC8BD; }
.abo-seg button[aria-pressed="true"] small { color: rgba(188,200,189,0.75); }

.abo-tiers { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.abo-card { border: 2px solid #292829; background: #BCC8BD; padding: 2rem 2rem 2rem; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: background 200ms; text-align: left; color: #292829; font-family: 'Basis Grotesque Pro Mono'; font-size: 1.17rem; }
.abo-card:hover { background: #adb8ae; }
.abo-card[aria-pressed="true"] { background: #292829; color: #BCC8BD; }
.abo-card[aria-disabled="true"] { cursor: default; opacity: 0.45; }

.abo-card-badge { position: absolute; top: 0; left: 2rem; font-family: 'Basis Grotesque Pro Regular'; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; background: #292829; color: #BCC8BD; padding: 0.35rem 0.75rem; transform: translateY(-50%); }
.abo-card[aria-pressed="true"] .abo-card-badge { background: #BCC8BD; color: #292829; }

.abo-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 1rem; }
.abo-tier-name { font-family: 'Basis Grotesque Pro Regular'; font-size: 2.5rem; text-transform: uppercase; margin: 0 0 0.25rem; line-height: 1; }
.abo-card-title { font-family: 'Basis Grotesque Pro Regular'; font-size: 2rem; text-transform: uppercase; margin: 0 0 0.25rem; line-height: 1; }
.abo-card-tag { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; text-transform: uppercase; letter-spacing: 0.06em; }
.abo-card[aria-pressed="true"] .abo-card-tag { color: rgba(188,200,189,0.65); }

.abo-card-check { width: 1.8rem; height: 1.8rem; border: 2px solid #292829; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; margin-top: 0.5rem; }
.abo-card[aria-pressed="true"] .abo-card-check { border-color: #BCC8BD; }
.abo-card-check svg { width: 1rem; height: 1rem; opacity: 0; transition: opacity 180ms; stroke: #BCC8BD; }
.abo-card[aria-pressed="true"] .abo-card-check svg { opacity: 1; }

.abo-price { display: flex; align-items: baseline; gap: 2px; margin: 0.75rem 0 0.75rem; }
.abo-price-curr { font-family: 'Basis Grotesque Pro Regular'; font-size: 1.5rem; }
.abo-price-num { font-family: 'Basis Grotesque Pro Regular'; font-size: 4rem; line-height: 0.95; letter-spacing: -0.02em; }
.abo-price-num.abo-na { font-size: 2rem; }
.abo-price-suf { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; margin-left: 0.5rem; }
.abo-card[aria-pressed="true"] .abo-price-suf { color: rgba(188,200,189,0.65); }

.abo-meta { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; margin-bottom: 1.2rem; white-space: pre-line; }
.abo-card[aria-pressed="true"] .abo-meta { color: rgba(188,200,189,0.65); }

.abo-feat { list-style: none; padding: 1.2rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; border-top: 1px solid #798880; }
.abo-card[aria-pressed="true"] .abo-feat { border-top-color: rgba(188,200,189,0.35); }
.abo-feat-item { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.6rem; align-items: baseline; font-size: 1.17rem; }
.abo-feat-item.off { opacity: 0.35; }
.abo-feat-dot { font-family: 'Basis Grotesque Pro Regular'; color: #798880; text-align: center; }
.abo-card[aria-pressed="true"] .abo-feat-dot { color: rgba(188,200,189,0.65); }
.abo-feat-label { font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; font-size: 1.17rem; display: block; }
.abo-feat-sub { font-family: 'Basis Grotesque Pro Mono'; font-size: 1rem; color: #798880; display: block; margin-top: 0.1rem; }
.abo-card[aria-pressed="true"] .abo-feat-sub { color: rgba(188,200,189,0.6); }

.abo-cta { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.abo-summary { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center; font-family: 'Basis Grotesque Pro Mono'; font-size: 1.17rem; color: #292829; background: #BCC8BD; border: 1px solid #292829; padding: 1rem 1.5rem; }
.abo-summary > span { color: #292829; font-size: 1rem; }
.abo-summary strong { font-family: 'Basis Grotesque Pro Regular'; color: #292829; text-transform: uppercase; font-size: 1.17rem; letter-spacing: 0.02em; }
.abo-sum-price { font-family: 'Basis Grotesque Pro Regular'; color: #292829; font-size: 1.6rem; letter-spacing: -0.01em; }
.abo-btn { font-family: 'Basis Grotesque Pro Regular'; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.17rem; background: #292829; color: #BCC8BD; border: 2px solid #292829; padding: 1.2rem 4rem; cursor: pointer; transition: background 150ms, color 150ms; display: block; text-align: center; }
.abo-btn:hover { background: #BCC8BD; color: #292829; }

@media only screen and (max-width: 960px) {
    .abo-selector { grid-template-columns: 1fr; }
    .abo-aside { position: static; }
}
@media only screen and (max-width: 820px) {
    .abo-seg { width: 100%; }
    .abo-seg button { flex: 1; }
    .abo-price-num { font-size: 3rem; }
}
@media only screen and (max-width: 500px) {
    .abo-btn { padding: 1rem 2rem; text-align: center; }
}