/* maartenversteeg.nl — zelfde huisstijl en componenten als hear.nl (home.css + styles.css); hier alleen wat de dj-site anders heeft */
.mv-merk{font:300 26px/1 var(--kop);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.top .mv-merk{display:inline-block}
.home .top .mv-merk{visibility:hidden}
.mv-woordmerk{display:block;font:300 clamp(44px,7.4vw,118px)/.95 var(--kop);letter-spacing:.05em;text-transform:uppercase;margin:0 0 26px}
.hero-blok .mv-tagline{font:300 clamp(26px,2.6vw,40px)/1.15 var(--kop);margin:0 0 18px;white-space:normal}
.werk-kaart .label{display:block;margin-top:14px}
/* lijst met alle mixes */
.mix-lijst{list-style:none;margin:0;padding:0 var(--rand) clamp(40px,5vw,72px);background:var(--wit);color:var(--zwart)}
.mix-lijst li{border-top:1px solid #d9d6cf}
.mix-lijst li:last-child{border-bottom:1px solid #d9d6cf}
.mix-lijst a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:18px 0;text-decoration:none}
.mix-lijst .label{color:#5d5b56;grid-column:1}
.mix-lijst .titel{grid-column:1;font:300 clamp(22px,2vw,28px)/1.2 var(--kop)}
.mix-lijst .pijl{grid-column:2;grid-row:1/3;align-self:center;font:600 11px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;color:var(--koraal);white-space:nowrap}
.mix-lijst a:hover .titel,.mix-lijst a:focus-visible .titel{color:var(--koraal)}
.mix-kop{background:var(--wit);color:var(--zwart);padding:clamp(40px,5vw,72px) var(--rand) 18px;margin:0}
.mix-kop h2{font:300 clamp(26px,2.4vw,34px)/1.1 var(--kop);margin:0}
.mix-noot{background:var(--wit);color:#3a3a37;margin:0;padding:0 var(--rand) clamp(50px,6vw,90px)}
.mix-noot a{color:var(--zwart)}
.news-wanneer{display:inline-block;margin:0 0 6px;padding:10px 14px;border:1px solid var(--koraal);color:var(--zwart);font:600 12px/1.4 var(--tekst);letter-spacing:.12em;text-transform:uppercase}
.voet-merk .mv-merk{font-size:28px;display:inline-block;margin-bottom:14px}
@media (max-width:900px){.mv-merk{font-size:20px}.mv-woordmerk{font-size:clamp(40px,12vw,64px)}}
@media (max-width:900px){.home .hero-bg{object-position:44% 80%!important}}
/* strook: plekken als tekst, niet klikbaar; zelfde kleur als de links op hear.nl */
.strook span.plek{opacity:1}
@media (max-width:760px){.strook .strook-wat span.plek{display:inline;white-space:nowrap}}
/* nieuws: Nederlands met Engelse toggle */
html:not(.taal-en) .t-en,html.taal-en .t-nl{display:none!important}
button.taal{background:transparent;color:inherit;cursor:pointer}
.verwijzingen span{display:contents}
/* nieuwsbeeld: picture vult de kop; op mobiel de staande flyer op volle breedte */
.casehero picture{display:block;height:100%}
@media (max-width:760px){.casehero.passend{height:auto}.casehero.passend picture,.casehero.passend img{height:auto}}
/* mixes: SoundCloud-spelers zoals op hear.nl/dj-mixes */
.mix-home{background:var(--wit);color:var(--zwart);padding:clamp(50px,6vw,90px) var(--rand) clamp(20px,3vw,40px)}
.mix-home .werk-kop{margin-bottom:0}
.mix-home .tekstlink{color:var(--zwart);white-space:nowrap}
.mix-home .mixen{padding-top:24px}
.mix .mix-link{display:block;margin-top:4px;font:600 10.5px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--koraal);text-decoration:none}
@media (max-width:760px){.mix-home .mixen{grid-template-columns:1fr}.mix-home .mix iframe{height:240px}}
/* mix-terugval in de preview (spelers van andere sites laden daar niet) */
.mix-vak{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:240px;padding:18px;background:linear-gradient(160deg,#2a2f55,#191A19 70%);color:var(--wit);text-decoration:none;overflow:hidden}
.mix-vak[hidden]{display:none}
.mix-play{position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;background:var(--koraal);color:var(--zwart);display:grid;place-items:center;font-size:16px;padding-left:3px}
.mix-golf{position:absolute;left:18px;right:18px;top:96px;height:46px;background:repeating-linear-gradient(90deg,rgba(246,245,241,.55) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);opacity:.6}
.mix-vak-t{font:300 22px/1.15 var(--kop)}
.mix-vak-l{font:600 10.5px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--koraal)}
.mix-vak:hover .mix-vak-t{color:var(--koraal)}
@media (max-width:760px){.mix-vak{height:200px}}
.aanvraag .uitleg{font-size:13px;color:#5d5b56}
.strook span.plek span{opacity:1}
/* SoundCloud-spelers vierkant, zoals op hear.nl/artiesten: de artwork valt dan niet weg */
.mix iframe{aspect-ratio:1/1;height:auto!important}
.mix-vak{aspect-ratio:1/1;height:auto}
@media (max-width:760px){.mixen{grid-template-columns:1fr}.mix iframe{height:auto!important}}

/* nieuwsbericht: kop en datum in het witte vlak, onder de afbeelding */
.nieuwshead{padding-bottom:clamp(20px,2.5vw,32px)}
.artikel-kop{margin:0 0 clamp(20px,2.5vw,32px)}
.artikel-kop .nieuws-datum{margin:0 0 10px;font:600 12px/1.4 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--tekstgrijs)}
.artikel-kop h1{font:300 clamp(28px,3.2vw,48px)/1.12 var(--kop);max-width:32ch;margin:0;color:var(--zwart);text-wrap:balance}

/* hero desktop: meer breedte en groter corps */
@media (min-width:901px){
  .hero-blok{max-width:min(100%,1180px)}
  .hero-blok .mv-tagline{font-size:clamp(40px,4.4vw,76px);line-height:1.05;margin:0 0 24px;text-wrap:balance}
  .hero .lead{font-size:clamp(20px,1.7vw,27px);max-width:60ch}
  .hero .feiten{font-size:13px}
}

/* logo rechtsboven in de hero */
.mv-logo{display:block;align-self:flex-end;width:clamp(150px,17vw,300px);height:auto;margin:0}
@media (max-width:900px){.mv-logo{width:clamp(130px,38vw,200px)}}

/* logo als homeknop linksboven */
.top .mv-merk-logo{display:inline-flex;align-items:center;line-height:0}
.top .mv-merk-logo::before{display:none}
.top .mv-merk-logo img{width:64px;height:auto}
@media (max-width:900px){.top .mv-merk-logo img{width:54px}}

/* bedankt na boeken: luchtig, zonder kader */
.formmelding.dank-luchtig{border:0;background:none;padding:0;margin:clamp(24px,4vw,48px) 0;font:300 clamp(26px,3vw,44px)/1.2 var(--kop);color:var(--zwart);max-width:30ch}
.formmelding.dank-luchtig a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* mobiel: de drie mixes op de homepage als slider */
@media (max-width:760px){
  .mix-home .mixen{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--rand));padding-left:var(--rand);padding-right:var(--rand);scroll-padding-left:var(--rand)}
  .mix-home .mixen::-webkit-scrollbar{display:none}
  .mix-home .mixen .mix{flex:0 0 84%;scroll-snap-align:start}
  .mix-home .mix iframe{height:auto!important}
}

/* homepage: Coffee cuts-blok tussen Nieuws en Bio */
.cc-strook{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,5vw,72px) var(--rand);background:var(--wit);color:var(--zwart)}
.cc-beeld{display:block;aspect-ratio:3/2;overflow:hidden}
.cc-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.cc-beeld:hover img{transform:scale(1.03)}
.cc-tekst h2{font:300 clamp(28px,2.8vw,42px)/1.12 var(--kop);margin:0 0 14px;max-width:20ch}
.cc-tekst p{font-size:clamp(16px,1.2vw,18px);line-height:1.6;margin:0 0 22px;max-width:44ch;color:#3d3c39}
@media (max-width:760px){.cc-strook{grid-template-columns:1fr;gap:20px}.cc-beeld{margin:0 calc(-1 * var(--rand));aspect-ratio:16/10}}

/* mobiele hero (3 nov): korte knop "Book", geen secundaire link, genres in de strook, titel groter boven de horizon, lead kleiner */
.wa-kort,.strook-genres{display:none}
@media (max-width:900px){
  .hero-acties .wa-plus{display:none}
  .hero-acties .wa-kort{display:inline-flex;align-items:center;gap:14px;width:auto!important;min-width:0!important;flex:0 0 auto;padding:11px 22px!important;font-size:16px}
  .hero .feiten{display:none}
  .hero-blok .mv-tagline{font-size:clamp(34px,9.6vw,44px);margin-bottom:clamp(90px,16svh,170px)}
  .hero .lead{font-size:16px;line-height:1.5;margin-bottom:22px}
  .strook{flex-direction:column;align-items:flex-start;gap:6px}
  .strook-genres{display:block;color:#a9a8a3}
}

/* hero (3 nov): ook op desktop alleen de knop "Book"; op de homepage geen Boek-knop in de topnavigatie */
.hero-acties .wa-plus{display:none}
.hero-acties .wa-kort{display:inline-flex;align-items:center;gap:14px;width:auto!important;min-width:0!important;flex:0 0 auto;padding:13px 24px!important}
.home .top .plan{display:none!important}
@media (max-width:900px){.home .hero-bg{object-position:46% 50%!important}}

/* genres in de strook (mobiel): HEAR-turquoise, over de volle breedte */
@media (max-width:900px){
  .strook-genres{display:flex!important;justify-content:space-between;width:100%;color:var(--turquoise)!important}
  .strook-genres span{opacity:1!important;color:var(--turquoise)}
  .strook-genres span[aria-hidden]{opacity:.45!important}
}

/* hero desktop (3 nov): knop rechtsonder op de lijn van het logo, genres turquoise onder de lead */
@media (min-width:901px){
  .hero-inhoud{position:relative}
  .hero-acties{position:absolute;right:var(--rand);bottom:clamp(48px,6vw,88px)}
  .hero .feiten{color:var(--turquoise);margin:0}
  .hero .lead{margin-bottom:22px}
  .hero-acties .wa-kort{font-size:18px;padding:15px 28px!important}
}